Writing a WordPress Theme

June 4th, 2012

When I started working with WordPress, I tried ‘hacking’ the default WordPress theme Twenty Ten.
Looking through the 2400 lines of CSS in the style.css file gave me an indication that I was going to be in for a long night!  It still took many hours to adjust the page using the Firefox add-on ‘Firebug’ to work out which element needed to change.

Hacking someone else’s theme is never a good idea because you don’t learn anything and you are still left with a css file of someone else’s styles.  Creating a WordPress theme from scratch is easy, so have a go…

Create your own WordPress theme

I wrote the planetphp WordPress theme from scratch and I would say it was actually quite easy.  My style.css file only has 120 lines, compared with the 2400 in the default Twenty Ten theme. I’ve added a WordPress theme download link at the bottom of the page.

To create a basic WordPress theme, you need the following files:

  • header.php – The header is the top section of the page
  • index.php – The index file specifies where the other files will be included
  • sidebar.php – The sidebar, in this case, is the right hand side section of the page
  • footer.php – The footer is the bottom section of the page
  • style.css – This style.css file is where your css styles live

Here is an image to show which elements make up a WordPress Page:

Wordpress Elements

Header.php file

The header.php file has some basic HTML markup, and metatags.
The line <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”>, tells WordPress to dynamically load the css file from the correct theme folder.

<html>
<head>
<title>New WordPress Theme</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>

<body>
  <div id="wrapper">
    <div id="header">
      <h1>HEADER</h1>
  </div>

index.php file

The index.php file has a couple functions to include the header, sidebar and footer.
There are some standard WordPress functions to check for posts and insert content
An empty “div” tag is added to separate the Main Area and the Sidebar from the footer.

<?php get_header(); ?>

<div id="main">

    <div id="content">

		<h1>Main Section</h1>
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <h1><?php the_title(); ?></h1>
        <h4>Posted date: <?php the_time('F jS, Y') ?></h4>
        <p><?php the_content(__('(more...)')); ?></p>

        <?php endwhile; else: ?>
        <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
        <?php endif; ?>

  </div><!-- Close content DIV -->

  <?php get_sidebar(); ?>

</div><!-- Close main DIV -->

<div id="delimiter"></div>

<?php get_footer(); ?>

sidebar.php file

The sidebar.php file creates the categories and posts archives.


<div id="sidebar">

    <h2 class="sidebartitle"><?php _e('Categories'); ?></h2>
      <ul class="list-cat">
        <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
      </ul>
 
    <h2 class="sidebartitle"><?php _e('Archives'); ?></h2>
      <ul class="list-archives">
        <?php wp_get_archives('type=monthly'); ?>
      </ul>
	  
</div><!-- Close sidebar DIV -->

footer.php file

The footer.php file allows you to add text, links or copyright information


<div id="footer">
    <h1>FOOTER</h1>
</div>

</div>

</body>
</html>

styles.css file


body {
    text-align: center;
}

#wrapper {
    display: block;
    border: 1px #a2a2a2 solid;
    width:90%;
    margin:0px auto; 
}

#header {
    border: 2px #a2a2a2 solid;
}

#content {
    width: 75%;
    border: 2px #a2a2a2 solid;
    float: left;
}

#sidebar {
    width: 23%;
    border: 2px #a2a2a2 solid;
    float: right;
}

#delimiter {
    clear: both;
}

#footer {
    border: 2px #a2a2a2 solid;
}

.title {
    font-size: 11pt;
    font-family: verdana;
    font-weight: bold;
}

Click here to download Blank WordPress Theme