Wordpress, one of the most popular blogging platforms of the world, has a large user base throughout the world. One of the main attractions for its users is the great themes contributed by the thousands of users around the world. Though in general, bloggers use the themes already available and contributed by other users, but sometimes there is a need to customize the theme or create a new theme from the scratch. Without getting to much in the history, let me show you how to create a Wordpress theme with as little expertise as possible. Keep in mind that developing a Wordpress theme doesnot require PHP expertise from your side. Just a little of CSS and working knowledge of XHTML / PHP will work.
Getting into Wordpress Theme
Before starting the actual development of the theme, we need to understand how Wordpress actually works and how the content is presented to the users. Well, the short answer is that the content in Wordpress is served by themes to the users. Themes in Wordpress is a combination of CSS and PHP files that reside inside a particular directory at a particular place. The ‘particular directory’ meant for storing of theme related stuff is named with the name of theme and this will be the public identity of your theme. The theme directory resides in wp-content/themes/ directory. Actually, all the Wordpress themes reside under the same directory.
Structure of Wordpress Theme
The Wordpress theme mainly consists of four regions viz, header, footer, content & sidebar. You can theme every region with an independent theme file. Wordpress theme essentially consists of two files, one for CSS named style.css and another for content named index.php. We can run our theme with these two files only and later on add more files to fine tune the theme.
Get Started
Let’s start actual theme development. With your favourite text editor or PHP editor, create a blank CSS file inside your theme folder, let’s say cool-theme, and name it as style.css. Put a few lines of comments at the top like this.
/*Theme Name: cool-theme
Theme URI: http://www.yoursitename.com
Description: My theme is a cool and beautiful theme
Version: 1.0.0
Author: Ehsan Quddusi
Author URI: http://www.authorsitename.com
*/
Well this is the standard comment style for Wordpress CSS file. Actually this information is read by Wordpress to display it in the theme list alongwith the provided thumbnail. You can see the theme list in admin menu of Wordpress under Presentation heading. All the lines in the above comment are self explanatory and you can well understand what they mean. Now that our CSS file is created with the initial theme information in the form of comment, it is time to create the PHP file to display content on the page. Again using any text editor, let’s create a PHP file named index.php
Now let’s put some code into it, to display all the posts available there.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> My Wordpress Theme</title>
</head>
<body>
<?php if (have_posts()) {
while (have_posts()) {
the_post();
the_title();
echo '<br/>';
}
}?>
</body>
</html>
Wow! you are done. With just a few lines of code, you are able to fetch all the Wordpress Post titles from the database. Let’s have a look on the above code. HTML code is same as you will be using for normal web development. Now let’s have a look on PHP code wrapped inside <?php and ?>. Here we are using a condition to verify the output and if available loop through it and display contents. Oh! I know you will be feeling boring. Ok let’s quickly move next. Actually here we are using an in-built function of Wordpress, have_posts(), to fetch the contents of the post. The above function first checks for the posts and if available loops through them to fetch content the content of each of them and display their title using the_title().
It is interesting to note that we displayed titles of all the posts with just few lines of code. Let’s have some fun now. Every post in Wordpress has an ID associated with it and we will provide a link to each title to display its content. Let’s modify the above written PHP code like this.
<?php
if (have_posts()){
while (have_posts()) {
the_post(); ?>
<a href="<?php the_permalink();?>"><?php the_title();?></a><br/>
<?php if(!is_home()) {
print '<p>';
the_content();
print '</p>';
}
}
}
?>
And here it is. Magic! as you can see. Again by adding 4 lines of code, we are able to provide a link to each post title to show its contents on an independent page. This is the beauty of Wordpress. Minimising as much code as possible and maximising productivity.
We will now update our code again to display category with each post as well as date of posting and author.
<?php
if (have_posts()){
while (have_posts()) {
the_post(); ?>
<a href="<?php the_permalink();?>"><?php the_title();?></a><br/>
Posted under <strong><?php the_category(',');?></strong> at <strong><?php the_time('F jS, Y');?></strong> by <strong><?php the_author();?></strong><hr/>
<?php if(!is_home()) {
print '<p>';
the_content();
print '</p>';
}
}
}
?>
And we are done. By putting a single line of code, we have been able to derieve post category, post date & post title for each post. Wordpress API provides all the theme related functions to minimize custom coding. As you can see we used three function in the above written one line. the_category() function is responsible for deriving categories of each post separated by supplied argument ‘,’. We can pass many optional arguments to the the_catgory() function to exclude some categories or provide post counts etc. Another function used is the_time(’F jS, Y’), meant for displaying date of the post while as the_author displays the link for the author alongwith his/her name. This ends the basic tutorial on Wordpress theming.
One thing to note is that Wordpress allows splitting of code into multiple files for the sake of manageability and granular control over design. Till now we have used only one file in our theme. In the next tutorial we will be using multiple files for theming to achieve granular control along with doing some designing using CSS.
2 Responses to How to develop Wordpress Themes (Basic)
-
Robert Houg Says:November 26th, 2008
This is a fantastic article regarding Wordpress theming. Everything is clearly explained and written. I was much benefitted by the tutorial. Keep it up and please release the next step of this tutorial.
-
Roy Nottage Says:November 26th, 2008
Excellent, thank you. I was looking for a entry point into the development of themes, and you provided it.
Perfect!
