Beginner’s Guide to Developing a WordPress Theme

Beginner’s Guide to Developing a WordPress Theme

There are plenty of WordPress themes out there, but they may not have the look or functionality for what you want. The good news is you can create your own WordPress theme with very little technical knowledge. And we’re here to show you how.

What you need to get started

You’ll need:

  • a WordPress site
  • a great hosting plan

We also recommend the easiest way to develop your theme is to use a starter theme. This will help you as a basis to creating a WordPress theme, and it’ll mean you don’t have to code everything yourself from scratch.

There are loads of great starter themes out there, with experts recommending Underscores, FoundationPress, UnderStrap, Bones and – one of our favourites – TemplateToaster. WpBeginner has a list of the best starter themes for 2019 so you can decide for yourself here.

As WPBeginners mention in their blog, Underscores is a favourite starter theme for developers, so we will be walking you through this theme today so you can get an understanding of how to create a WordPress theme for yourself.

6 steps to creating a WordPress theme

 

1. Decide a layout for your new theme

If you’ve had a look for the downloadable pre-created templates and know something is missing from them, you’ll have a good idea on what you’re looking for when you design your own. But it’s always worth thinking about it first when you’re setting your theme layout out.

Do research into WordPress layouts you like and remember that basic themes consist of a header, main area, footer and sidebar.

 

2. Set up a local environment

This is a safe way to build a WordPress theme without slowing or causing problems to your live site.

A local environment is a server you install on your computer so you can manage your WordPress locally. There are plenty of ways to do this, but DesktopServer is recommended as one of the better options as it has a free option and it is compatible with Mac and Windows.

Complete the registration process and then download it and go through the installer process.

It has an easy, straightforward installation and set-up walkthrough that will only take a few minutes. When this is ready, it should feel like you’re using your live WordPress site.

 

3. Download your theme

Go to the Underscores website to get your starter theme installed. You’ll just need to name it to get started. Or if you fancy making it a little more advance click the ‘Advanced Options’ and provide your author name and a theme description.

What’s the _sassify option? This will add ‘syntactically awesome stylesheets’ – so you can use variables, nesting, operations etc. If you’re not feeling too confident using this preprocessing language for CSS, don’t tick the optional box.

Once you’re happy and filled out the form, you can hit the ‘generate’ button. It’ll download a .zip file with your starter theme inside. Remember the local site you installed at step one? You’ll want to unzip your .zip file onto it now.

 

4. Understand how to build a WordPress theme and the mechanisms behind it

The template files are the building blocks of your WordPress theme, so it’s good to get to grips with them.

WordPress decides through the template hierarchy which template files to use on each of the pages. This is the order in which WordPress will look for the matching template files every time a page on your site is loaded. So bear it in mind when you’re setting out your site. Now may be a good time to play around and see how it loads and how these files work together.

All template files that display post content will use the loop – the code used to display content. Underscores will already integrate it into your theme so you don’t need anything more than an awareness of this as Underscores has taken out the hard work.

 

5. Configure and editing your WordPress themes

Since you’ve had a good think about the functionality, structure and look of your WordPress custom theme, now is the time to put it into practice.

Let’s start with the practicalities first and add some functionality with ‘hooks’. Hooks are code snippets you insert into your template files so you can run PHP actions across your site and display information. Common hooks can make your style and scripts load at the same time as your site, add Google Analytics or display comment data.

The good news if you’re using the Underscores theme is these are already included.

Now you can decide the appearance of your site with cascading style sheets (CSS). Underscores already has the style.css file included, but it will only have the basic default styling. It’s waiting for you to make it your own.

You can play around with the CSS and save the files to see what edits it has made to your template. If you’re new to CSS or need some more help, this reference should be able to help you out with all the mark-up commands.

Once you’ve amended your style in the CSS click save and you’re almost finished.

 

6. Upload your theme to your live site

Test your theme to make sure it’s ready for its public viewing. Using the Theme Unit Test data you can make sure your theme will withstands most circumstances. It’ll help to test your theme and see how to copes with unpredictable data.

Once you’ve taken it for a test, you’ll need to export it. Find where the website is locally installed and open the folder. You’ll then be able to find your theme if you go to /wp-content/themes/.

Right click it and zip it. You can use a compression tool to make a .zip file. You then need to upload and install it on your WordPress site.

Sit back, and wait for the compliments to roll in, you’ve done it!

Feeling adventurous? Make a theme from scratch

If you have mastered the starter template and want more of a challenge, TemplateToaster has a walkthrough of manually creating your own template here. We recommend that you have a basic knowledge of CSS and PHP mark-up. This is the two language WordPress mark-up is written in.

If you want to speak to us about WordPress theme development in more detail, contact our team.

Author Gyles Seward

Gyles is our Managing Director and knowledgeable in all things WordPress.

More posts by Gyles Seward