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

Making a Vellum Child Theme

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

1. Give the child a name

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

NOTE: You can name your child theme whatever you like.

2. Give the child some style

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

/*  
Theme Name: Pergamon
Description: Child of the Vellum theme
Author: Doris Lessing
Template: parallelus-vellum
Version: 1.0
Tags: one-column, two-columns, right-sidebar, left-sidebar, flexible-width, custom-menu, editor-style, featured-images, post-formats, rtl-language-support, sticky-post, translation-read
*/
@import url("../parallelus-vellum/style.css");

Then create seven more css files, named as follows:

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

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

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

The content of the other 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: Skin 2
*/
@import url("../parallelus-vellum/style-skin-2.css");
/*
	Skin Name: Skin 3
*/
@import url("../parallelus-vellum/style-skin-3.css");
/*
	Skin Name: Skin 4
*/
@import url("../parallelus-vellum/style-skin-4.css");
/*
	Skin Name: Skin 5
*/
@import url("../parallelus-vellum/style-skin-5.css");
/*
	Skin Name: Skin 6
*/
@import url("../parallelus-vellum/style-skin-6.css");
/*
	Skin Name: Skin 7
*/
@import url("../parallelus-vellum/style-skin-7.css");

3. Give the child some assets

Copy the entire assets folder from the parallelus-vellum folder into the pergamon folder.

4. The child needs some settings

Copy the entire data folder from the parallelus-vellum folder into the pergamon folder.

These data files are needed for the Theme Options admin page to function properly and you should never edit these data files.

IMPORTANT: When you update the parent theme, remember to also update the assets and data folders in the child theme, i.e. copy those folders across again from the parent theme folder to the child theme folder.

5. A child is born

Go to Appearance > Themes and activate the Pergamon theme.

Go to Appearance > Menus > Theme Locations and make sure the Primary 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 Pergamon, 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-vellum into pergamon and then you would make whatever changes you wanted to the pergamon/single.php file, leaving the original Vellum template untouched.

Keep in mind that the child theme has its own settings, which means that the child will begin life with default settings, it won’t inherit the parent theme’s settings. After creating a child theme you can apply one of the starter kits (Appearance > Demo Content) to set up the demo layouts, headers and footers.  



Resources