{"id":301,"date":"2010-07-19T13:42:54","date_gmt":"2010-07-19T17:42:54","guid":{"rendered":"http:\/\/www.blogseye.com\/"},"modified":"2010-07-19T15:23:51","modified_gmt":"2010-07-19T19:23:51","slug":"convert-a-web-page-to-a-wordpress-theme-in-5-minutes","status":"publish","type":"page","link":"http:\/\/blogseye\/convert-a-web-page-to-a-wordpress-theme-in-5-minutes.html","title":{"rendered":"Convert a web page to a WordPress Theme in 5 minutes."},"content":{"rendered":"

Everything you need is in the roll-your-own-theme.zip<\/a> file.<\/p>\n

WordPress blogs are getting to be like Pop Music – same words, same music, same beat, different song. They are variations on a single theme and that theme is the WordPress default. A certain sameness creeps into WordPress sites so that “Yet another WordPress Site” becomes the norm and not just a default setting on the admin panel.<\/p>\n

Most web designers can pull off interesting stuff, but because creating a new theme is usually based on hacking the default theme, they are limited in what they can attempt. I’ve been converting a good number of blogs from static pages or blogger.com templates using the default theme hacks. This is time consuming and means that I spend most of my time fitting style into rigid constraints. I wind up castrating a client’s design to shoehorn things into the limiting container of the default theme.<\/p>\n

The Goal of a Five Minute Theme.<\/h2>\n

Web designers need to be able design a page, add a snippet to replace Lorem Ipsum and press a button to create a WordPress Blog. I haven’t written the app that can do that, but I’ve put together a few files that encapsulate WordPress theme parts in a few small files. My goal was to convert a web page into a WordPress theme in five minutes.<\/p>\n

No PHP required.<\/h2>\n

I placed the guts of a WordPress theme into files. The only PHP required is the includes that a designer can cut and paste into their template at the appropriate place.<\/p>\n

Many web designers only learn enough PHP to know what they should not touch in a theme. They can do simple cut and paste but they hire a PHP coder to convert their designs to themes. This is no longer a requirement.<\/p>\n

Now see if you can do it in less than five minutes.<\/h2>\n

Step one. (30 seconds)<\/h3>\n

Download the roll-your-own-theme.zip file and unzip it into and appropriately named folder.<\/p>\n

Step two. (30 seconds)<\/h3>\n

Copy your nicely designed web template to the directory and rename it to index.php.<\/p>\n

Step three (One minute).<\/h3>\n

Edit your new index.php and delete everything above <body> tag. That’s the entire head section, the HTML tag and the doctype directive. Replace this with one line:<\/p>\n

<?PHP include(‘top.php’); ?><\/p>\n

Save your work.<\/p>\n

Step four (30 seconds)<\/h3>\n

Locate your Lorem Ipsum area where the blog posts will go. Delete anything that you don’t need for the blog, such as the filler used to help design the page.<\/p>\n

Replace this with one line:<\/p>\n

<?PHP include(‘content.php’); ?><\/p>\n

Save your work.<\/p>\n

Step four (30 seconds)<\/h3>\n

Find your sidebar. Delete the dummy content used for testing out the web page and replace it with:<\/p>\n

<?PHP include(‘side.php’); ?><\/p>\n

Save your work.<\/p>\n

Step five (30 seconds)<\/h3>\n

Go down to your footer (if you have one), and insert this:<\/p>\n

<?PHP include(‘bot.php’); ?><\/p>\n

If you don’t have a footer area per se<\/em>, then just insert the line before the <\/body> tag.<\/p>\n

Save and exit.<\/p>\n

Step six (30 seconds)<\/h3>\n

Open the included style sheet style.css, and change the name and author at the top.<\/p>\n

Open the style sheet that you used to create your template and copy all of the styles into the bottom of new style.css.<\/p>\n

Save and close.<\/p>\n

Done!<\/p>\n

You can now upload the new directory to your WordPress installations themes directory and preview it. It might need tweaking, but it should look pretty much like you’d like it to look.<\/p>\n

How it works.<\/h2>\n

WordPress doesn’t need the dozen or so files that you usually see in a theme. It really only needs three files, index.php, functions.php and style.css. I boiled the essence of the default themes into the three files you included in your index.php. These files do all the work of the other files included in a standard theme.<\/p>\n

WordPress has built in code for special files such as singletons, pages, archives, and images, but these are essentially the same as the main page in 90% of the themes out there. You can copy the index.php file to page.php if you like and restyle that to do pages differently than posts, but you don’t have to. If WordPress doesn’t find a page.php file, it will happily use index.php.<\/p>\n

Tweaking the Style Sheet.<\/h2>\n

You may need to fix up some of the styles that WordPress uses to show posts, comments and categories. I have included several of these as stubs in the style.css file. If, for instance, the post title is the wrong size, color or font, you can add some style to the .entry-title class and fix it up. Since the fine tuning of any project will go on for years, I did not include it the five minutes that I allocated for converting the template to a theme.<\/p>\n

Experienced programmers will want to change things, especially in the top.php and content.php files. Please let me know if you add something absolutely essential or fix any bugs.<\/p>\n

I am a WordPress tinkerer and not an expert. This works – I’m running it on several sites. I am sure that the many real Gurus will either reject this method as overly simplistic, but my hope is that I will receive lots of good ideas to improve the method without making it more complicated.<\/p>\n

\ufeffOn this site, I am currently using a theme based on the roll-your-own-theme.zip<\/a> file.<\/p>\n","protected":false},"excerpt":{"rendered":"

Everything you need is in the roll-your-own-theme.zip file. WordPress blogs are getting to be like Pop Music – same words, same music, same beat, different song. They are variations on a single theme and that theme is the WordPress default. A certain sameness creeps into WordPress sites so that “Yet another WordPress Site” becomes the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"http:\/\/blogseye\/wp-json\/wp\/v2\/pages\/301"}],"collection":[{"href":"http:\/\/blogseye\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/blogseye\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/blogseye\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blogseye\/wp-json\/wp\/v2\/comments?post=301"}],"version-history":[{"count":1,"href":"http:\/\/blogseye\/wp-json\/wp\/v2\/pages\/301\/revisions"}],"predecessor-version":[{"id":1383,"href":"http:\/\/blogseye\/wp-json\/wp\/v2\/pages\/301\/revisions\/1383"}],"wp:attachment":[{"href":"http:\/\/blogseye\/wp-json\/wp\/v2\/media?parent=301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}