We always design our websites with your future success in mind, carefully planning and optimizing all content to ensure maximum visibility and long-term profitability

The Easiest WordPress Custom Theme Tutorial

wordpress custom theme tutorialThere is a lot to learn about WordPress theme development. By now, you’ve probably already read the countless articles swimming around the Internet that discuss in-depth how to build your own custom WP theme. For this reason, we’re going to share a few “secret” tips and tricks in our theme guide that will help you on your way when it comes to building a WordPress theme.

Easy WordPress Custom Theme Tutorial

Develop Locally

Developing locally is super important. If you’re still not developing locally, it’s time to make a start.

To get started, you need to set up MAMP.

Then you need to get the heck off FTP. Working mostly on WP sites is going to slow down your theme development, particularly if you’re off the “just do it live” mindset.

If you develop locally, you’ll be able to create a record of all your changes, and you’ll be able to easily roll back mistakes. Moreover, you’ll learn how to use text-editor like a pro.

Use Live Reload

This how to build a WordPress theme tutorial is going to be crammed with some mega tips, and one of them is that you should really use Live Reload.

We’ll let Drew Strojny, the brains behind WordPress’ Twenty Twelve default theme, explain the joys of LR:

“LiveReload is a great little application that works through a browser extension. LiveReload automatically reloads your page when a file has been changed in your project.

This is a huge productivity boon when you’re editing and tweaking a WordPress theme. All those small page refreshes add up to a big chunk of time saved at the end of the day. Not to mention, your fingers get a much needed break!”

Use Git, Too

Git certainly has a funny name, but it’s totally serious and totally great. In a nutshell, Git is a version-control system that is distributed globally. With Git, you can create a branch before making and testing changes with it without disturbing the master version. We love it.

Clean Your Source Code

What, you thought a WordPress custom theme tutorial wasn’t going to discuss code?

As you probably know, hideous source code is a theme developer’s worst nightmare. Finding things becomes impossible, while letting others work on it? Forget about it.

It’s super important to keep your template files and code clean and tidy. A messy room slows you down when you’re trying to find something, and so will messy code. Get organised!

How to get organised:

  • Indent nested lines and tabs
  • Always be consistent with your formatting and details
  • Use concise comments that are descriptive
  • Be careful of your line breaks!
  • The hierarchy: Take advantage of it
  • Keep things simple, silly!
  • And meta-organise while you’re at it

Tweak CSS In Your Browser

Urgh, we all know that editing CSS code in big themes is difficult. To make it easier, many web browsers in 2015 employ in-built developer tools panels. These will help you to find the CSS code you’re looking for really quickly.

Google’s Chrome Developer Tool is a particularly useful one.

Preprocessors Are Your Friend

What does a CSS preprocessor do? It turns preprocessed written code back into good old, readable CSS. Lovely!

This boosts your productivity and reduces your time stranded in development hell. You also benefit from greater functionality.

Drew of Theme Foundry has this to say:

“They help keep your style sheets DRY, extensible and easy to manage. Once you start using these languages, you’ll realize how repetitive and tedious it is to write plain old CSS.”

Always Use A Starter Theme

A starter theme has already covered the basics for you so that you’re ready to go. Think of a starter theme like a car: The vehicle has already been built and is fully functional; you just need to paint it!

Although a starter theme certainly isn’t going to do everything for you (it won’t cook you dinner, despite how amazing it is), it will give you the bare bones so that you have something to work with. And you may as well make the most of it!

It’s kinda like a novelist having the first chapter of their new book written for them. It’s a fantastic way to save time.


So, this concludes our how to build a custom wordpress theme design tutorial. No doubt about it; developing a WP theme takes time, but sometimes you need to know where the short cuts are. Hopefully, you’ve learned enough today so that you can optimise your time and refine your workflow. Good luck!

Like our build a WordPress theme tutorial? You’ll be delighted when we develop a site for you even more!

Comments are closed.