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.
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.
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
- WordPress child theme documentation: http://codex.wordpress.org/Child_Themes