Making WordPress themes I : static basics

We’ve spent some time on WordPress internals already.  We looked at how things work in general, and how we can create plugins and widgets.  It’s time to look at another powerful tool that we have at our disposal – WordPress themes.

The topic of WordPress themes is large, but not complex.  I think it is better to separate it into several posts, each covering smaller parts with specific goals and examples.  In this First Post ™ we’ll see how to use WordPress themes to create the basics of basic web sites, as static, small, and simple as possible.

A default installation of WordPress comes with two themes – default and classic.  You can find their directories under wp-content/themes/ .  These two nicely looking themes are there to give you a reference point.  They are priceless, when trying to understand how things are done.  But, unfortunately, many people end up simply copying those themes, modifying them somewhat and using the end result without ever trying to make sense of things.

We aren’t like that.  We love to see things inside out, aren’t we?  So, let’s look.

The best way to learn WordPress theming, I think, is by looking at the provided examples, while creating your own theme from scratch.  It doesn’t have to be an artistic masterpiece.  The point is to understand and learn how WordPress works, not to win a theme design contest.  Not yet, at least.

To start your own theme, you won’t need much.  Create a directory under wp-content/themes .  Now, under that directory, create two empty files – style.css and index.php .  That’s about it.  Your minimalistic theme is ready.  You will find it now in the administration interface under Presentation -> Themes , like any other theme out there.  You can even select it as a current theme.   Your WordPress pages will appear blank after that.  Because that’s exactly what you told WordPress to do – use no formatting to display nothing.

Similar to plugins, themes can be given some meta information (not to be confused with HTML META tags).  We can given our theme a name, author, URL, version, description, etc.  This is done in style.css  file with a comment at the top.  Here is an example:

One thing that you can add to themes, which you can’t do to plugins is a screenshot.  This comes really handy when you have a few themes in your administration and want to pick the right one. Names and numbers don’t always make sense, and even if they do, a visual representation is so much easier to pick.  Both default and classic themes have a screenshot.png file sized 300 x 225 pixels in their directories.   That’s probably what we should stick to as well, so that things are consistent in our administration interface.

With easy stuff out of the way, let’s see what happens next to our theme.  It’s pretty obvious that we can use style.css to put the CSS in.  index.php is a regular PHP file so we can have all our HTML printing and logic in there.  Let’s try with something simple.   Here is the first version of our theme:

WooHoo!  We just learned how to build 19990-ies classic and static web sites with the modern and flexible WordPress platform.  That’s quite an achievement!  Quick celebrations are in order…

Let’s now look back into the sources of default and classic themes for some yummy stuff.   Let’s find at least a small reason for why this theme should be done with WordPress and not as a standalone web site.  bloginfo() looks a good enough reason.  There are plenty of calls to bloginfo() in both default and classic themes.  Let’s try it on our example for the second version:

Now, when a visitor comes to our WordPress site, this is what he sees:

And the cool thing about is that both “Test blog” and “Just another WordPress weblog” strings are controlled through WordPress administration – in Options->General.  Once we update any of these options, our web site is automatically updated on its own.

But what about our style.css?  We created it alright, but how do with link it to our index.php? Again, bloginfo() to the rescue.  It has a whole bunch of useful parameters that we can use, instead of hardcoding URLs.   Here is the third version which links the style.css file to the index.php :

Try putting a couple of styles in the style.css file just to see that everything works.   If you need more CSS files or if you want to use images with your theme, there is a stylesheet_directory parameter to bloginfo() function, which will give you easy access to your files, again, without hardcoding anything into your theme.  Let’s see how it works.

Make a directory (say, images/) under your theme’s directory and put some picture in there (I’ll use the logo.jpg for the sake of the example).   Now you can use that image in your theme like this:

That’s about as basic as it gets.  Now you can brush up all that long forgotten knowledge of web mastering from the last century – the Golden Time, before web standards, frameworks, browser compatibility, and Web 2.0.