Development

Writing Your First WordPress Theme

The aim of this tutorial is to get you building your first WordPress theme. We’ll start with quite a basic, generic website layout consisting of a header, main area (for posts & pages), footer and sidebar. The idea is that once you understand how this all comes together you can start to look at more exotic ideas.

I’m going to assume a moderate level of experience with WordPress and web development in general, but otherwise I’m going to try and keep it quite beginner friendly.

Putting the foundation in place

To put the initial building blocks in place for your theme all we have to do is create a folder and some basic files reflecting particular elements of your theme. So let’s first create the folder and then decide what these elements will be. We can then create files for each of them.

In your WordPress installation go to wp-content/themes and create a subfolder. We’ll call it “my_theme”, though of course you can more or less call it what you want, this is just a place holder for the purposes of this tutorial.

As mentioned previously we’re going to have a footer, main area, header & sidebar in this theme. So we need to create php files for each one:

  • index.php – the main file for the theme, controlling the main area and listing the locations of the other files.
  • header.php – containing the header’s code.
  • footer.php – containing the footer’s code.
  • sidebar.php – to control your sidebar.

You’ll also need to create style.css as this will control the styling of our new theme.

Starting to take shape

Now we can fill in these files with some generic code. You can largely copy and paste this in for now, changing only instances of the theme name if you used something different. Once this code is in place we have a boring theme, but a theme nonetheless. A basis from which to grow and adapt this plain layout into the stunning, award-winning theme I know you’re capable of!

Index.php

We can see a handy little php function on the first and last lines here; pulling in your header and footer respectively. So we’d best fill the code in for those next then! You can also see it handling your posts, with an exception case covered in case no posts match.

Header.php

You can see in the code above that this is where we’re bringing in the main stylesheet and setting a rather boring header of ‘Header’. We can make things a little more tricky later on by using a variable here to bring in post/page titles for the h1 tag.

Footer.php

Sidebar.php

Above we’re using inbuilt WordPress functions to grab the recent posts and archives. Have a look through the WordPress Codex’s Function Reference section for further ideas.

Style.css

The theme information has to be in a comment at the top of this file with no whitespace before it. This way admins using your theme will be able to see this information. Following this you can see we’ve set some colours for each section and set out where it will sit – e.g sidebar is set to the right and content to the left. When you’re ready you can go further in this file and start styling individual elements, such as h1 tags etc.

The Finishing Touches

Where can you go next? Well you can dive into that CSS and use more interesting colours for a start! We’ve just used one colour there, so perhaps start looking at an overall colour palette for your theme? Then as mentioned, start styling individual elements.

As we hinted at earlier there’s a whole host of inbuilt functions (and if you’re clever enough you can write your own), so start to look at what you can add to these standard blocks. Additionally, for the sake of simplicity we only used a few initial blocks (indeed you really only need style.css & index.php but you wouldn’t get far with those alone!), there’s a whole list more you can look at:

  • comments.php
  • front-page.php
  • home.php
  • single.php
  • single-.php
  • page.php
  • category.php
  • tag.php
  • taxonomy.php
  • author.php
  • date.php
  • archive.php
  • search.php
  • attachment.php
  • image.php
  • 404.php

I hope that’s helped you put together your first WordPress theme and understand a little more about how it all works.

Subscribe to our mailing list