Responsive WordPress Theme – Caliber

A theme with simple controls and limitless potential. Work fast and build an amazing website!   Find out more »

UpThemes – Beautiful WordPress Themes

Create a site your church, gallery, newspaper, blog, recipes, band and more!   See the themes »

Tutorials

Developing the Vellum theme with the Runway Framework

You may have spotted after unzipping the file you downloaded from ThemeForest that inside the ‘WordPress’ folder along with the theme zip file and demo content xml file there is also a ‘Runway Framework’ folder.

What’s that all about?

Runway is our open source framework for WordPress that we use to build our themes. You can learn all about the Runway framework and, if you like, get involved in its design and development, on the dedicated Runway website… http://runwaywp.com/

This article will show you how to install the Runway framework with the Vellum theme as a child of the framework (which is the parent theme).

First, it’s important to know that if you choose to develop your Vellum theme in this way then the two zip files in the ‘Runway Framework’ folder must be used together, i.e. you can’t install the Runway child theme version of Vellum on its own, you must install it along with the Runway framework. Using this combination and then working in the Runway framework enables advanced development options such as the editing of admin options and much, much more. If you are a developer building a theme for a client and you are wanting to customise the admin interface or theme options we think you are going to love what you can do when you develop a WordPress theme in this way. Please head on over to the Runway website for more details. There’s also a Runway support forum where you can ask questions and get help.

Tip: If you want to know how to make a normal Vellum child theme for use with WordPress (as opposed to for use with Runway) we have a tutorial for that as well…
http://para.llel.us/support/tutorials/making-a-vellum-child-theme/

Okay, enough evangelising, let’s get the thing installed. It’s a simple three-step procedure: install the framework, install the child theme, activate the child theme.

1. Installing the Runway framework

The Runway framework is installed in the same way that you install any WordPress theme. This can be done in two ways: you can upload the Runway zip file using the WordPress theme upload facility, or you can upload the Runway folders and files using an FTP app.

Installing via WordPress

  1. Login to your WordPress admin.
  2. Go to Appearance > Themes and click on the Add New button.
  3. At the top of the page click on the Upload link.
  4. Click on the file input box – it might say Browse… or Choose File – then locate and select the ‘runway-framework.zip’ file.
  5. Click the Install Now button.
    • WordPress will now upload, unpack and install the Runway framework. When finished you will be told that the theme installed successfully.

Installing via FTP

  1. Extract the files from the Runway zip file. This will create a folder on your computer named ‘runway-framework’.
  2. Login to your FTP server and navigate to your WordPress ‘wp-content/themes’ folder.
  3. Upload the ‘runway-framework’ folder from your computer to the ‘wp-content/themes’ folder on your server.
    • The Runway framework is installed once the folder has finished uploading.

2. Installing the Vellum child theme

The Vellum child theme in the ‘Runway Framework’ folder is a version of the theme saved from Runway in such a way that it can be further developed using the framework. This Vellum child theme is installed in the same way that any other WordPress theme is installed, either via the WordPress theme upload facility or via FTP upload.

Installing via WordPress

  1. Login to your WordPress admin.
  2. Go to Appearance > Themes and click on the Add New button.
  3. At the top of the page click on the Upload link.
  4. Click on the file input box – it might say Browse… or Choose File – then locate and select the Vellum child theme zip file.
    • The zip file will be named ‘runway-child-theme-vellum-v#.zip’ where ‘v#’ is the version number of the child theme.
  5. Click the Install Now button.
    • WordPress will now upload, unpack and install the child theme. When finished you will be told that the theme installed successfully.

Installing via FTP

  1. Extract the files from the the Vellum child theme zip file. This will create a folder on your computer named ‘parallelus-vellum’.
  2. Login to your FTP server and navigate to your WordPress ‘wp-content/themes’ folder.
  3. Upload the ‘parallelus-vellum’ folder from your computer to the ‘wp-content/themes’ folder on your server.
    • The Vellum child theme is installed once the folder has finished uploading.

3. Activating the Vellum child theme

Once the Vellum child theme is installed you can activate it from Appearance > Themes by clicking the Activate button for the Vellum theme.

Note: There is no need to activate the Runway framework itself, activating the Vellum child theme does that automatically.

And that’s it! We wish you good luck with your website, and if you have any questions about developing with the Runway framework please head on over to the Runway support forum where we will be glad to meet you and help you learn how to use the Runway framework to build some awesome websites.  



Resources