Convert a web page to a WordPress Theme in 5 minutes.
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.
Thanks, Keith!
It looks like you are missing the top, side and bottom php files. These all have to be in the same folder as the index.php and the style.css file.
Keith
Hello Keith,
Thank you so much for doing this. I’m having a bit of a problem. It seems my theme isn’t recognizing the css. I think I followed the steps, but may have missed something. Any thoughts?
Hi Keith, keep it up as it was a mistake on my end. I was using dreamweaver’s fluid grid template system and had to tweak it a bit to get your instructions to work. So my previous post was a little premature…my bad!
Thanks,
I wrote this a long time ago. I’ll delete it.
Keith
This obviously doesn’t work anymore as I followed the instructions and got all kinds of php errors with wp 4.7.
Awesome Keith. Any similar tutorial if the design has multiple pages with different content.
Thanks
Thank you! Nice and easy tutorial.
That’s a wordpress issue and has to be something that you did when you uploaded the image or added it to a page. I don’t seem to have the same problem.
Keith
Thanks for providing this great template to get your own custom theme started.
I am noticing one issue which I have yet to figure out. When I add an image to the site and set not to link to anything, the image still links to the homepage. If I add a link to the image then you are redirected to that link upon clicking the image.
Any suggestions?
This is cool… I tried it and got the basics.. As u said one has to play around with CSS a bit
hey man, thank you so much 🙂
sorry to ask this silly question but i am confused Keith. Please guide me on this..
1. My site is static, only Blog is on wordpress i.e (exampledotcom/blog). Now i want to move my whole site to wordpress.
2. how do i change my landing page to be homepage and not (exampledotcom/blog)…???
thanks
thanx for the great tutorial & roll your own theme , i have done all thing but i have problem to create nav bar from wordpress dashboard ….. plz help
Sure send it to [email protected]
i m doing just practice on localhost so i can show u my page ?
i can send u the rar file via mail…can i ?
I need to see the site to tell you what is wrong.
Possibly the image tag will need a complete path to the image like /images/myimage.gif
Let me know.
Keith
every thing goes fine , css property background-image also work fines but img tag not worked . firebug shows a message unable to load 🙁 plz help
I stopped getting the error but the page shows blank
I am getting this error, can you please help me
Call to undefined function language_attributes() in /home/albinor1/public_html/telometers.com/top.php on line 11
The site looks good.
Any page directs back to the main site. I tried wpadmin.ndisign.de/xxxyyy and it returned to the main page. You don’t actually have a page named accordions-designs on your site. You have to create it in WordPress.
Keith
hey keith! thanks a lot you’ve done a really great job – i hope you can help me with this little problem: all menus are referring to the same site – i mean on my page: wpadmin.ndisign.de – i have converted a website into wordpress like you’ve instructed – but although the main site is working the others arent … do u have clue? appreciate it!
Can I just pay someone to do this? My site is php, I think and to me, it’s a mess. I can’t find any of the things mentioned above. thanks
Thanks for helping me with this
Hi Keith,
Being a wordpress developer I couldn’t agree more. The other day I wanted to find out how much a competitor would charge to convert my existing static site into a WP one to be able to price myself in his area.
The developer explained to me that it is a very complicated process and would cost me about $1300. He said all the existing HTML and CSS is useless when transferring to a CMS.
I was tempted to tell him that I am a developer too and it takes me 10 minutes max. (I’m not as quick as you 😉 )
Hope more unassuming people see this post and don’t get ripped off!
Thanks a lot!
What is your point? Are you saying that only people who pay developers thousands of dollars or learn PHP should be allowed to use WordPress?
The article is about a way to make a dumb little template out of a web page very quickly. That’s all it is. Many people will need more, but many people can use this as a way to create a simple template.
Keith
… and navigation menus, there isn’t any… not even in functions.php
How would any newbie have a chance at fixing that? They would be a newbie any longer after registering menus in functions.php and then adding them to index.php
And yet it works for many people.
Keith
While this is a nice start, it’s no way going to work on even the 90% of HTML layouts. Or 90% of the people reading this. You will need intermediate knowledge of WordPress, how to use a browser debugger like Firebug and how to navigate through the WordPress codex to find info you need. It also helps a great deal if you design the original HTML template with conversion to WordPress in mind as it’s purpose.
It is a great start though.
1- Add the scripts and links to scripts from section to top.php
1A – Anything with a file path in it will have to converted into wordpress friendly file paths
2- Somehow all those nifty styles in the HTML template have to be attached to the elements that are in content.php, side.php and bot.php. This is a lot of work and it takes advanced knowledge of WordPress because they all have specific names that WordPress uses like div.entry-content for the text area of a blog post.
i have not really tried this out but i just hope it works. thanks
Just wanted to say the files you have created are all still working just fine with the latest WordPress, and that the work you have put into this has been a MASSIVE help to me in trying to create a WordPress blog that looks just like the rest of my website. THANK YOU!
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..
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 https://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!
Hi,
I seem to be having a problem getting the comments to show up on my custom theme :/
https://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
aaah cool, that works now – thanks 🙂
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
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
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 🙂
Do I have to name the folder something specific? I did all the steps and nothing has changed.
Thanks!
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.
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
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 :).