How to build your own WordPress theme

Yes, there are thousands of WordPress themes available, but what if you can’t find exactly what you want for your own website or for your clients? DIY is always an option and building a custom WordPress theme offers some advantages that ready-made templates don’t always provide. 

Building your own WordPress theme means you can include exactly the features your website needs—and only those features. That means you won’t have to sort through a pre-built template’s dozens of features to find the sections you need to work on when it’s update time.  

It also means you can create a site that loads faster because it’s not weighed down by features that you’re not using. That’s an important consideration for businesses that want to keep customers from getting impatient and leaving. It can also help you improve your site’s SEO, because Google prioritizes sites with faster page load speeds.  

What skills and knowledge do you need to build WordPress themes? 

It depends, because building a theme for a basic blog site is different from building an eCommerce theme. However, no matter what kind of WordPress theme you want to make, it helps to know some PHP because you pretty much can’t build without it.  

It’s also a good idea to be familiar with WordPress before you begin, so that you have a sense of which features are standard across WordPress sites.  

You’ll also need patience to look things up in the theme development section of the WordPress Codex as you work, to answer all the little questions that come up as you’re building. Fortunately, finding what you need can be as easy as Googling “show [component] WordPress codex”–for example, “show featured image WordPress codex” or “show date WordPress codex.” 

With some PHP know-how and WordPress knowledge, it’s possible to create simple custom themes even if you don’t know how to code. That’s because there are resources you can use to find code snippets you need to add functionality and features to your theme.  

What you may need help with is the process, which is the goal of this post. For example, if you’re brand-new to WordPress developing, you may not know what enqueueing a script is.  

Pro tip: Enqueueing is a way to add stylesheets and JavaScript efficiently. That’s because these WordPress functions will cross-check against the core and plugin stylesheets and JavaScript to make sure that you don’t run into any conflicts. Enqueueing also helps to keep your theme code organized, so it’s easier for you or other developers to update. And these functions allow you to use included WordPress included libraries for faster theme-building. 

How long does it take to build a WordPress theme? 

The exact amount of time you’ll need varies, depending on the complexity of your theme idea and your level of skill. Forty to sixty hours is a good ballpark estimate.  

For beginners, much of that time will be spent looking up what you need to know. More experienced developers will probably use that much time to create more complex themes and get all the commands right.  

Ready to build a WordPress theme? 

Doing things in the right order will save you a lot of time, especially when you’re new at it. Here’s the process I use. 

1. Plan and wireframe your theme. 

With any web project, you should figure out what your theme is going to look like and what it’s going to do before you start coding. The main page layouts I wireframe are the home page, post page and a general archive page (for tags or category browsing and search result pages). That should cover you for a basic blog or informational site. 

You’ll need a few tools to plan and revise your wireframe: 

  • Sketch pad. Before you start designing digitally, sketch out what you want on paper. I use a dot-grid notebook to figure out what I want on my homepage, for example, and where that content will go. Once I grid those blocks out and have the concept, then it’s time to make a digital wireframe. 
  • Digital wireframing app. Adobe Illustrator is a good choice if you have a design background because it lets you lay things out easily, but there are other wireframing tools out there. You can even use the drawing app on your tablet or phone or Insert > Shapes in Word. If you can use an app to trace boxes, you can use it to make a simple wireframe.  

2. Create your theme file. 

You don’t have to start from scratch. One of my favorite tools is Underscores (aka _s), which is built by Automattic, the people that built WordPress. It’s essentially a minimalist boilerplate template that covers the WordPress website basics without styling or extras.  

underscores template you can use to create wordpress themes
Image: Underscores 

Start by entering the name of your theme-to-be on the Underscores homepage and clicking “Generate.” The site uses the latest build from the Underscores GitHub repo to create a ZIP file for you.  

3. Set up the standard WordPress functions and features you want to use. 

After you download and unzip your Underscores theme file, you can open functions.php in Microsoft Visual Studio so you can edit code for the theme.  

