August 14, 2013 at 9:33 am #281
Here’s the documentation I’ve prepared for creating a Runway theme.
I’m posting it here because the official Runway documentation site is still in development.
It’s not carved in stone so feel free to point out anything that I have missed, or anything that is incorrect or not clear.
Also, if anyone has any ideas about what else should be in this particular documentation, please let me know.
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 that you need to fill in; what you enter here will be translated into the necessary WordPress header for the child theme.
The Create New Theme form
If you have ever created a WordPress theme before you will be familiar with the information that you need to provide for the comment header lines in ‘style.css’ so that WordPress is able to identify the theme. This form uses the information you enter to create those comment header lines, and also a new folder for your theme.
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”.
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, with or without transparency. See the Runway icon for an example. If you don’t feel up to creating an icon for your theme then you can select one of the inbuilt WordPress icons from the drop-down menu, otherwise select “Custom icon” and use the file selector dialog to select 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’.
If there is a web page associated with your theme then you’ll want to enter its address here.
Your theme must have a text description. Typically this will be something short and sweet, and it can include HTML so that you could for example set particular text in bold and/or italics, and you could also link some anchor text to a URL.
Your theme must have an author name set so that everyone knows who to blame when it all goes pete tong.
The author name (see above) will be linked to the web page address entered here.
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.
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. It can be useful, though not strictly allowed, to add your company name as a tag.
e.g. threaded-comments, translation-ready, responsive, flexible-width, luvverlythemes
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.
Your theme needs a sexy screenshot so that it will stick out from all the other themes the end user is trying out and whisper “memememememe…” gently into their shell-like. It’s not strictly mandatory, but then neither is brushing your teeth.
Theme screenshot size is usually 600×450 pixels; the WordPress theme manager displays them at 300×225 pixels so you could use that size instead if you want to make the file size a little smaller. When you submit this form the screenshot image will be uploaded to your theme folder and given the filename ‘screenshot.png’.
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. You can learn more about these options here.
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 you have the added inbuilt tools of the Runway framework. 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 you want to save – this can be the currently active theme or any inactive theme – and then click the Rebuild Download Packages button.
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 need for the Runway framework to be also 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. We recommend that you get into the habit of regularly saving the current state of your theme, it takes only a few seconds.
Next I plan to write something about setting up theme options. I’ll need to have good think about this and (I hope) some direction from the guvnor.
Watch this space, as they say.August 16, 2013 at 11:50 pm #291
Nice addition. Keep these coming!
You must be logged in to reply to this topic.