Stallion Responsive Child Theme was updated to version 8.4 September 6th 2016.

What is a WordPress Child Theme?
Stallion Responsive Child Theme
Before WordPress added the child theme feature users would heavily modify their WordPress themes with code hacks etc… and when the theme was updated they would loose all their modifications or they would have to again modify the latest theme update and many users wouldn’t update because it was too much hassle.

WordPress child themes are designed to add extra features, add code hacks, modify theme files etc… to the main theme (called the parent theme like Stallion Responsive is the parent theme) and allow users to make code changes to a parent theme without editing the parent theme files. Stallion Responsive and the free Stallion Responsive Child theme for example are installed in the folders:

/wp-content/themes/stallion-responsive/
/wp-content/themes/stallion-responsive-child/

The parent theme folder /stallion-responsive/ includes all the theme files required to run Stallion Responsive and the child theme folder /stallion-responsive-child/ includes files that create additional features and where we place edit theme files. Stallion Responsive doesn’t need a child theme installed, but it is highly recommended you always installed the free child theme (why will be explained below).

Stallion Responsive and Stallion Responsive Child Theme Downloads

Stallion Responsive Theme Zip file
Stallion Responsive Child Theme Zip file

Best Way to Install Stallion Responsive
Under your WordPress Dashboard go to “Appearance >> Themes” : “Add New” – “Upload” : Select the “stallion-responsive-8.4.zip” file from your computer and install.

Don’t activate Stallion Responsive yet.

Under “Appearance >> Themes” : “Add New” – “Upload” : Select the “stallion-responsive-child-8.4.zip” file from your computer and install.

Activate the Stallion Responsive Child Theme

By installing and activating the free child theme you gain access to hundreds of free header images, banner images and thumbnails.

Free Stallion Responsive Child Theme

Stallion Responsive relies heavily on the free Stallion Responsive Child Theme which should be installed on all installations unless you have built your own Child theme.

Stallion Responsive Child Theme Thumbnail
The Stallion Responsive Child Theme includes almost all the Stallion Header Images and Thumbnail Images, over 1,000 images that are used by multiple Stallion Responsive Theme features.

There are 20 traditional Stallion 2011 Header Image Sets: each set is 8 images, so 160 additional header images. There’s around 90 of the alternative Header Images and over 20 Random thumbnail Sets (10 images per set, so over 200 thumbnails- you can see most of the sets in the screenshot to the right).

For those familiar with the Stallion WordPress SEO Theme version 7 and used the Stallion Favicon feature, that feature is now part of the child theme: moved it to the child theme because it includes around 500 ico files (used as favicons).

By moving most images from the main Stallion Responsive parent theme the zip file is below 2MB in size meaning almost everyone can install it without using FTP or contacting their host to increase the maximum file upload size.

Using a WordPress Child Theme
There are many ways to use a WordPress child theme, one of the simplest uses would be editing a parent theme template file without editing the files under /wp-content/themes/stallion-responsive/.

So you want to make a change to a template file, the single.php file for example (this file is used to generate WordPress Posts). Normally you’d edit the file in a text editor and upload over the themes original single.php file, when the theme is updated you loose the edits to single.php since an update deletes the parent theme folder and replaces every file (like a new install). By making a copy of the single.php file that you add to the child theme folder /wp-content/themes/stallion-responsive-child/ when the parent theme is updated the edited single.php isn’t overwrote.

Another way to use child themes is add new features, you’ve found an awesome WordPress code hack online and the site you found it on advises adding it to the themes functions.php file. You make this change, but like with the single.php file example above when the parent theme updates the changes are lost, so it’s a pain to manage your code hacks. Instead you add your code hack to the child themes functions.php file protecting it from theme updates. The Stallion Responsive Child Theme is better than this, you will find the files functions-child.php and functionsplus-child.php where you can add your code hacks etc… to either of these two files and in both files you’ll find documented examples. If you know what you are doing you can add your own child theme template files like I did to add the Favicon feature (that’s based on a plugin I adapted to work in a theme).

Adding New WordPress Child Theme Features

The Stallion Responsive Child Theme goes even further, within the file st_responsive_child.php you will find the code that generates the options etc… on the Stallion Child Theme Options page, within this file you can add your own colour schemes, header images etc… allowing you to extend Stallion Responsive even further. An example would be creating a new Colour Scheme, you will find under Stallion Colour Options the ability to turn on the Colour Scheme CSS File Creator (not going to explain here how to use it: basically it creates new CSS files based on the colours and fonts you select, it’s an awesome feature). After activating and using the CSS File Creator you can make your own Colour Scheme CSS files that can work exactly the same way as the built in Stallion Responsive Colour Schemes.

It’s not that hard, lets say you’ve made a colour scheme called “Bobs Blue Box” and the CSS file is named style-bobs-blue-box.css and you’ve added it to /wp-content/themes/stallion-responsive-child/colors/style-bobs-blue-box.css.

Edit the file /wp-content/themes/stallion-responsive-child/st_responsive_child.php in a text editor and on line 40 you’ll find the code for the dropdown menu for selecting a Child Theme Colour Schemes.

