Creating WordPress Themes: Themes 101

Now that we’ve covered the basics, we’ll start diving in.

Now, as I’ve mentioned before, in my previous tutorial on this subject, I got a LOT of comments about the pagination I used. I guess I never really thought about the “printability” of these tutorials – I was surprised to discover that I’m one of the few people who like to read off the screen LOL So I’m going to provide “jump links” for the sections, in case you just want to jump to certain areas – because these are going to be long pages. (But it makes for good printin’!)

Just so you know, the method I typically use when I’m creating a new theme is pretty much the same as when I’m creating a new site design (sans WordPress – although to be honest, I haven’t done a sans-WordPress site in a couple of years now). Basically I start with rough sketches on paper; then I move to Photoshop to create my mockups; and finally I code out the pages to valid CSS and XHTML (transitional is my current favorite, although I occasionally touch on others as needed). I’ve found this is actually the easiest way to begin with WordPress themes as well, because then you don’t have to try and dig around to find what’s screwing everything up when something goes wrong with the layout. Converting a site to WordPress is pretty much simply plugging the right tags in the correct location, so if your site layout is perfect to start with, then you’ll know any issues that arise are due to your “WordPressing,” and thus tracking down issues is a lot easier.

That’s why this is also an excellent method for those of you who are already using an existing site design that you like, and you either want to use WordPress as a Content Management System, or you simply just want to “add a blog” but have it match the rest of your site. Once you have your site coded out and working perfectly, it’s a snap to convert it to WordPress (in fact, half the work’s done for you).



Break Apart Your Files | Connect With WordPress | The Header | The Footer | The Sidebar | The Index File | The Functions File

filesystemSo we’re going to pick up at this point: where you already have your site design finished, and your site coded out to valid and static (X)HTML. The first thing you want to do is create a folder for your theme – and don’t name it “default” either, or you’ll be smacking yourself when it’s time to upgrade – and I highly recommend not using spaces in the name. Inside this folder, you just want to create the 5 files I mentioned earlier: index.php, footer.php. header.php, sidebar.php and style.css. These can just be blank files for now – give them those names and save them in your theme folder.

DO NOT use Microsoft Word to edit your files in. What you want to use is a plain text editor. My personal favorites are PS Pad for PC, or Smultron for Mac. Both are free.

Let’s Name It!
First, we begin by naming your theme. (No, you didn’t already do that just by creating a folder with the name you want.) So first, we want to open up our shiny new style.css file, and put in the necessary information that will make WordPress recognize that there’s something there for it to use. So the very first thing you want, before anything else, is the following:

/*
Theme Name: My Awesome Theme
Theme URI: http://mysite.com/wp-content/themes/my-awesome-theme
Description: New awesome theme of my own design, because I rock.
Version: 1.0
Author: Shelly Cole
Author URI: http://brassblogs.com
*/

Now, if you really want it to be cool, you can take a screenshot of your static files, and resizing the image down to 300 pixels wide by 225 pixels tall, and saving that file into your theme folder as “screenshot.png”.

