How-To: Create a WordPress Theme in 5 minutes
It is fairly easy to create a WordPress Theme. A few things before you need a template are:
- Create a layout of your blog by figuring out what is to be placed where.
- Create a HTML layout based on the above layout.
A sample layout which we are using in this tutorial can be seen in the image here.
Right Then !!! We are ready to proceed
The files necessary for a theme to function properly in WordPress are:
- header.php -> Header
- index.php -> Content glued with header, sidebar and footer.
- sidebar.php -> Sidebar
- footer.php -> Footer
- style.css -> CSS
Now we will write some sample code for all the default files
The header.php
1 |
HEADER
Basically, this is simple HTML code with a single line containing a php code and a standard WordPress function. In this file you can specify your meta tags such as the title of your website, meta description and the keywords for your page.
Right after the title the line we add
. This tells WordPress to load the style.css file for the theme. It will handle the styling of your website. The part of the line is a WordPress function that loads the stylesheet file.
Next, we have added the beginning of a “div” with class wrapper which will be the main container of the website. We have set class for it so we can modify it via the style.css file.
After that we have added a simple label HEADER wrapped in a “div” with class “header” which will be later specified in the stylesheet file.
The index.php file
Main Area
Posted on
The code in this file begins with which will include the header.php file and the code in it in the main page. It uses an WordPress function to do this. Then we have placed a Main Area text to indicate which section of your theme is displayed in this area.
The code next to the function checks whether your WordPress installation has posts to publish or not. If it has posts, they are displayed.
After this we will include the sidebar.php file with this line –. In this file you can display your post categories, archives etc.
After this line, we insert an empty “div” that will separate the Main Area and the Sidebar from the footer.
Finally, we add one last line – which will include the footer.php file in your page.
The sidebar.php file
In the sidebar.php we will add the following code:
In the sidebar.php file we use internal WordPress functions to display the Categories and Archives of posts. The WordPress function returns them as list items, therefore we have wrapped the actual functions in unsorted lists (the tags).
The footer.php file
We have added these lines to the footer.php file:
With this code we add a simple FOOTER label. You can also add additional links in the footer.
The style.css file
The style.css will handle the styling of the theme. Add the following lines to the style.css file to create some styling for the theme:
1 2 3 4 5 6 7 8 |
body { text-align: center;} #wrapper { display: block; border: 1px #a2a2a2 solid; width:90%; margin:0px auto;} #header { border: 2px #a2a2a2 solid;} #content { width: 75%; border: 2px #a2a2a2 solid; float: left;} #sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right;} #delimiter { clear: both;} #footer { border: 2px #a2a2a2 solid;} .title { font-size: 11pt; font-family: verdana; font-weight: bold;} |
This simple css file sets the basic looks of your theme. The theme will look something like the image here:
So after doing all this we have basic theme functional.