The new kid on the block, Vellum.

Our latest and greatest theme, Vellum, has arrived! Vellum – Responsive WordPress Theme

Runway Framework on Github!

Check out our open source Runway Framework on Github!

Tutorials

Making a Child Theme for Razor

By popular request there follows the definitive guide to setting up a child theme to use with the Razor theme.

1. Give the child a name

Inside the wp-content/themes/ folder create a new folder named ruddock.

2. Give the child some style

Create a file inside the ruddock folder named style.css with the following content:

/*  
Theme Name: Ruddock
Description: Child of the Razor theme
Author: Liza Marklund
Template: parallelus-razor
Tags: buddypress, bbpress
*/
@import url("../parallelus-razor/style.css");

Then create 11 more css files:

style-default.css
style-skin-1.css
style-skin-2.css
style-skin-3.css
style-skin-4.css
style-skin-5.css
style-skin-6.css
style-skin-7.css
style-skin-8.css
style-skin-9.css
style-skin-10.css

The content of the style-default.css is just the one line, as follows:

@import url("../parallelus-razor/style-default.css");

The content of the style-skin-1.css file is four lines, as follows:

/*
	Skin Name: 1. Default
*/
@import url("../parallelus-razor/style-skin-1.css");

The content of the other 10 skin files is similar to the style-skin-1.css file above, except that you change according to the skin number the Skin Name on line 2 and the file name of the imported file on line 4.

/*
	Skin Name: 2. City
*/
@import url("../parallelus-razor/style-skin-2.css");
/*
	Skin Name: 3. Breeze
*/
@import url("../parallelus-razor/style-skin-3.css");
/*
	Skin Name: 4. Sun Burst
*/
@import url("../parallelus-razor/style-skin-4.css");
/*
	Skin Name: 5. Ninja
*/
@import url("../parallelus-razor/style-skin-5.css");
/*
	Skin Name: 6. Ice
*/
@import url("../parallelus-razor/style-skin-6.css");
/*
	Skin Name: 7. Dark Side
*/
@import url("../parallelus-razor/style-skin-7.css");
/*
	Skin Name: 8. Smoothness (Yellow Accents}
*/
@import url("../parallelus-razor/style-skin-8.css");
/*
	Skin Name: 9. Smoothness 2 (Red Accents)
*/
@import url("../parallelus-razor/style-skin-9.css");
/*
	Skin Name: 10. Big Brother
*/
@import url("../parallelus-razor/style-skin-10.css");

3. Give the child some assets

Copy the entire assets folder from the parallelus-razor folder into the ruddock folder.

4. The child needs some settings

With the Razor parent theme activated, in your admin dashboard go to Appearance > Layouts, scroll down to the foot of the page and click on the Export Settings button.

A page will appear with a box on it that contains an encoded string of characters that is your current Layout settings. Copy this text to your clipboard, load up a text editor – such as Notepad (Win) or TextEdit (Mac) – and paste the contents of your clipboard into a new text document. Then save the text document giving it a filename such as parallelus-razor-layouts.txt for example.

Now do the same thing for Appearance > Sidebars and Appearance > Slide Shows, naming the text files appropriately.

You should end up with three text files, for example:

parallelus-razor-layouts.txt
parallelus-razor-sidebars.txt
parallelus-razor-slideshows.txt

So now load the first of those three files – parallelus-razor-layouts.txt – into your text editor, select all the text and copy it to your clipboard. In your WordPress admin dashboard activate the Ruddock child theme, go to Appearance > Layouts, scroll to the foot of the page and click the Import Settings button. On the page that appears, click in the big input box and paste the contents of your clipboard into the box. Then click on the Import Data button.

Do the same thing for Appearance > Sidebars and Appearance > Slide Shows, making sure that you paste the correct settings for each of them.

Note that these settings are stored separately in your site’s database for the child theme; this enables each child theme to have different layouts, sidebars and slideshows to the Razor parent theme.

5. A child is born

Go to Appearance > Themes and activate the Ruddock theme.

Go to Appearance > Menus > Theme Locations and make sure the Main Menu option is set to the correct menu.

From now on you can make any style additions or alterations to the relevant skin css file in Ruddock, but remember that the @import must be the first css in the file, there must be nothing before the @import except comments.

Other things you can do with a child theme include making your own functions.php file that could contain (for example) additional shortcodes, custom post types or custom taxonomies.

If you wanted to mess with a page template, let’s say the single.php file that determines how each individual post is displayed, then you would copy single.php from parallelus-razor into ruddock and then you would make whatever changes you wanted to the ruddock/single.php file, leaving the original Razor template untouched.  



Resources