In this tutorial I’m going to show you a really fast way of creating WordPress themes.
If you’re developing WordPress themes with any regularity you’ll know that using a framework to start each time is a huge advantage. Doing so will give you a clean slate for every theme, whilst preventing you having to start from scratch and repeat the foundational work for each one.
Runway is just such a framework. It’s 100% free, open source, and packed with really nice features. Let’s dig in!
How to Use Runway
Head over to the Runway website, hit the prominent download button, and you’ll be given a zip file to unpack.
To use the framework you’ll need a working WordPress installation (preferably either local or on a development server). For this tutorial I’ll assume you have an understanding of the steps required to setup WordPress, but try this free course if you need help:
Take the runway-framework folder that you’ve just unpacked, and place it in your WordPress install under wp-content > themes. Runway is now essentially a theme which you need to activate by going to Admin > Appearance > Themes.
Upon activation Runway will ask if you want to use the default child theme (you do) so hit Activate in the prompt. Visiting the front end will show you what the theme looks like at this stage:
The child theme is called “Liftoff” and, if you check, you’ll see its folder has been added to the WordPress theme folder.
Within the Liftoff folder you’ll find all the familiar files needed for a working WordPress theme, from index.php. functions.php, and of course style.css.
How to Proceed
So from here you have essentially two options. You either use this Liftoff child theme and customize it to your liking, or you create a brand new child theme based on the Runway framework.
Runway’s Option Builder
One of the great things about Runway is its extra functionality, specifically the way it helps you create theme options. In the WordPress Admin, under Liftoff > Design Settings you’ll find the following page:
This is an options page which will be available to your theme’s users, allowing theme to edit the website title, the logo image, and other editable bits and pieces found within the template files. You can also see Liftoff > Other Content, another options page which you may want to include.
In order to edit these pages, and the options shown on each one, go to Runway > Options Builder. In the screenshot below you’ll see the structure used to build what you see above:
- A General tab
- with a Logo container
- with four different options fields (title, tagline, image, URL)
Building these structures is a questions of dragging and dropping, and you can choose whether or not to include the containers in the theme customizers (which is a huge bonus).
Each of the fields gives you the PHP snippet which you’ll need to display the content of that field in the theme files. The logo title, for example, might be saved to a variable in the theme where you use:
$logotitle = get_options_data('design-settings', 'logo-title');
You may want to work on more than one theme with the Runway framework in your current WordPress install. To do so, go to Runway > Themes, click on New Theme, and fill out the theme details.
A new child theme will be added to your theme folder, containing the minimum required files (functions.php, style.css, screenshot.png, and a data subfolder). You’ll then be left to create the extra files you need, perhaps using those in the example child theme as a starting point.
Again, options pages for this new theme can be created and built by going to Runway > Options Builder.
Runway comes with a number of add-ons, which you may or may not elect to use with your theme. For example, there are theme styles to start you off, a plugin installer to ensure your users install the correct plugins to begin with. There’s a layout manager, a content types add-on which will help you build custom post type structures, and admin menu editors too. Plenty to choose from! Some add-ons are free, others require you to purchase a license.
Exporting Your Theme
Runway is essentially a build tool. Once you’ve finished building your theme, you’ll want to be able to package it up and distribute it. Here you have two options;
- export a standalone theme
- export a child theme
In order for your users to be able to use a child theme, they’ll need the Runway framework installed in the first place. You may or may not want them to rely on this dependency.
The standalone export, however, will allow your users to simply install and use your package without even thinking about the framework.
Hit the download button on your theme thumbnail, and you’ll be taken to the download page where you can choose which type of package you’d like.
Runway is a really great framework to build themes on, especially for beginners, since it offers a solid base and it’s super easy to use. Have you used Runway, or a similar framework? Let us know your thoughts!