When you upload the folder as-is to your “themes” directory (“http://yoursite.com/wp-content/themes”), and then navigate to your “Appearance > Themes” ares in the back-end, you will see your theme listed in the available options. As you can see in the screenshot here, the gray box is where your screenshot would be (but since I don’t actually have a design for this tutorial, it’s blank), and you can see that the content we placed in the stylesheet section above appears in the description. (In the “current theme” you can see the activated theme for this site – and you can also see the other information – my name, version, description, and my name actually links to the “Author URI”.)

theme After you’ve put in this small piece of code, you can then add in the rest of your stylesheet. If you haven’t started styling, be sure to do so – but this is where you put the rest of your style information – just be sure that snippet stays at the very top.



The Beginning | Connect With WordPress | The Header | The Footer | The Sidebar | The Index File | The Functions File

Break Apart Your Files
Now we start getting into the meat of it all. What you’re going to want to do is break apart your static files. Now, for purposes of example, we’re going to assume that the site looks the same on all pages (remember, we’re starting with the basics here) so all pages on the site will be broken in the same spots.

Now, what I mean by “broken” is that PHP has these wonderful things called “includes,” and yeah, it means what you think it means. You “include” one file into another. It’s a really cool thing (and if you’re familiar with .shtml includes, it’s the same type of deal) – you know how you have a static site, but on every single page, the same menu repeats itself over and over again? And when you need to make a change – like remove a button, or add something to the header, you have to go through every single file and make the change repeatedly? It’s annoying, especially in really big sites. You get around that by using includes: create a file with your information in it that you want to appear on every single page of your site, and include it into the other files on the system. When you need to change something it it, you take a moment and change it in that one file, and the change is reflected site-wide.

simple-layoutSo keeping that in mind, you have to be sure you “break” your site in the proper areas. The header usually contains the header information, the sidebar has (of course) the sidebar, the footer has the closing divs and closing tags. The “index.php” file is what’s probably the most dynamic part, and contains all the actual content for the page you’re on. (In the screenshot there, you can see the different sections – sometimes it’s easier to “get” if you see a graphical representation of it.) Usually, the header and footer are mostly static, and the sidebar is static (or has a slight bit of dynamicity to it – is that even a word? LOL), and the main content is what changes from page to page, and sometimes from day to day.

static-headerSo you want to break apart these blocks in the most useful manner possible. So open up your static files, and find the header block section – usually it contains the Doctype all the way through (and sometimes a little bit past) the opening body tag. You want to highlight all of that, copy it, and paste it into your header.php file. (Yes, if you recognize that, it’s the source of the Default “Kubrick” theme by Michael Heilmann.) You want to do the same thing for your sidebar section, footer section, and index section – saving to the appropriate files, of course. If you upload the files at this point and view them through your browser… well it’ll be broken, to be honest :) Most likely your calls are incorrect, so it won’t be pulling in the proper stylesheet, etc. But if you did have the correct paths put in, then you would basically see an exact copy of your static site.



The Beginning | Break Apart Your Files | The Header | The Footer | The Sidebar | The Index File | The Functions File

Connecting with WordPress
Now that we have the site broken up into separate parts, it’s time to actually connect it with WordPress so that the site can be managed and displayed properly. Now, as I’ve said before, almost everything you need to know is located in the Default theme files – that theme is most certainly a great starting point to become familiar with your tags and how they are used.

First, I’m going to provide you with a great reference link to help you out with what we’re about to do: Template Tags, which is basically a list of all the template tags WordPress uses, and their definitions. That page aside, a couple of the really important “need to know” things are the following:

  • <?php bloginfo(); ?> This is a very useful tidbit to know. This tag, on its own, basically provides information that’s set in your “Settings” area – the Blog and WordPress URLs. Depending on how you use it, it becomes extremely useful, and is much easier than trying to hardcode links into your theme files. Think of it as a shortcut!
  • <?php include(TEMPLATEPATH . '/filename.php'); ?> This one is also useful. There are standard filenames that WordPress looks for by default, but say you wanted to add some other special file that WordPress doesn’t look for? You need to include that file in your theme so it knows to pull that in – and the “TEMPLATEPATH” constant is very useful in this case, since it provides the correct URL to the very theme you are using – you simply take it from there.
  • get_Yeah, on its own, it doesn’t do much. But in the case that you would like to NOT echo out something (for instance, “bloginfo('home');” will actually echo out the URL to your home page), and use it as a variable for further manipulation, generally placing “get_” in front of the call will return the value, rather than echoing it out, so you can use it later on. There are exceptions to this rule, of course, but for the most part, it’s good to know.

Now, that being said, let’s “WordPress” this puppy.



The Beginning | Break Apart Your Files | Connect With WordPress | The Footer | The Sidebar | The Index File | The Functions File

