theme-layout

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:

  1. Create a layout of your blog by figuring out what is to be placed where.
  2. 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.theme-layout

Right Then !!! We are ready to proceed

The files necessary for a theme to function properly in WordPress are:

  1. header.php -> Header
  2. index.php -> Content glued with header, sidebar and footer.
  3. sidebar.php -> Sidebar
  4. footer.php -> Footer
  5. style.css -> CSS

Now we will write some sample code for all the default files

The header.php

   

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:

This simple css file sets the basic looks of your theme. The theme will look something like the image here:

theme-sample1
So after doing all this we have basic theme functional.

Leave a Reply

Your email address will not be published. Required fields are marked *