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 norm and not just a default setting on the admin panel.
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.
The Goal of a Five Minute Theme.
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.
No PHP required.
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.
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.
Now see if you can do it in less than five minutes.
Step one. (30 seconds)
Download the roll-your-own-theme.zip file and unzip it into and appropriately named folder.
Step two. (30 seconds)
Copy your nicely designed web template to the directory and rename it to index.php.
Step three (One minute).
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:
<?PHP include(‘top.php’); ?>
Save your work.
Step four (30 seconds)
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.
Replace this with one line:
<?PHP include(‘content.php’); ?>
Save your work.
Step four (30 seconds)
Find your sidebar. Delete the dummy content used for testing out the web page and replace it with:
<?PHP include(‘side.php’); ?>
Save your work.
Step five (30 seconds)
Go down to your footer (if you have one), and insert this:
<?PHP include(‘bot.php’); ?>
If you don’t have a footer area per se, then just insert the line before the </body> tag.
Save and exit.
Step six (30 seconds)
Open the included style sheet style.css, and change the name and author at the top.
Open the style sheet that you used to create your template and copy all of the styles into the bottom of new style.css.
Save and close.
Done!
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.
How it works.
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.
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.
Tweaking the Style Sheet.
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.
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.
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.
On this site, I am currently using a theme based on the roll-your-own-theme.zip file.
Thank you very much. I’ve just downloaded your roll*.zip and I’m starting to work. I guess that for the first time it will take me more then 5 minutes
.
I’m getting errors – I did exactly as you said above, any idea why? If you could go to my blog site you will see exactly the errors. Thank you
elisashcgweightloss.com
You need to download the zip file and unzip it in the same directory where you created the theme. It is not finding the files from the zip.
Do I have to name the folder something specific? I did all the steps and nothing has changed.
Thanks!
This was of great help for me!
I was going to hire a wordpress template designer and you’ve come to my rescue.
Thanks in tonnes
Hi,
I’ve done the steps and placed them in /wp-themes/new , yet from the admin panel I can’t seem to find the theme to set it live so I can check it out?
TIA
Andy
WordPress discovers themes using the style.css file. You forgot to include ALL the files from the zip or else you altered the style.css file and took out the comments at the top of the file.
Keith
aaah cool, that works now – thanks
Hi,
I seem to be having a problem getting the comments to show up on my custom theme :/
http://www.mywebsitedesignersblog.com/2011/01/flash-css-and-image-menu-system-the-easy-way/
The comment block shows up ok – but for some reason the comments never do
BTW, thanks for sharing this template set – its saved me MANY hours of trying to work out what the heck to do in terms of creating a theme. I’m gonna write a blog entry about this site once I’ve got it all working properly so that others can also hopefully find your post as useful as me
TIA
Andy
It’s soo easy going through the tutorial. Love to learn everything about WordPress. Now I am getting crazy about WordPress. Before I came to know coding and all these stuffs in WordPress, I make my sites converted by http://www.wpconverter.com. And interestingly, they have converted my old site to a brand new wordpress site. Starting from that moment onwards, I start loving wordpress and having fun with it. Plz post more wordpress related tutorials!
Is something like this possible for plugins? I mean, a method to create your own plugins?
Thanks for the roll your own theme zip file, though. Fantastic work that helps me in many ways. WordPress theme developers are expensive..