How to create a WordPress theme with Local by Flywheel

How to create a WordPress theme with Local by Flywheel

Will Morris's Layout avatar

There are thousands of WordPress themes you can choose from, ranging from multi-purpose to focused niche options. However, sometimes the only way to get your website looking exactly like you want it to is to create your own theme.

Creating a WordPress theme is perfectly doable, even if you don’t have an extensive background in web development. You just need to learn what files your theme requires and where to place them. Then you’ll make changes to the code until you get everything working the way you want.

In this article, I’m going to introduce you to WordPress theme development and the tools you need to get started. I’ll also show you how to create a basic WordPress theme in four steps. Let’s jump in!

An introduction to WordPress theme development

WordPress themes are templates that affect your site’s appearance and layout. For example, here’s a brand new WordPress website using the default Twenty Seventeen theme:

screenshot of twentyseventeen wordpress theme website in sandbox environment

Here’s that same website, but this time using the popular Stout theme:

screenshot of stout wordpress theme website in sandbox environment

With the right theme, you can get your WordPress website to look however you want without having to make changes to its code. However, if no theme matches your requirements, you can also create your own. The upside to this approach is that you have full control over the way your site looks and your theme’s functionality.

To create a theme of your own, you will need at least a basic web development background. You don’t need to be a professional, but if you don’t have a general understanding of HTML, PHP, and CSS, the process can be frustrating.

Likewise, creating a theme and getting things looking and working right can take time. As such, deciding whether to make your own theme comes down to whether your site would benefit from a custom theme. You should also consider how timely and cost-efficient creating your own theme would be compared to using an existing one.

Finally, it’s worth considering that a lot of people make a pretty good living from WordPress theme development. It’s a very competitive field of business, but who’s to say you couldn’t develop a winner and make a profit from your work?

Why you need a local WordPress setup for theme development

To set up and test your custom theme, you’re going to need a WordPress installation. The best way of doing this is by using a local environment, for the following reasons:

  • It’s more efficient. With a local WordPress setup, loading times are almost non-existent, and you won’t need to upload files to an external server.
  • It’s safer than using a live environment. Web development always involves a lot of trial and error, so it makes sense to do it in a secure, local environment.
  • You can create multiple test environments. Running multiple WordPress websites is much easier on a local setup.
  • You can use specialized software. There are a lot of applications you can use to speed up your local WordPress development, such as Local by Flywheel, a free app for Mac, Windows, and Linux machines.

With Local by Flywheel, you can set up as many WordPress websites as you want with only a few clicks. You also get access to a simple dashboard where you can manage all your test sites.

More importantly, you can configure each local website. That means you can use different versions of PHP, MySQL, and either nginx or Apache. You can also save some of your sites as “blueprints” to be re-used later.

Finally, if you’re a Flywheel user, you’ll be glad to know the software includes a “push” option. That means you can push any of your local websites directly to Flywheel to make them live. For example, you could use Local to create a new WordPress theme, test it on a staging copy of your website, and push it to a live site once you know it’s working as intended.

Ready to get started with Local by Flywheel? Download it for free!

How to create a WordPress theme with Local by Flywheel (in 4 steps)

In this tutorial, I’ll show you how to set up a local WordPress environment for theme development, teach you about all the files you need, and show you how to test it. Let’s get to work!

1. Use Local to set up a WordPress website

The first thing you’ll need to do is download Local by Flywheel for free. Once you’ve done so, install the application. Bear in mind that this can take a few minutes since Local needs to set up virtual machine software to work. Once Local is ready, you’ll see a prompt to create a new site:

screenshot of local by flywheel create a new site

Click on it, and you will be asked to choose a name for your site:

screenshot of local by flywheel name your site prompt

You may notice there’s also a tab labeled Advanced Options. If you click on it, you’ll be able to edit your local site’s domain, pick a root directory, and choose whether you want to use a blueprint.

For now, feel free to edit your site’s domain and directory. I’ll cover how to use blueprints later. When you’re ready, click on the Continue button in the bottom right corner.

On the next page, you’ll get the option to use Local’s default WordPress environment for your website. The Preferred option includes the latest versions of PHP and MySQL, and it uses a combination of nginx + Varnish for your server:

screenshot of local by flywheel server setup preferred option setup prompt

You can also choose the Custom option, which enables you to change all the settings I mentioned earlier:

screenshot of local by flywheel server setup custom environment prompt

Generally speaking, using the latest versions of PHP and MySQL is always a good call. However, if you’re using Local to set up a staging site, you might need to use older versions of said software to emulate your live server.

Also, keep in mind that you won’t be able to use Local’s Connect to Flywheel option if you choose a custom environment. In other words, you won’t be able to push your site live, although you should still be able to migrate it manually.

For this tutorial, let’s stick with the Preferred setup, so select that and click on Continue. You’ll now be able to choose an admin username, password, and email, and select whether to enable multisite:

screenshot of local by flywheel sign up new site multisite prompt

Keep in mind that the default email Local sets up for you will enable you to check out messages from within the application, so I recommend that you stick with it. Click on Continue again, and wait for Local to download and configure all the dependencies it needs for your site. When that’s done, your site’s info will show up to the right, and you can move on to step number two.

2. Set up a new theme directory

Now that your local WordPress website is ready, you can access it as you would a normal site using the URL you configured. You can also click on the Admin setting in the top right corner to jump right to its dashboard:

screenshot of local by flywheel setup options

For now, though, you need to access your local site’s root folder, where all the WordPress files reside. To find it, look right under your site’s title at the top of the Local screen. There should be a directory listed there, and an arrow you can click to its right.