The header.php file
There are certain values you want to replace in the header file. As mentioned before, you can look in the default theme to see what these are, but of course, I’m going to explain them here. The default header I use quite often is the following:

<!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" <?php language_attributes(); ?>>

<head>
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; <?php bloginfo('charset'); ?>" />
<meta name="copyright" content="Copyright <?php echo date('Y'); ?> Brass Blogs Web Design" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

<?php wp_head(); ?>
</head>

<body>

Pretty simple. Some of the lines aren’t required. for example:

  • the Copyright stuff: I know when I see a site I really like, if the designer’s link isn’t in the footer, then I look in the header section to see who did the design. Sometimes it’s there, sometimes it’s not – but I put it in as a “nicety.”
  • the “imagetoolbar” stuff: That’s something I started putting in years ago. When you’re in IE, if your mouse hovers over an image, this ugly UGLY box pops up over every single image. It was so annoying. So this one is total personal preference. (I don’t even know if IE7 or 8 does this anymore, but 6 did.)
  • the “MSSmartTags” stuff: again, this is old stuff, although I think IE still does it. It was a REALLY bad idea IE had put out, I think in version 5? Where the browser would instantly link keywords in *your* site to outside sources. This tag prevents that from happening. As above, I don’t know if they still do or not, and it’s just a personal preference.

You’ll note, though, that the rest of the stuff uses bloginfo();, with different stuff in the parentheses. Those just pull in the proper items – like your stylesheets, title, language, etc. – that’s in your “Settings” area for the WordPress installation.

The <php wp_head(); ?> call is necessary. Many plugins will not work without it. If you find that a plugin isn’t working, chances are this little line has been omitted from your theme files. Plop it back in, and the magic begins :)

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?> Is aline for the new comment replies that WordPress provides. This enacts the script, but *only* if you’re on a single post page (where the comment form lies). if you want to enable comment replies, threading and pagination, you want this left there.

Now, keep in mind, if you are already using a static site design, and you’re just “WordPressing” it, instead of replacing your header information with the above, you just want to edit your existing header to incorporate these changes. For example, once you change the call to the stylesheet, and place your existing styles into the “style.css” file, when you open the site in the browser you will no longer see a broken site. (Well, as long as you’ve also moved your images over into the theme folder as well!) It should miraculously look exactly like the site you want, with just a bit of tweaking left to do.



The Beginning | Break Apart Your Files | Connect With WordPress | The Header | The Sidebar | The Index File | The Functions File

The footer.php file
Next we’ll check out the footer. Yes, I’m going out of order, but I find that when you get the little stuff knocked out of the way, the bigger stuff is easier to chew on.

The footer is simple:

<div id="footer">
Powered by <a href="http://wordpress.org/">WordPress</a> &nbsp; | &nbsp;
<a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a> &nbsp; | &nbsp;
<a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>
<!--/footer->
</div>

<?php wp_footer(); ?>

</body>
</html>

IE6 (if you still care) has a lovely Duplicate Characters Bug. It happens when you combine floats and comments with some other stuff, and results in characters being duplicated in weird spots. The way around this is by placing your comments BEFORE the closing div tag associated with it, instead of after.
Again, not everything here is necessary. You’ll notice that at the end of my footer div, before the closing tag, I have <!--/footer->. I do this for a simple reason: when I’m troubleshooting, I often look at my source code. It really helps when you know what closing tag is matched up with an opening tag. You’ll see this method a lot in my tutorials – you’d be surprised at how often it helps when I’m sifting through a lot of code, trying to find something I’ve missed!

You can, of course, put anything you want in the footer section – but again, you’ll want to leave the reference to <?php wp_footer(); ?> for plugins. Also, if you don’t want the comments/entries RSS feeds in the footer, you might want to keep these URL’s in mind – they *will* work in the sidebar (or the header) just as well as they do in the footer.

And again, as with the header.php file, if you’re already using an existing coded design, just edit the existing footer section, rather than replacing it with the above.



The Beginning | Break Apart Your Files | Connect With WordPress | The Header | The Footer | The Index File | The Functions File