use microsoft visual studio to edit wordpress theme code
Image: GitHub 

First, check to see which functions are already turned on. For example, search forms, comments and galleries are already activated in Underscores, so you don’t need to add anything to get those features. One menu and one sidebar are also already registered through the functions file in your theme, which you can copy, paste, and edit to fit your needs. 

4. Pull all the dependencies you want for your theme. 

If you want to add sidebars, scripts, stylesheets or other functionality, this is where to do it. You can find the enqueue functions here that are required for any libraries you’ll need—like Bootstrap, jQuery, Font Awesome—plus any JavaScript- or CSS-based dependency files.  

If your wireframe calls for multiple sidebars, like a social sidebar on your homepage and a “recent posts” sidebar on your blog page, you’ll register those different sidebars in the functions file. You’re not done collecting your code resources yet. Google’s jQuery library gives you the link to hosted JavaScript libraries that you can load on your site. They’re already on a CDN (content delivery network) which helps your site to load faster.  

Pro tip: Sometimes you have to download them directly and add them to the folder in _s. For example, if you’re working with a site that requires PCI compliance (a security must if your site processes card payments), all third-party dependencies must be loaded directly from your web server. You can add these into the /inc folder. 

5. Build your front-end functionality. 

What do you want to appear on your site? This step is where you build it.  

It’s helpful to start with the content that will appear on every page. For example, I set up the header and footer first. I also usually add a home.php, duplicated from the index.php, so I can build a custom home page where I usually start I create the header and footer code. 

Everything between them, like menus and sidebars, may vary depending on the page template. At this point, you can build your main index template (index.php), then the single post template (single.php), then the archives and any additional page templates you need. You can use the WordPress theme template hierarchy as a guide.  

This stage is when you can expect to send some time referencing the codex, to answer questions like “How do I call the page title?” and “How do I call this list of categories and get it to display?” WordPress has very good documentation, but you can expect to toggle back and forth a lot as you work.  

6. Style your theme template. 

Once your code and front-end are all together, it’s style time! It’s most efficient to start your stylesheet with the mobile version of your WordPress theme, because that’s the foundational, minimal amount of styling.  

Your next stylesheet step is a small tablet, then a large tablet, then a desktop, progressively adding on more styling as you go.  

These are the media queries you’ll place at the end of your mobile stylesheet to target these progressively larger devices (“…” is where the style code goes): 

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... } 

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... } 

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... } 

Working in this order helps keep your code clean and ensures that your theme looks good on all kinds of devices.  

Pro tip: If you use Bootstrap, you can set some of the positioning while you’re programming out your layout and functionality (step 5). That’s because Bootstrap has classes built into it that you can add to tags for faster formatting. You can also use Bootstrap to block out page elements, so you have to do less styling and spend less time manually positioning all the elements in the template 

7. Test your theme template. 

You can create test environments by setting up subdomains on your website’s hosting, or you can get VPS hosting  for a separate, private sandbox. There’s also an application called VVV you can download from GitHub and use to build your test site locally on your computer.  

Check your test site on as many different devices and browsers as you can, to make sure your WordPress theme works right everywhere. When you’re satisfied that it looks and works the way you want it to, it’s time to take that last big step. 

8. Publish your WordPress theme! 

When you’re done testing through VVV, zip up the theme folder like you would any other folder on your computer (right-click “compress” or “archive”) to create a version of the theme you can upload through the dashboard. If you have FTP access to your server, you can also use an FTP uploader. Then go to the Themes section of your WordPress dashboard, run your live preview, and when you’re ready, save and activate your new theme.  

Ready to start making and testing your own WordPress themes? Get the sandbox you need with our VPS hosting plans.  

Samantha Soper is a freelance UX strategist, front-end developer, and creative consultant, working with businesses and non-profits of all sizes to help manage their online presence and brand experience. She also runs a mural art and illustration business. Related links at: samsoper.art/links/