Clicking that arrow will open the directory in your file explorer. Go inside, and then open the app/public folder to find your WordPress files:

screenshot of computer files wp-admin public folders

If you’ve ever accessed a WordPress site using an FTP client, this should look very familiar. Navigate to the wp-content/themes directory, where you should see three folders inside. These are the default themes WordPress installs on new sites:

screenshot of computer local files themes folder

Go ahead and create a new folder. Give it the name you want to use for your theme:

screenshot of computer local files test-themes folder

The folder is naturally empty. Next up, we’ll be adding some content.

3. Create your theme layout files

A basic WordPress theme only requires two files to work – index.php and style.css. Your index.php file corresponds to your WordPress main page, which shows all your latest blog posts and pulls its style from style.css. Let’s go ahead and create both files now:

screenshot of computer local files test-themes index folder

Both files contain no code at the moment, so let’s change that. First, open style.css and add a brief description for your theme:

/* Theme Name: Test Theme Author: John Doe Description: A basic WordPress theme Version: 0.0.1 Tags: bootstrap */

Repeat the same process with index.php, although the code for this one is a bit more complex:

<!DOCTYPE html>
<html>
<head>
<title><?php bloginfo('title'); ?></title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1><?php bloginfo('title'); ?></h1>
<h3><?php bloginfo('description'); ?></h3>
<?php while (have_posts()) {
the_post();
?>
<h5><?php the_date(); ?></h5>
<h2>
<a href="index.php?p=<?php the_ID(); ?>">
<?php the_title(); ?>
</a>
</h2>
<p><?php the_content(); ?></p>
<hr/>
<?php } ?>
</body>
</html>

That’s about as basic a layout as you can get. Within that code, we’re calling the style.css file we set up earlier, displaying your blog’s title, and using the WordPress ‘loop’. In case you don’t know, the loop is the name of the code a theme uses to display posts, and its actual structure can vary a lot from theme to theme.

Save the changes to both files now, and go to your WordPress dashboard. Navigate to the Appearance > Themes tab, and notice your brand-new theme waiting inside:

screenshot wordpress appearance themes dashboard

Activate it right away and check out your home page:

url screenshot activate themes preview

As far as homepages go, it won’t win any awards. However, the important thing is that you have a foundation in place, upon which you can build the rest of your theme. Your next step should be to use your style.css file to add some flair to your theme.

Once you make things a little prettier, you’ll want to work on a more complex layout. For example, you may want to add sidebars and footers to your theme, as well as a header.php file.

If you’re not sure what shape you want your theme to take, we recommend that you take a close look at some WordPress starter themes. They’re very simple from a visual standpoint, but they include all the features a modern website needs.

4. Test your WordPress theme

Before you can use your theme on a live site, you’ll want to test it thoroughly. A quick visual overview will reveal most bugs, but that’s usually not enough. You can also use plugins such as Theme Check, which reviews your theme to make sure it meets WordPress’ review standards.

theme check plugin screenshot

Theme review standards are only important if you want to publish your theme on WordPress.org. However, they’re still a good yardstick to measure your theme against.

When you’re ready to go live with your theme, you have two options. You can package its theme folder and upload it to your site via FTP, or you can use the Connect to Flywheel option to publish the entire site to Flywheel directly.

Before we wrap up, we also recommend that you take a minute to create a Blueprint of the test setup you created for your new theme. That way, you’ll be able to replicate it down the line in case you need it.

Conclusion

If you have a basic grasp of web development, there’s nothing stopping you from creating your own WordPress theme. While it can take some time, it can be well worth the effort. Plus, it gives you a much greater degree of control over how your site looks than using a regular theme does.

Let’s recap the four basic steps to creating a WordPress theme using Local by Flywheel:

  1. Use Local to set up a WordPress website.
  2. Set up a new theme directory.
  3. Create your theme layout files.
  4. Test your WordPress theme.

Do you have any questions about WordPress theme development in general? Let’s talk about them in the comments section below!


Free Ebook: The perfect WordPress development workflow

free ebook on navy background the perfect wordpress development workflow

Developing WordPress sites doesn’t have to be difficult. In fact, with the right tools and some simple software, your development workflow can be downright delightful! From developing locally to taking sites live, we’ve compiled our best tips and tricks for simplifying the process and maintaining sites for years to come. Ready to streamline your workflow and speed up development? Download it here!


This article was originally published 9-4-2018. It was last updated 8-22-2019.

Comments ( 3 )

  1. George

    September 20, 2018

    Adding the stylesheet in the ``-section, really?

    This is so NOT the way to show people the way to build a theme!

    • Will Morris

      September 27, 2018

      George, firstly, thanks for your comment and for bringing this up! Although it appears as though your comment has been sanitized of code, I think you're referring to our hard-coding of the stylesheet within the header. Of course, this isn't best practice at all, and you're right to mention it.

      In a nutshell, this example helped us to explain a different topic much more simply, so we decided to go with it. As you'll have noticed, we've also linked to the relevant guidelines on how to enqueue stylesheets the 'correct' way, and we encourage everyone coming across this comment to also read those before pressing on. :-)

  2. Rosh

    September 3, 2019

    Hey! Thanks for the post! Super helpful!

    I just had a question about the index.php file!
    I added that code in my index.php but it does not seem to work when I activate it. All I see when I click "view site" is a bunch of code (the exact same code that I added in the index.php file)

  3. Alice

    October 27, 2019

    Thanks for your detailed guide. WordPress has just updated their default theme to the Twenty Nineteen version. However, I also think that creating a new theme makes your site more eye-catching.

Join the discussion