Anatomy of a WordPress theme – a tutorial

22 Comments    October 12, 2005 22:31


I thought I might take the time to explain for the interested how a WordPress theme is built and styled. So today we are going to build a very simple theme and apply some css styles to it.

Download tutorial theme here.

To start with we need a number of files for a theme to work, the most important one is index.php which is where all the content is generated. We also need a header.php to hold the meta tags, title and doc types. If we want to add a sidebar to our theme we alse need sidebar.php. For the footer we need footer.php which contains a footer and closes all the tags in the previous files.
Every WP-theme is build up by Template-tags which are functions in WP’s library for retriving information from the database and displaying diffrent values for every post such as tge content, title, date and so forth. Of course you can build a theme by only using index.php but it makes it more difficult to get an overlook of the code
.

If we start with header.php we need to declare the usual meta tags and stuff, in it’s simplest form this looks like this:

header.php





// Get blog title from database
<?php bloginfo('name'); ?>
// Print blog title
<?php wp_title(); ?>

Now this was the minimum code for the header, you can always add more meta tags and other stuff here. As you can see we have <div id=”wrap”> which is the main container for the page and with css we can style this to be a fixed or liquid layout, more on css later. Then comes <div id=”header”> which is the header for displaying the blog title and tagline.

Ok now let’s take a look at index.php and the Loop which is the heart of the theme and where the content, post, and pages are retrived from the database and displayed. Some of the template tags must be whithin this Loop to work since they depend on certain global variables. Take a look at the code and read the comments to get a feeling for what’s happening. All the template tags are PHP functions and should be treated as such, meaning that the function calls must be whithin PHP tags, ex. <?php my_func(); ?>.

index.php

// Include header.php

// Start the Loop to print all the posts whithin limit

// Print the date

  

// Print title and permalink


// Print post time


// Print category
Posted to 
// Print post content

// Print comments link
';
comments_popup_link(' Comments(0)', $comments_img_link. ' Comments(1)', $comments_img_link. ' Comments(%)'); ?>
// Trackback link

// Include comments template



// Print page navigation
// Include sidebar.php // Include footer.php

In this file we start by including the header file then we start a Loop to iterate over every post we want to display and prints the apropriate headers and the post bodies. At the end we includes our sidebar file and the footer file

.

sidebar.php

Sidebar.php is just a set of nested unordered lists which is easy to style.

footer.php


// End wrap

As you can see all the individual files are included into index.php and therefor it is very easy to maintain and make changes to the theme. Now when we are done with the code templates we can take a look at some very simple stylesheets since our site is not very pretty at the moment.

style.css

/*
Theme Name: Tutorial
Theme URI: http://www.fahlstad.se
Description: A theme for tutorial purposes
Version: 1.0
Author: Fredrik Fahlstad
Author URI: http://www.fahlstad.se
*/
body {
     font-family: Arial, Helvetica, sans-serif;
     background-color: #CCCCCC;
}
#wrap {
      width:750px;
}
#header {
        background-color: #999999;
        height: 100px;
        padding: 10px;
}
#content {
         float:left;
         width:510px;
         padding:10px;
         background-color: #FFFFFF;
}
#sidebar {
         float:right;
         width:200px;
         padding:10px;
         background-color: #f4f4f4;
}
#footer {
        clear:both;
}

As you can see the style.css starts with some meta information for WP’s admin panel

• Past surgery :1. Informed patient choice viagra bestellen berlin.

12Erectile dysfunction can be effectively treated with afactors in the individual patient must be emphasized. canadian viagra.

million men aged 40 and above (5) .• There is no evidence that currently licensed buy cialis canada.

. This is standard and should not be changed. First we start by making out body having grey as background. The header is another color so we can see where it is. The content is a little tricky beacuse here we sets a width and making it float to the left. The sidebar is floated to the right so the content div and sidebar div is placed side by side. Footer is below two floating divs so we needs to clear both sides for it.

I have now showed you a very simple theme application with minimal styling, you can always put each post, post header, comment links etc. in separate containers which makes it easier to style later on. I hope you have gotten some understanding of theme creation. You can download the tutorial theme if you want to experiment.

