WordPress Bits

Hacking WordPress. Keeping the bits together.

Making WordPress themes I : static basics

Posted by Leonid Mamchenkov on August 17, 2007

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:

theme meta information

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:

sample theme version 1

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:

sample theme version 2

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

sample theme version 2 (output)

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 :

sample theme version 3

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:

sample theme version 4

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.

45 Responses to “Making WordPress themes I : static basics”

  1. Sadish said

    Please use valid xhtml code for these examples. {html tags in lowercase].
    That will teach the learners, the right way to code.

  2. Sadish,

    if only I knew the right way to code myself. :)

    Thanks for the idea. I’ll try to follow it.

  3. Michael said

    XHTML is great for people like love code but is also very anti-design in a lot of the changes you’re expected to make from HTML to XHTML. I know that’s a controversial statement but XHTML puts of traditional graphic designers. HTML5 has a much more inclusive spec and allows designers to keep their code and simple and EASY TO UNDERSTAND as is currently possible.

  4. Bob said

    Vim is power. It’s better to post in images? Yeah! agreed with Sadish.

  5. That’s how easy it is to start an HTML vs. XHTML holy war. :)

  6. Bob,

    I haven’t found a better way for now, rather than posting screenshots. Maybe later.

  7. Skeddy said

    Brilliant guide for those of us starting out with themes.

  8. Skeddy,

    I’m glad to see you liked it. Stay tuned for at least two more posts on the subject. ;)

  9. Sadish said

    I did not intend to create any debate over xhtml or html over here.

    Converting the piece of code you wrote into xhtml is so easy. put all the code in YELLOW color to lowercase and change <BR> to <br/>
    Thats all you need to do.

  10. I find the best way to create a WordPress theme is to make a mockup locally and enter a bunch of dummy text and whatnot and then proceed to enter all the WordPress coding.

  11. […] 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 […] […]

  12. […] 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 […] […]

  13. Pacq said

    Leonid’s approach seems good to me.
    Moving from Blogger to WordPress, I’ve found several difficulties.
    It was hard to build in my mind a “general vision” of the new architecture.
    After a number of unsuccessful attempts (like: try to simplify or customize Kubrick), I wrote for myself a “barebone” theme: a main index template, a little stylesheet and… nothing else. It worked (at least, for me).

  14. Kristin said

    Actually it doesn’t matter if you prefer html or xhtml because WordPress generates xhtml, which means the themes have to be xhtml as well.

  15. Jared,

    indeed, this is the easiest thing to do, but when you know what you are doing. I think that the best way to learn WordPress theming is by making one from scratch. But that’s just me. :)

  16. Kristin,

    the examples used in this post didn’t have ANY markup generated by WordPress. So it really doesn’t make a difference if they are in HTML or XHTML or whatever. They could have been in plain text for all I care. ;)

  17. Pacq,

    Good job! I like the way your blog looks – clean and simple.

  18. Kristin said

    Leonid; I was just trying to explain what your examples should use xhtml as Sadish wanted you to.

    Using your html 4 example in a live theme will create a real html mess on live WordPress site. All output in template codes, plugins etc. for wordpress is in xhtml, so all themes have to written in xhtml as well.

  19. Kristin,

    OK, I’ll try to use XHTML for the examples of upcoming posts. Those examples are more likely to actually be used in a real theme, and they will have WordPress generated markup, which is XHTML again.

  20. rightwingprof said

    If people worried one tenth as much about actually creating good designs (that means variable-width with very little wasted margin space and NO SCROLL BARS AT 800×600) as they do trivialities such as HTML v. XHTML, perhaps more than 1% of wordpress themes wouldn’t be crap.

  21. rightwingprof,

    most people, from where I stand, care about things that work for them… you always welcome to share your WordPress themes, of course. :)

  22. […] Making WordPress themes I : static basics […]

  23. Alex said

    I’m afraid I have to agree with Sadish. In fact, I’m quite shocked that this has made it through to my WordPress dashboard, taking into account how standards-oriented WP is.

    It doesn’t have to be XHTML, but it would be much better if you used a doctype and used the right tags (so no “br” when “p” is needed). Also, your code should really validate. Right now, you’re giving a bad example.

  24. Alex,

    gladly WordPress is more about things that “work for you” than draconian censoring. ;)

  25. morpheu5 said

    I just can’t figure out why the heck WP can’t have a real template engine like Smarty instead of putting together XHTML and PHP code which is basically BAD in a bunch of ways.

    I’ve worked with designers – and I’m one too – that kept complaining about things not working and what they missed was almost always the correct PHP syntax or such. Especially that mad if..else way of doing things. This is not wrong as they’re *designers*, not *programmers* and they’re not requested at all to know PHP.

    Smarty has a really simple syntax to learn from a designer’s point of view and is still powerful enough to do advanced things.

  26. morpheu5,

    this question is of course better raised somewhere else…

    In my personal opinion, template engines suck. Either they are not flexible enough, or they are as complex as the programming language itself, thus defeating the point. I am yet to see a designer who can easily handle the template system and can’t do the same with PHP/Perl/whatever.

    Maybe that’s just me though…

  27. morpheu5 said

    > this question is of course better raised somewhere else…

    Of course.

    So I may suggest you to take a peek at Smarty. I think it’s powerful and flexible yet easy to use. It can do things that PHP can do but you can of course live without them. I mean, you can have if..then..else and foreach constructs but who cares if you don’t need them?

    Its syntax is indeed much easier. To insert the content of a variable you just type {$variable} and not or .

    In an ideal world, designers shouldn’t care about programming languages at all and this would prevent many errors and headaches.

    Anyway, randomly ranting.

  28. morpheu5 said

    (ooops, the php code have been removed -.-)

  29. morpheu5,

    yes, I am familiar with Smarty. However it has the same issues as any other template system, because… all template systems have these by design.

    Inserting variable value is a very simplistic example. And in this case it doesn’t matter which kind of brackets to use, I think. But with more complex scenarios, some logic should be applied to what to show and how it should look. And it’s that display logic which either cannot be implemented in a template system, or can, but doesn’t look any simpler than in a programming language itself.

  30. morpheu5 said

    The point is that giving the freedom to use bare PHP code in the template can lead to many common mistakes and even to dangerous situations if who is writing the code is unexperienced. With the language implemented by Smarty – just to say one – you have to learn just two or three rules and you have all the flexibility that’s commonly needed.

    I have to say that in my templates I’ve nearly never needed to implement logics more complicated than some if..else or foreach. The point is: no PHP to n00bs (or such :)).

  31. […] Posts Tip #3 : Under ConstructionMaking WordPress themes I : static basicsTip #2 : Scheduling tasks with WordPressAdding options to WordPress pluginsAutomating WordPress […]

  32. […] Making WordPress themes I : static basics […]

  33. Alex said

    > gladly WordPress is more about things that “work for you” than draconian censoring. ;)

    Just because something works for you, it does not mean it will work for everyone else. There is a wide range of browsers and platforms, and web standards exist for a reason.

  34. […] Making WordPress themes I : static basics Early basics on how to theme WordPress for your own site. There’s some pointers here that I’m paying very close attention to right now. (tags: design tutorial wordpress howto) […]

  35. Alex,

    1. I never claimed that it will work everyone else.
    2. Even following all the standards in the world won’t make it work for everyone else.

    It seems to be that discussion is doing into an Abstract Off-topic Land. Please enjoy the next post in series which has more XHTML bits in it. :)

  36. […] WordPress theming at WPDesigner.comMaking WordPress themes II : The LoopTip #3 : Under ConstructionMaking WordPress themes I : static basicsNavigating WordPress source […]

  37. […] comenta sobre el laborioso trabajo que están haciendo la gente de WordPress Bits y destaca sus “Making WordPress Themes“, una guía bastante completa sobre como hacer un theme para WordPress, También han publicado la […]

  38. […] If you need more resources I’d recommend checking out WPBits Series on Making WordPress Themes […]

  39. […] 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 […] […]

  40. Aizat said

    I have search all the web to start my own wordpress theme and finally find the best tutorial here.
    Thank u

  41. Hi,
    You did a great job writing down here a lot of good information.
    I’m not an expert in php and your advices really help.
    Now, I want to change my default wp theme (on my new blog) in just one way: I want every post from index and achieve pages to has (read more) by default. Let’s say, they will can read only the first paragraph, or first 50 characters or something like this… not entire post in index.
    I really don’t like when the people can read with just one click on my home page, all (10) latest posts.
    Can you help me with this?
    I really appreciate!

  42. […] sviluppo dei Temi/Template per WordPress. Il primo, pubblicato qualche giorno fa, analizza gli aspetti di base della costruzione della parte statica dei temi. Il secondo, pubblicato oggi, analizza invece la […]

  43. Wondalee said

    Merry Christmas

    I have search all the web to start my own wordpress theme and finally find the best tutorial here.I got the wonderful theme .Anyway don’t forget to visit my WP gallery

    Thank you so much

  44. ugur said

    thanks for the tut. finally i will learn this wp theme things from scratch.

  45. Sani Moyo said

    Found this really helpful, was being lazy and had found the ’empty canvas theme’ through google, but learning from the basics sure is the way and makes it easy to edit the free wp theme downloads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: