How-To: Create a wordpress template in 5 minutes
September 17th, 2006
Hi, how many of you have felt the need to create a new wordpress template and felt that the structure is too intimidating? We had the same feeling too until we realised how easy it is to create a wordpress template.
A few things before you need a template are,
1. Figure out the layout of your blog. That is, you should be clear about what should be placed where. Ofcourse, it’s entirely at your discretion.
2. Create a simple HTML page that show cases your layout.
3. Mould the simple page into a beautiful wordpress template.
Ready?? Ok, let’s start!
As said in point 1, I have just created a basic layout as shown in the screen shot below.
You can definitely tell about the various sections that make up the page. They are the header, content, sidebar, footer. To abstract this and give power to the template designers, wordpress has placed the various sections into different pages.
In addition to this, you have to add proper CSS to your design. Include them in “style.css”. Therefore, the files necessary are,
1. header.php -> Header
2. footer.php -> Footer
3. sidebar.php -> Sidebar
4. index.php -> Content glued with header, sidebar and footer.
5. style.css -> CSS
That is all you need to create a basic template. Clear? Any doubts? Post them here.
Designing the Template:
The HTML for our basic layout goes like this.
Have a look at the simple style sheet for the basic layout. Save this as “style.css”. We would need it later.
Now that you have saved it, open the HTML file in a good text editor. You can see <div> sections that are tagged with “header”, “footer”, “sidebar” and “content”. Let us create the header file.
1. Open notepad, and paste the code shown below. Save this file as “header.php”.
2. Copy the fragment below and save it in a new file as “footer.php”.
3. Copy the sidebar code and save it in a new file as “sidebar.php”.
4. Last but not the least, let us create the “index.php”. If you notice, there are special lines such as “<?php get_header(); ?>”, “<?php get_footer(); ?>”, “<?php get_sidebar(); ?>”. These are the functions that are used to glue the content with header, sidebar and footer. Great! we are almost done… few more minutes.
5. Create a new folder and name it as “DarlingTemplate”. Move all the newly created files, including the “style.css” to the folder. To test the new template, upload[:1] this folder to the <Wordpress_install_location>/wp-content/themes folder. Login to your blog and you will see the new template under the “Presentation” tab.
6. Click on our template name to activate it. Well, everything is cool. The template looks just like the simple HTML file we created earlier. But, what happened to the posts?
7. Open up “index.php”, replace it with the text in the following box and save it. Make sure the modified
file is uploaded to the <Wordpress_install_location>/wp-content/themes/DarlingTemplate
folder. Refresh the blog homepage. Voila!! the posts are there.
8. Oh! we are still left with 30 seconds. Take a screen shot of your theme. Save it as “screenshot.png” and upload it to
<Wordpress_install_location>/wp-content/themes/DarlingTemplate.
Now, when you login to your wordpress account, our template will have a medium sized thumbnail picture.
We have uploaded the final sample template as a zip file for your reference. Download it here.
Happy Templating! 🙂
Note:
1. You cannot upload the new template if your blog is hosted at wordpress.com.