How To Make a WordPress Theme Using Starkers

23 July 2009 ~ 11 Comments

Today I’m going to show you how to make a WordPress theme using Starkers, my favorite naked theme. There are 2 ways on how to make a WordPress theme, one is to build everything from scratch and the other is to edit an existing theme. Obviously we’re going to take on the latter approach. Don’t forget that you can also use child themes in making your WordPress themes.

Let’s get started. Make sure you download Starkers and save it to your themes folder (/wp-content/themes/).

Note: This tutorial is strictly for beginners only

Review Mark-Up

Starkers has a really stripped down markup. You won’t find any divs if you’ll check out the source.

XHTML Markup of Starkers Theme

Add Divisions

I tried to make a layout off of the default Starker’s markup but it’s really quite challenging. So what we’re going to do is add some divisions on the existing markup so it would like this:

Final XHTML Markup of Edited Starkers Theme

Header

Let’s add a container div that will hold our content. Open up header.php and add in the opening container div right after the body tag and before the header div. We also need to add a header div for our logo and tagline.

Header code

Footer

Now we need to close our container div. To do that we’re going to open footer.php and add our closing container div. We also need a div for our footer section.

Footer Code

Index

Now open up index.php and apply the following changes:

Index code

Please remember that you also need to make the following changes in some of the template files like search.php, page.php, archive.php, etc.

Posts

After you’re all done with the changes, it’s time to open up single.php. The changes are also similar to the previous step but this time we’re going to add a function to output our sidebar. Starkers is based from Kubrick that’s why you’re going to notice that single.php has no function for getting the sidebar.

Index code

Now all that’s left is to put in some CSS. You can download my stylesheet or you can just create your own.

Conclusion

This is only a simple 2-column blog layout. I know you can do better than this and I hope that you found some value in this tutorial. Thanks for reading.

11 Responses to “How To Make a WordPress Theme Using Starkers”

  1. Jeff Jenkings 18 August 2009 at 8:02 pm Permalink

    i wish i knew php

    Reply
  2. Samuel 2 September 2009 at 9:12 am Permalink

    Thanks so much for the sidebar-in-a-single-page info! Just used up an hour searching online – had no idea it was so simple.

    Reply
  3. proposal tugas akhir 26 September 2009 at 9:46 pm Permalink

    That’s good explanation, thanks for the lesson very much.

    Nia

    Reply
  4. apexfreelancedesigner 30 November 2009 at 11:00 pm Permalink

    Thanks for this detailed info in how to make a wordpress theme. It gives me an idea to on how to start cuztomizing a wordpress theme.

    Reply
  5. Bill Kernoczy 21 January 2010 at 3:51 am Permalink

    Thanks for the info.
    I’m trying to put together a club site and am a noob, albeit an old one.
    The starkers theme works well, but how do you style up all the little bits of blog eg the date, read more and so on. It’s just a bit stark for me at this stage.
    any help appreciated.
    Cheers
    Bill

    Reply
    • Raymond Selda 22 January 2010 at 11:09 am Permalink

      Hi Bill,

      Basically you write a CSS rule to target any element on a web page and control their appearance. Hope this helps

      Reply
  6. Wasim 7 January 2011 at 8:07 am Permalink

    I’ve tried to understand php but I can’t find ANYONE on the internet that can teach it properly step by step. Do you know of anyone ?

    Reply
    • Josh Slate 23 April 2011 at 9:55 am Permalink

      Learning PHP step by step online will be hard. I recommend checking out w3schools or Googling php tutorials though. That’s how I learned. You could buy a “For Dummies” book if the sites aren’t doing it for you. It’s going to take some effort, so don’t expect to just learn it over night.

      Reply
  7. jerry lee 26 April 2011 at 6:44 am Permalink

    Hey, I am a guitarist, and a web developer. I don’t suppose you are anywhere near fort worth? I need someone to jam with.
    Thanks for the cool tut…

    Reply
  8. William Tooke 5 May 2011 at 2:42 pm Permalink

    can i add facebook Like box?

    Reply
  9. Quinn 22 September 2011 at 11:29 pm Permalink

    Thanks! This is a great explanation! It’s always nice to see developers using this method verses purchasing and modifying a template.

    Reply

Leave a Reply