Issue 4 will be out some time in the future. WP Mag is on holiday while its writer is busy after moving house!
Home » Issue 1

Make a theme series (part 1): The Loop

22 October 2008 1,105 views 9 Comments
Make a theme series (part 1): The Loop

Making your own theme for WordPress isn’t difficult once you grasp the basics.  In this series I will lead you through making a theme from scratch.  Even if you don’t intend to make a theme to use on your own site, following these articles will help you to modify existing themes, letting you make WordPress do exactly what you want!

You don’t need any experience in web design to follow these tutorials.  However if you already do know how to make a static website, without WordPress, it should be easy to skim over the parts you already understand and focus on the things specific to WordPress.

1. Get a text editor

To edit theme files you will need a text editor (a wordprocessor such as Microsoft Word won’t do).  You’ll save your sanity if you use a text editor that has syntax highlighting: it will colour-code your code, making it easier to read.  If you use Linux you probably already have a good text editor; if you are using Mac OS X then Smultron will be just what you’re looking for.  I’m currently using Windows and use Notepad++ which I highly recommend.

2. Create the files for your theme

Make a new directory for your theme inside wp-content/themes, making sure there are no spaces in it.  I’ll call mine your-theme.  A basic theme needs two files, index.php which will determine the text displayed and a stylesheet (style.css) which will control the layout.  In your text editor write some text as a placeholder and save it as index.php.

Now make a new file for your stylesheet.  WordPress needs a special header at the top of it so that it can recognise the theme and list it on the Design > Themes page.  You can copy the stylesheet header shown below, changing the details to what you like.  Don’t worry if you leave some definitions blank; the important line is the name of the theme at the top.  Save the file as style.css.


/*
Theme Name: My Theme
Theme URI: http://www.thewordpressmagazine.com/make-a-theme-series
Description: This is Steve's own theme
Author: Steve Smith
Author URI: http://www.stevesmith1983.co.uk
Version: 1.0
.
General comments/License Statement if any.
.
*/

You should now have a directory like the one shown here.  Upload it to your server if it’s not on there already, then go to Design > Themes.  Click on your new theme and press the activate link in the top right corner.

View your site to see your new theme in action.  Okay, so it doesn’t do much yet, but it’s all ready to go!

3. Getting back to Site Admin - important!

Now that you’ve enabled your new theme you don’t have a log in link.  Don’t worry, all you have to do is go to www.example.com/wp-admin, where www.example.com is of course the address of your website.  If you have wordpress installed in a subdirectory you might need to go to something like www.example.com/wordpress/wp-admin.

4. Make your index into a real HTML page

I don’t want to make a habbit of just saying “paste this” without explaining it all in detail, but in this case I think it’s best not to worry about the details here for now, so I’ll give you a quick summary and then we can get on with the fun stuff!  The code below will indicate that your page is written in Strict XHTML, which will help it to display the same in most browsers.  The stylesheet is defined, which will link your index.php to style.css ready for when we start to add colours and layout.  <?php wp_head(); ?> and <?php wp_footer(); ?> are important tags that will allow WordPress (especially plugins) to insert extra code into your template.  There are a few other things that I haven’t mentioned, but in a future article I will come back and explain the header in more detail.  Finally you’ll see that line 18 is where you can begin to insert your own content.

So, paste the following code into index.php, upload it and view your site to check it still works.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head profile="http://gmpg.org/xfn/11">
    <title><?php wp_title('-', true, 'right'); bloginfo('name'); ?></title>
    <meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <meta http-equiv="content-style-type" content="text/css" />
    <meta name="keywords" content="" />
    <link rel="shortcut icon" href="<?php bloginfo('url'); ?>/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="all" />
    <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_head(); ?>
</head>

<body>
    This is my new theme.
    <?php wp_footer(); ?>
</body>
</html>

5. Laying out a post

You can use heading tags to mark out the main heading for your blog (heading level 1) and a post heading (heading level 2), as shown below.  From now on I will only show the <body></body> section, to make it easier to follow, but of course you still need everything you pasted in step 3.


<body>
    <h1>My Blog</h1>
        <h2>My blog post</h2>
        This is my new theme.

    <?php wp_footer(); ?>
</body>

After you’ve added the code above into your template, view your site to see how it looks.

6. Inserting posts with The Loop

Now it’s time to turn your single post into a list of real posts!  WordPress does this by running “The Loop”, which repeats a section of the template until all your posts have been listed.


<body>
    <h1>My Blog</h1>

    <?php while (have_posts()): the_post(); ?>
        <h2><?php the_title(); ?></h2>
        <?php the_content(); ?>
    <?php endwhile; ?>

    <?php wp_footer(); ?>
</body>

The Loop begins at while (have_posts()): and ends at endwhile;.  This checks the function have_posts() to see if there are any more posts waiting to be displayed, and if there are it does everything inside The Loop.  Then it goes back to the start of The Loop to see if there is another post.

the_post() gets all the details for the current post that is about to be displayed and loads that information into the template tags.  Template tags allow you to replace static text with text from the WordPress database, such as the title of the post and the content.  They are written in PHP rather than XHTML, so you must enclose them in <?php and ?> tags.

Once you’ve added The Loop shown above, along with <?php the_title(); ?> and <?php the_content(); ?> to your template, take a look at your website and you’ll see your most recent posts listed!

7. Next week

I hope that’s given you a good start.  Next week I’ll describe how you can use CSS to add a splash of colour and change your layout.  Issue 2 is out on Wednesday 29th October.  If you want a reminder you can subscribe by email, subscribe by RSS or follow @wpmag on Twitter.

Do you have any questions about this article? Leave a comment below! It would be great to hear how you are getting on with making your own theme.

Top image copyright Vince Huang used under the CC Attribution 2.0 Generic license.
Email this article
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5 out of 5)
Loading ... Loading ...

9 Comments »

  • Avaz Ibragimov said:

    Good start. Thanks!

    23 October 2008 at 3:02 am
  • Proxy Nations - The Best Updated Proxy Directory said:

    Yeah I wish I had this back when I started Wordpress :(. This is for the latest stable release correct?

    23 October 2008 at 9:39 pm
  • Steve Smith (author) said:

    I’m glad you think it’s useful :). I’m using the latest stable release (2.6.2) but everything in this article should work with any recent version of WP.

    23 October 2008 at 9:53 pm
  • Making a Wordpress Theme | Ultimate OS said:

    [...] am currently making a Wordpress theme for the blog using the tutorial located here Saturday, October 25th, 2008 Ultimate [...]

    26 October 2008 at 7:48 am
  • gry planszowe said:

    Ciekawy post, dodalem twoja strone do ulubionych, bede tu zagladal czesciej, pozdrawiam

    Google translation of the above text, it understood most of it:
    “Interesting post, I add this page to your favorites, I frequently zagladal here, I greet” - Steve

    2 November 2008 at 9:36 pm
  • Steve Smith (author) said:

    Gry, thank you! I’m glad you liked the article.

    2 November 2008 at 11:10 pm
  • Robert Boyd said:

    Awesome series thank you for making them available

    3 February 2009 at 10:44 pm
  • E.Karnika Yashwant said:

    great start..thanks

    27 February 2009 at 9:00 am
  • Migrated To WordPress MU 2.7 | Bui4Ever | Bui4Ever.com said:

    [...] the theme you are using is missing wp_head() and wp_footer() template tags (directions here and here). Also if you are running WPMU pre-2.7, I highly suggest removing the Admin Bar plugin before [...]

    12 December 2009 at 5:06 am

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

You can get your own avatar which will appear here and on other Gravater-enabled sites.