'stchild_themecolor' => '<strong>Stallion Theme Colour Scheme</strong> {drop|stdefaults|Use Original Options|example-st|Example Child Colour|custom-01|Custom 01|custom-02|Custom 02|custom-03|Custom 03|custom-04|Custom 04|custom-05|Custom 05|custom-06|Custom 06|custom-07|Custom 07|custom-08|Custom 08|custom-09|Custom 09|custom-10|Custom 10|custom-11|Custom 11|custom-12|Custom 12|custom-13|Custom 13|custom-14|Custom 14|custom-15|Custom 15|custom-16|Custom 16|custom-17|Custom 17|custom-18|Custom 18|custom-19|Custom 19|custom-20|Custom 20} ##<br />Choose a Stallion Child Theme colour.<br />To use the Custom colours create a custom colour CSS file "style-custom-**.css" under "/stallion-responsive-child/color/" for example "style-custom-01.css" would use the Custom 01 slot above. There are 20 empty Custom slots, note none of the "style-custom-**.css" files currently exist and only work after you create them. The contents of a Custom file can be created manually (use another Stallion CSS file as a starting point for example) or by using the "Appearance > Colour Scheme CSS File Creator" options page: turn this feature on under "Stallion Theme > Colour Options : Colour Scheme CSS Inline/File Creator Selector - Colour Scheme CSS File Creator ON". The output of the "Generated CSS" box would be copy and pasted into a "style-custom-**.css" file.',

There are two components to each colour scheme separated by | (pipes), the first part is the name of the CSS file minus style- and .css, since our CSS file is called style-bobs-blue-box.css we want bobs-blue-box for the first part. The second part is whatever we want to call it, Bobs Blue Box for example (doesn’t really matter what you call it, only part one is important, must match the filename), so the code we want is:

|bobs-blue-box|Bobs Blue Box

You might add it to the beginning, middle or the end of the relevant code, in the middle it might look something like this:

...|custom-08|Custom 08|custom-09|Custom 09|bobs-blue-box|Bobs Blue Box|custom-10|Custom 10|custom-11|Custom 11|custom-12...

When you click the dropdown menu you’d see the Bobs Blue Box option between Custom 09 and custom 10, weird place to add it, but I’ll not judge you :-)

That’s all you have to do to have the Bobs Blue Box colour scheme available in the child theme as a main colour scheme. There’s a little more to do if you want to have it available on the Post and Page edit screens (see between line 352 to 374, that code adds the child theme colour schemes to the Post/Page edit screens: what to add is that obvious it doesn’t need explaining). And if you want to be able to use your new colour scheme to make even more colour schemes based on Bobs Blue Box or just edit your creation because you made a mistake you’d also make the /wp-content/themes/stallion-responsive-child/mydefaults/css/stallion_color_css_bobs-blue-box.php file and have the option to load it as a Colour Scheme CSS File Creator Defaults (see line 42 where you’d repeat what you added to line 40). The creator defaults option basically loads the colours and fonts we’ve set for a colour scheme so they can be edited within Stallion rather than hacking at CSS files in a text editor (that is such a pain to maintain when you have 40+ colour schemes!).

Stallion Colour Scheme CSS File Creator
Stallion Responsive Colour Scheme CSS File Creator Header Options
By creating the two files style-bobs-blue-box.css and stallion_color_css_bobs-blue-box.php and making a few edits in the st_responsive_child.php file not only will you have a brand new colour scheme, but you and anyone you give a copy of the child theme will be able to use your creation as is (like any Stallion colour Scheme) or to make more colour schemes based on your work.

Note all the Stallion Responsive Colour Schemes have default files, if you like a colour scheme, but really want those borders neon pink, load that colour schemes defaults and create a new CSS file etc… The image to the above right links to a full screenshot (a big image) of the Colour Scheme CSS File Creator Options page (it’s showing the “Stallion Responsive Midnight Slate Rounded Corners Theme” defaults). This options page is where you add your own colours and fonts etc… or edit the built in colour schemes to make new colour schemes. My wife is not particularly tech savvy, yet she was able to create the colour schemes that are by Marie (much nicer colour schemes than I make).

Above is a small sample of what is possible with a Stallion Responsive Child Theme, want new thumbnail sets it’s easy to add them. Want to add a plugin you’ve edited to work with Stallion Responsive, add it to the child theme: maybe you like a plugin that would work well with the Stallion Responsive Keyword Phrases, modify the plugin and add it to the child theme. It’s amazing what you can achieve when integrating multiple plugins and hacks together (that’s what Stallion Responsive is, hundreds of plugins and code hacks integrated into one package). When creating new features for Stallion I first add them to the child theme and if it’s what I wanted add it to the main theme for release.

David Law

David Law > AKA SEO Dave
*
: 20+ Years Experience as a Freelance SEO Consultant, WordPress SEO Expert, Internet Marketer, Developer of Multiple WordPress SEO Plugins/SEO Themes Including the Stallion Responsive Theme.

Website - SEO Gold