The sidebar.php file
The sidebar is fun :) You can do a simple static sidebar (“static”, meaning you can put in exactly what you want to show on all pages, end of story) by doing the following:

<div id="sidebar">
// anything you want - just put it here
<?php wp_meta(); ?>
<!--/sidebar-->
</div>

Most people like the search form to appear here, so you can stick in the common <?php get_search_form(); ?>. Some other common tags used in the sidebar are:

There’s a ton of other tags you can use, but you get the idea. (And the <?php wp_meta(); ?> is also used to plugins – so you might be seeing a pattern here ;) )

One thing I do differently than the default theme is nesting everything in UL tags. I know the default theme does it, and a lot of people do it, but personally, I hate it. So you’ll notice that my sidebar code is not wrapped in one humungoid <ul> wrapper. If you wanna do it, feel free to do so. It’s just a personal preference.

But most people want Widgetized Sidebars. What’s a Widget? Basically, it’s little sections on the site that can be easily managed in the back-end of WordPress. You can easily add, remove and rearrange the order they appear in on your site. (I’ve even previously described in another post as to how you can use widgets pretty much anywhere.) But using widgets requires that you also use your functions.php file – something I’ll get to in a moment. But for now, we’ll go ahead and prepare the site for eventual widget-love.

So what you do is take the above code and edit it a bit so it looks like so:

<div id="sidebar">
<?php get_search_form(); ?>

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

<h3>Archives</h3>
<ul>
<?php wp_get_archives('title_li=&type=monthly'); ?>
</ul>

<h3>Categories</h3>
<ul>
<?php wp_list_categories('title_li=;'); ?>
</ul>

<?php endif; ?>

<?php wp_meta(); ?>
<!--/sidebar-->
</div>

You’ll notice the addition of an “if” statement. Basically it breaks down in plain English like this:

  • if ( !function_exists(‘dynamic_sidebar’) – If there is no function (in the functions.php file) called “dynamic_sidebar”
  • || – OR
  • !dynamic_sidebar() – the function exists, but the widgets are not being used
  • ) : ?> – then display the following

And then whatever’s within the “if” and “endif” statements will be show IF WIDGETS AREN’T BEING USED. That means the moment you use the widgets, anything you have between the “if” and “endif” statements will be replaced by whatever you’ve put in the widgets area.

Now, you’ll notice the <?php get_search_form(); ?> and <?php wp_meta(); ?> are outside the “if” and “endif” sections. Those are static. That means whether you use widgets or not, the search form will always appear at the top, while the meta will be at the end of the sidebar. What’s in the middle is whatever you put in the widgets section, or whatever is “default” if widgets aren’t used.

You can even make more than one widgetized section if you like by simply naming them. But that’s starting to get into more complex issues, and it’s probably better if I save that for later on in the series. (Gotta leave something for me to write about!)



The Beginning | Break Apart Your Files | Connect With WordPress | The Header | The Footer | The Sidebar | The Functions File

The index.php file
Now we’re getting into the meat of things. The index.php file is actually what pulls it all together. Basically, when the browser hits a folder or directory, it looks for “index.html” or “index.php” file to serve up what you’ll see (it depends on your host as to what extension is looked for first. In fact, I believe IIS servers actually look for “default.htm” before anything). That’s why the index.php file is reserved to pull the puzzle pieces together.

So first we start out with the includes – very simple:

<?php get_header(); ?>
// your content will go here
<?php get_sidebar(); ?>
<?pgp get_footer(); ?>

I think it’s apparent what each section is for – but basically if you left your index.php file just like the above, and opened up your blog in the browser, you’d have the site you wanted with no content. Header, sidebar and footer would be there, but the content area would be blank.

As with the sidebar, there’s so many ways you could arrange the index.php file it’s not even funny. I’ll list some of the key points, and then show you my general arrangement, but be aware that you can rearrange or remove (or even add stuff) to your heart’s content.

