Creating WordPress Themes from scratch.

May 14th, 2008

wordpress screenshot

This first article is meant to give you a global picture about creating WordPress themes. Let’s start by answering a few common questions.

Do you need to know PHP to create or edit WordPress themes?

The short answer is no. It would help to know some PHP but many theme designers don’t, and they do just fine.

Do you need to understand MySQL to create or edit WordPress themes?

Again, no. Mysql is the database that drives WordPress and is a key component … nonetheless, it has no impact on creating themes. So don’t worry about it.

What do you need to know in order to be able to edit or create a WordPress theme?

I would say that you need to know three basic things:

  1. HTML/XHTML
  2. CSS
  3. The WordPress page hierarchy and behavior.

I think the first two are obvious, but the last needs some more explaining.

What is the WordPress page hierarchy and behavior?

In a nutshell: WordPress has a hierarchy of template pages that it follows whenever someone request a post.

… If WordPress can’t find a certain template, it will fall back and use the default (index.php) to display the information. If this doesn’t make sense, please check out the diagram below … it should help:

wordpress-page-hierarchy

For example:

Let’s say a visitor uses the built-in WordPress search capability. To display the search results, the WordPress engine will first try to load the ‘search.php’ template page. If it can’t find it, WordPress will use the ‘index.php’ instead.

So what the diagram shows you, is that the index.php page is kinda the ‘master template’ … and if any of the other templates can’t be found, the WordPress engine can always use index.php.

… I hope this makes a little sense.

Why do you have to understand this?

Now that we understand how the WordPress engine looks for page templates in a theme, we now know what page templates we need to build.

Does a theme have to include ALL the template pages?

If it isn’t already obvious, you can get away with creating a theme with only one template page: index.php.

In this ultra simple theme, all your pages would be exactly the same since the WordPress engine would be using the same template (index.php) for all the page types. That said, you will also need the default ‘styles.css’ file for all your CSS code.

So the bare minimum theme must only have two files:

  • index.php
  • styles.css

To customize all the possible pages that WordPress can display, you would need to include all these page templates:

* style.css
* index.php
* home.php
* single.php
* page.php
* archive.php
* category.php
* search.php
* 404.php
* comments.php
* comments-popup.php
* author.php
* date.php

Conclusion

The point of this article was to give you a global understanding of what it takes to create themes in WordPress.

If you guys want to learn more about creating themes for WordPress … let me know.

Thanks,

Stefan Mischook

www.killersites.com
www.killerphp.com

17 Responses to “Creating WordPress Themes from scratch.”

  1. Kevin Boss says:

    I’m definitely interested in reading more.

  2. Tony says:

    Please continue, I for one am after a clear and concise guide to creating a custom WordPress template.

  3. Zachary says:

    I am interested in reading more as well. This describes the process much better than the wordpress documentation. I would like to learn more about the process of editing the mark-up and stylesheets in the wordpress admin.

  4. Kim says:

    Yes please, as I’m just trying to build a website/blog, really interested in simple/uber functional design that is very easy on the eyes, and yet allows a blog situation for easy updates, wordpress seems to hold the key but the default design are a real turn off.

    There doesn’t seem to be much in the way of simple layout, basic colours, allowing decent photograph presentation and multiple languages.

  5. Sam Mooney says:

    Thank you! That’s the clearest explanation I’ve seen. Keep it coming!

  6. Garrett says:

    Yes! Advanced Videos for WordPress Design!

  7. pradeep says:

    hey I really want to go into the details more .Looking forward to your posts

  8. Amir Farhan says:

    Your explanation is uber clear. When can we expect a tutorial on creating cutom WordPress themes?

    Thanks.

  9. Kim,

    While you are waiting for my next tutorial on WordPress themes, you may want to check out the free WordPress themes on Webshapes.org.

    Specifically:

    http://www.webshapes.org/template/category/Wordpress

    Hope that helps,

    Stefan

  10. juice says:

    Definitely for sure want to learn more about wordpress…

  11. Hey Stefan,

    Lots of great information here! I’ve played around with a WordPress theme, and found it is much easier to customize than build from scratch. For example, I took a basic theme, located image files and sizes, and then just created my own graphics to replace them. I also played around with the CSS to change the colours, fonts, etc.

    I did this in Dreamweaver, but I suppose you could do it from within WordPress itself (a bit harder I would think…)

    I never would have thought of building from scratch, but after this post I’d certainly be more open to the idea…

    ~Graham

  12. @Graham,

    The approach of just updating another them works and I have used it more than once.

    That is one of the reasons why I added a WordPress theme category at Webshapes.org .. so people would have a place to find great themes to work with:

    http://www.webshapes.org/template/category/Wordpress

    That said, sometimes it just makes sense to build from scratch and besides, learning the earner workings of WordPress themes, will make it MUCH easier to edit themes in general.

    Stefam

  13. sc says:

    Hi, I really want to learn about creating / theme customizaion. I’m also learning your CSS.. thanks for the great tuts!

  14. Lauren says:

    Hey, you’re website is both clear and concise. I found it very helpful. Thank you very much!

  15. ray says:

    when can we expect the rest?

  16. Soon.

    Just really busy now.

    Stefan

  17. ray says:

    ok i understand
    thanks for replying back

Created By Stefan Mischook  |  Site Map  |  Top of page  go to top of page