If ou now want to extend the functionality of your theme you can make the site look diffrent depending on what type of post showing. For examlpe you can make more files like archive.php, search.php and 404.php. These files should have yhe same Loop as index.php and is called instead of index when an archive or category is shown. The same goes for search.php which is used when a search result is shown. There are a great number of template files you can use, for a complete list see further reading below.

Further reading:
Theme development
Template hierarcy

  22 Comments   Comment

  1. Pujiono

    19 years ago  

    As a newbie in the world of PHP and such, this tutorial is very helpful. Thank you so much, Frederik.

  2. hipocratico

    19 years ago  

    I added this to my community blog (aka mtyblogs.com/blog). I noticed you don´t have permalinks activated.

    Thanks…the newbie world appreciate this

  3. drumnswhistles

    19 years ago  

    Thank you for this — it’s EXACTLY what I’m looking for. I’ve just added you to my subscriptions. 😉

  4. Denni’s WebLog » Blog Archive » –ü–æ–ª–µ–?–?–æ—Å—Ç–? –¥–ª—è WordPress

    19 years ago  

    […] –ù–? —Å–?–?—Ç–µ Fahlstad.se –æ–ø—É–±–ª–?–?–æ–?–?–?–? —Å—Ç–?—Ç—å—è “Anatomy of a WordPress theme”. –í—Å–µ, –?—Ç–æ –?–µ–ª–?–µ—Ç —Å–æ–±—Å—Ç–?–µ–?–?—ã–º–? —Ä—É–?–?–º–? –ø—Ä–µ–æ–±—Ä–?–?–?—Ç—å —Å–?–æ–? –±–ª–æ–?, –º–æ–?—É—Ç –?–?–?—Ç–? –? –ø—Ä–æ—á–?—Ç–?—Ç—å (–?–? –?–?–?–ª–?–?—Å–?–æ–º —è–?—ã–?–µ). –ù–? —Ç–æ–º –?–µ —Å–?–?—Ç–µ –?–µ—Å–?–æ–ª—å–?–æ –?–µ–ø–ª–æ—Ö–?—Ö —Ç–µ–º –¥–ª—è WordPress –æ—Ç –?–?—Ç–æ—Ä–? —Å—Ç–?—Ç—å–?. –ö—Å—Ç–?—Ç–?, –? Andrew Reeve –ø—Ä–µ–¥—Å—Ç–?–?–?–ª –?–æ–?—É—é —Ç–µ–º—É –ø–æ–¥ –?–?–?–?–?–?–?–µ–º “Area WP”. –°–º–æ—Ç—Ä–?–º. […]

  6. Richard Waters

    19 years ago  

    It’s a great tutorial – and I have learnt a lot, but Im having troubles trying to integrate “photopress” & “subscribe2” into the “fblue” template… …could you point me in the right direction please?

    How can I keep the “sidebar” to the side? with “photopress” the sidebar appears below the content and apparently wrapped in a narrow div with the footer and the opposite happens with the “subscribe2” except it appears above the subscribe form?!

    I love this theme and would dearly love to use it – but I have tried EVERYTHING I can to get it to work, read about “the loop” tried to copy the contents of “index.php” and add the contents of the “*.php” files that are supposed to display and I cant get the side to stay.

    PLEASE HELP – I want to use this theme?!

    Thanks, Richard

    PS – Can anyone help, has anyone solved this problem please?

  7. Richard Waters

    19 years ago  

    Scratch the last comment – I found where your “loop” was going and in the last 30min, thanks to a Berocca and some elbow grease… …BINGO!

    PhotoPress AND Subscribe2 now fit PERFECTLY into the theme and look fantastic!

    Thanks anyway! 😀

  12. blogw?ºrdig

    19 years ago  

    @Jo
    in template fTiny i had to move “” not only to “index.php” but also to “page.php”, “archive.php” and “search.php”.

  14. Ladele

    19 years ago  

    This is great. I will be sharing it with other professional collegues. As a newbie into the world of blog, this will help a lot.

    Once again, thanks

Leave a Comment

You must be logged in to post a comment.

Affiliates

Meta