Now, we covered the Loop before, so I’m not going to explain it again (read that link if you didn’t catch it – it is important to know). But some key tags you might want to add within it:

  • <?php post_class(); ?> – this is a class added in case you want to do something like alternate background colors for your posts.
  • <?php the_ID(); ?> – pulls the post ID from the database and uses it so you can style this one specific post, if you so desire.
  • <?php the_permalink() ?> – provides the actual URL to the individual post
  • <?php the_title_attribute(); ?> and <?php the_title(); ?> – actually, both are pretty much the same thing – the title of the post – save the attribute “cleans” the title of the post of HTML and converts some characters so it can be used as an attribute.
  • <?php the_time() ?> – the date the post was made. You may use PHP’s date() parameters to control how you want the date displayed.
  • <?php the_author() ?> – The author of the post (this code, as-is, provides the display name for the author that’s in the user settings area)
  • <?php the_content(); ?> – The meat – the actual content of the post. What you are reading right now.
  • <?php the_tags(); ?> – provides a list of linked words that this post is tagged with. Click the word, and a tag archive (of all posts tagged with the same word) will show up.
  • <?php the_category(); ?> – provides a list of categories this post is listed under. As with the_tags(), click the word and you’ll be taken to that category archive.
  • <?php edit_post_link(); ?> – you will actually only see this link if you’re logged in. It’s for administrative purposes – for quick editing.
  • <?php comments_popup_link(); ?> – link to comments for the post.

Now, again, you can arrange these any way you like. But my standard index.php file looks like so:

<?php get_header(); ?>

<div id="content">

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

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> </small>

<div class="entry">

<?php the_content('Read the rest of this entry »'); ?>

<!--/entry-->
</div>

<p class="postmetadata">
<?php the_tags('Tags: ', ', ', '<br />'); ?>
Posted in <?php the_category(', ') ?> |
<?php edit_post_link('Edit', '', ' | '); ?>
<?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?>
</p>

<!--/post-->
</div>

<?php endwhile; ?>

<div class="navigation">
<div class="left"><?php next_posts_link('« Older') ?></div>
<div class="right"><?php previous_posts_link('Newer »') ?></div>
</div>

<?php else: ?>

<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php get_search_form(); ?>

<?php endif; ?>

<!--/content-->
</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

You’ll note the additions of some extra information between parentheses (but if you click on the links above that define the tags, you’ll see what they do), as well as the addition of the extra navigation. That section actually provides links to older posts when you’re within an archive – like date-based or category archives – it just paginates them for you (based on how many posts you have set to show in your “Settings>Reading>Blog pages show at most” section). The “Not Found” section is what displays if it can’t find whatever page you were trying to get to.

Just about anything is reconfigurable up there. Arrange, remove, add to your heart’s content to get the layout you desire.



The Beginning | Break Apart Your Files | Connect With WordPress | The Header | The Footer | The Sidebar | The Index File

The functions.php file
Now, I realize that the functions.php is NOT one of the 5 files I mentioned before. But you create it in much the same way as the other files (by opening a blank page and saving it in your theme folder as “functions.php”), and it’s necessary if you want to have your site use cool additions – like the widgetized sidebar. Since I touched on widgets here, I may as well tell you how to finish that up so your sidebar will, indeed, be widgetized.

It’s pretty simple. Simply add this to the functions.php file:
<?php
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
}
?>

And now when you go into your back-end and direct yourself to “Appearance>Widgets” there will be a dropdown box for your sidebar. Use it as you will.

The functions.php file is an awesome file, and you can do a lot with it – but again, that’s for other articles in the series – we’ll be using it quite often :)

Hopefully you enjoyed this first part of my series!

Up next: Styling a Different Front Page

Comments

  • John X says:

    Thanks very much – I do a lot with WordPress but have never really dug into the fundamentals – thanks for your work here – excellent!

  • [...] Creating WordPress Themes: Themes 101 | Brass Blogs Web Design. [...]

  • Have your say: