Creating a Runway Theme

The first step in creating a new Runway theme is to go to Runway > Themes and click the New Theme button. You’ll be presented with a form; what you enter here gets saved to the WordPress themes directory as a new child theme.

Runway - New Child Theme

The Create New Theme form

If you have ever created a WordPress theme before you will be familiar with the information needed for the comment header in ‘style.css’, allowing WordPress to identify the theme. This form uses the information you enter to create the style sheet header, a new folder and required files such as ‘functions.php’ for your theme.

New Child Theme Form

Default settings

Title

This information is required and is the name of your theme as it will appear on the Appearance > Themes and Runway > Themes pages.

The text you enter here will also form the basis of the folder name that is created in ‘wp-content/themes/’ for your theme; whatever text you enter here will be transformed to all lowercase and any spaces will be translated into hyphens. So, for example, a theme title of “Crash Landing” would create a folder named “crash-landing”.

If you want the name of your theme’s folder to be more than just the name of the theme, this is accommodated in the Advanced section of this form at the foot of the page. Click on the Advanced title bar to open that section and you’ll see a Folder name option. So, for example, if you wanted to include your company name in front of the actual theme name – which is a great way of ensuring that your theme folder name is unique and won’t clash with any other theme – then you could enter into this box “luvverlythemes-crash-landing” and that’s what your theme folder will be named. This doesn’t change the title of the theme, in our example here the theme will still be named “Crash Landing”.

Menu icon

Your Runway theme must have an icon. This icon will appear in the WordPress dashboard menu to the left of the theme name. Ideally this icon needs to be a 16×16 pixel PNG image. See the Runway icon for an example. If you don’t feel up to creating an icon for your theme you can select a default WordPress icon from the drop-down menu, otherwise select “Custom icon” and use the file selector dialog to choose your icon image file. When you submit this form the icon image will be uploaded to your theme folder and given the filename ‘custom-icon.png’.

Theme URI

If there is a web page associated with your theme then you’ll want to enter its address here.

Description

Your theme should have a text description. Typically this will be something short and sweet, a general description of the theme works well.

Author name

Your theme must have an author name set so that everyone knows who to blame when it’s all gone pete tong.

Author URI

The author name (see above) will be linked to the web page address entered here.

Version

Your theme must have a version set. This can be a number, or text, or a combination of both.

e.g. V1, or 1.0.6b, or 4.1 Belly Jean.

Tags

Here you can add the keywords and template tags associated with your theme. Among other uses, these tags enable users to find your theme in the WordPress themes directory using the tag filter.

e.g. threaded-comments, translation-ready, flexible-width

Comments

Optional notes to leave in the style.css file. These comments are normally visible only to anyone who looks inside the ‘style.css’ file itself.

Screenshot

Your theme needs a sexy screenshot so it sticks out from other themes as if whispering “memememememe…” gently into a user’s shell-like ear. It’s not strictly mandatory, but then neither is brushing your teeth.

The screenshot size should be 600×450 pixels and will be displayed at 300×225 pixels, ensuring it looks great on HiDPI displays. When you submit this form the screenshot image will be uploaded to your theme folder and given the filename ‘screenshot.png’.

Advanced settings

Folder name

By default this will be set to the Title of the theme, transformed to all lowercase and any spaces translated into hyphens.

If you want the name of your theme’s folder to be more than just the name of the theme you can set the exact folder name here. So, for example, if you wanted to include your company name in front of the actual theme name then you could enter into this box “luvverlythemes-crash-landing” and that’s what your theme folder will be named. This doesn’t change the Title of the theme.

License / License URI

These are both optional fields and are provided should you wish to publish the name of the license under which your theme is distributed, and a link to a web page that contains the full text of the license. Learn more about licensing.

Developing your theme

Once your Runway theme has been created it is ready for you to add template files directly to the child theme folder, custom coding and anything else you can do with any other WordPress theme. Runway themes are designed to enable you to have all the same flexibility as a typical WordPress theme when developing, but to make development faster and easier with the Runway tools. The default Lift Off child theme contains a good selection of templates that you can use as starter templates and adapt them for your own use.

Saving your theme

As you develop a theme you will want to save it regularly and Runway provides you with a very easy way of backing up the current state of your project. Go to Runway > Themes, click on the Packages & Downloads button for the theme – this can be the currently active theme or any inactive theme – and then click the Rebuild Download Packages button.

Export Themes

Two packages will be created: a copy of the child theme folder and a stand-alone version of the theme. While you are developing a theme it is the copy of the child theme that you can use to re-install the theme and thus rollback to a previous state if you need to. The stand-alone version of a theme will be what you want to distribute when a theme is completed; this version can be used on its own without the Runway framework installed.

The Packages & Downloads page lists the most recently saved version of a theme at the top, and underneath is the History, a list of saved packages in date order. Get into the habit of regularly saving the current state of your theme, it takes only a few seconds.

Create a Note

Google+