WordPress is one of the most successful blogging platforms/CMSs (Content Management Systems) on the internet. It is user friendly and customizable. Developers can customize it using it’s built-in functions and APIs without changing the core WordPress, such as making plugins, themes etc.

This tutorial is about making your own WordPress theme, through this I’ll only explain how you can make a WordPress theme. Before you start keep one thing in mind that, this tutorial is going to teach you the very basic, the core part of  WordPress theming, which means if you read this article you will not become a WordPress geek but you can design/create a unique theme for yourself or for public use. So lets start…

What is a WordPress theme: Basically WordPress theme is the user interface of a WordPress bloging site, it defines the look of the site.

Requirements for this tutorial:

1. You need to know PHP, HTML and CSS and basic use of WordPress.
2. A text editor.
3. Several web browsers.
4. A server, local or remote.

Note: Every browser does not produce/show the same output, specially the positioning is a little complicated in Internet Explorer series browsres. So it is very important to test your theme in more than one browsers. I basically test in IE 6,7,8 and Google Chrome.

How WordPress theme works:

1. index.php: WordPress uses index.php file for front page, e.g. when you write your site url on the browser’s address bar WordPress loads index.php and shows it on the browser screen. This file has four parts. Header, Sidebar, Content and Footer.
2. style.css: The style.css file is the style sheet file of the theme. This file is responsible for the look of your theme.
3. header.php: It generates the look of header in index.php file.
4. sidebar.php: This is the sidebar look. This will be used as a navigation bar in your theme and also widgets will be shown here.
5. footer.php: This is the footer look.

Content is the part of your index.php file, like other template files content does not require an individual template file.

** Important: We have discussed about index.php, style.css, header.php, sidebar.php and footer.php files. These files are main files of the WordPress theme. To make a theme these files have to be created first and it is possible to make a theme only using these files but it will be a very basic theme or not a perfect theme at all. So, what makes your theme perfect ? The answer is that, you have to create some more template files. These are:

• archive.php
• single.php
• page.php
• comments.php
• search.php
• searchform.php etc.

There are more but for this tutorial it’s enough, because this is a fundamental tutorial, just a begnning.

I will discuss about these (mentioned above) files later on this tutorial.

** Now we will go step by step and every step is important for this tutorial, so don’t ommit any part of this article, otherwise you wont be able understand it.

Step-1: First of all create a new folder in your wordpresswp-contentthemes folder and give a name related to your theme. WordPress themes are stored in thames folder. So if you want to name your theme “Myblog”, you should create this folder inside the wp-contentthemes, so WordPress can recognize your theme as Myblog.

Step-2: Copy the style.css file came with demo.zip and paste it in your theme e.g. Myblog folder and create an html file and name it index.php in the same folder.

Step-3: Now copy and paste the header.php, sidebar.php, searchform.php, comments.php and footer.php files from Mytheme folder to your new theme folder (Myblog).

Understanding the header.php file:

<title><?php bloginfo('name'); ?></title>

<-- Gets the title of your WordPress blog. -->

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

<!-- Returns the style.css file’s link with full path/url and name. -->

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />

<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />

<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

Above lines are Standard HEAD for WordPress.

<span class = "blog_title">

<a href="<?php bloginfo('url'); ?>" title="Blog Home"><?php bloginfo('name'); ?></a>

<!-- Returns the blog name. -->

</span>

<br />

<span class="blog_description"><?php bloginfo('description'); ?></span>

<!-- Returns the blog descripton if have any. -->

<?php bloginfo('url'); ?>

<!-- This will link to the homepage of your blog. -->

Understanding the sidebar.php file:

<?php include(TEMPLATEPATH . '/searchform.php'); ?>

<!-- Includes the search form. -->

<?php get_calendar(); ?>

<!-- Adds the calender inside the sidebar. -->

<?php wp_list_cats('show_count=1&title_li='); ?>

<!-- Adds all post cetegories inside the sidebar. -->

<?php wp_get_archives('type=monthly'); ?>

<!-- Lists all monthly archives and shows them inside the sidebar. -->

** Sidebar is the main navigation of your site. Administrator can add widgets in the sidebar from admin panel by drag and drop. If any widget has been added by the administrator to the sidebar then manually (By php codes) added stuff will be gone (php codes will not work), otherwise codes will add items in the sidebar.

Understanding the footer.php file:

This file will only contain the footer content which is common for every page like the copyright.

In my example I have used the php function to show copyright date and added the link of Halal IT Site. Don’t forget to add <?php wp_footer(); ?> in your footer.php else many WordPress plugins don’t work properly.

Step-4: Now open the index.php file you have created before and write the following codes:

<?php get_header(); ?>

<!-- Includes the header.php file. -->

<div id="container">

<!-- The container div,  all contents will come here. -->

<!-- The WordPress loop goes here -->

</div>

<?php get_sidebar(); ?>

<!-- Includes the sidebar.php file. -->

<?php get_footer(); ?>

<!-- Includes the footer.php file. -->

** You have just created the index.php file for the theme. The codes above inside the php tags are WordPress’ built-in functions which includes header, sidebar and footer inside the index.php file. These functions work like include() function of php. The WordPress loop is the main part of the theme. This loop fetches the data from WordPress database and fills the container div with posts. Here it is:

<?php if (have_posts()) : ?>

<!-- If any post exists in database. -->

<?php while (have_posts()) : the_post(); ?>

<!-- fetches them till posts are finished. -->

<div class="post">
<?php the_content() ?>
<!-- Fills posts with post date, post category, post title, post body (the_content() function returns post text) etc and adds comments link. -->

</div>

<?php endwhile; ?>

<!-- Ends the loop. -->

<?php else : ?>

<!-- If post does not exist then Show “Not Found”. -->

<h2>Not Found</h2>

<?php endif; ?>

<!-- Closes if condition. -->

** This is it.

** Here is the list of the Theme files recognized by WordPress. Of course, your Theme can contain any other stylesheets, images, or files. Just keep in mind that the following have special meaning to WordPress.

archive.php

The archive template. Used when a category, author, or date is queried. Note that this template will be overridden by category.php, author.php, and date.php for their respective query types.

search.php

The search results template. Used when a search is performed.

single.php

The single post template. Used when a single post is queried. For this and all other query templates, index.php is used if the query template is not present.

page.php

The page template. Used when an individual page is queried.

comments.php

The comments template

** Archive.php, Search.php, Single.php and Page.php files are all most similar. Only the loop (container div) has been changed a little. But everything is possible by index.php file. But you should use the advantage of WordPress by using those template files in your theme, so copy and paste all the other files from Mytheme folder to your new theme folder (Myblog) and see the difference.

** Things to remember:

Don’t remove following lines from style.css file. These are useful to WordPress to know certain information about your theme. Every line is self descriptive. You are free to change. WordPress will show these information in the admin panel.

Theme Name: My Blog Theme

Theme URI: http://www.halalit.net/blog/wp-content/themes/Mytheme

Description: This is my first WordPress theme.

Version: 1.0

Author: Heera

Author URI: http://www.halalit.net/about

** Screenshot.png file: WordPress uses this file to show a preview of your theme in admin panel, so take a screenshot of your theme and save it in the theme folder with png or jpg extension.

This is a very basic of WordPress theme design recipe. You can a extend it and play through it as you wish.

** You will find more advanced information at http://codex.wordpress.org/Theme_Development.

Articles by Halal IT Team