How to Create a Volatyl Child Theme

Did you read about child themes and now you’re wondering if you can create your own child theme for Volatyl?

Of course you can! Anyone can. It does not take an experienced theme developer to create a child theme. All it takes is text editor and an FTP connection to your server where your parent theme is installed on WordPress.

Step 1 – Create a new folder on your computer

Name this folder something simple but clear. For example, something like volatyl-child would work.

Step 2 – Create a new CSS file in your text editor

Open the simplest text editor you have. Stay away from editors like Microsoft Word as they add special formatting to your text which can cause problems.

When you have your new file, add the following CSS to it:

/*
Theme Name: My Volatyl Child Theme
Description: Child theme for Volatyl
Template: volatyl
*/

Only two of the commented-out lines of CSS are required: “Theme Name” and “Template.” Theme Name is self-explanatory. This is the name of the theme as it will show up in your WordPress Dashboard.

Template, however, is what WordPress uses to link your child theme to the correct parent theme… which would be “volatyl” in this case. Use that same exact line Template: volatyl and your child theme will attach itself.

NOTE: If you are using Volatyl for Easy Digital Downloads, the template name will be “volatyl_edd” instead (without the quotes)!

Save this file in your new folder as style.css (you must use that exact name).

Step 3 – Create a new functions file in your text editor

Just like the style.css file, you now need to create a functions.php file and save it in your new folder. While this is not a required file for a child theme to operate, this is where we will place the code to inherit Volatyl’s stylesheet.

In this new file, paste the following code:

/** functions.php
 *
 * Volatyl Child Theme functions
 */

// Load Volatyl's functions file immediately!
require_once( get_template_directory() . '/inc/init-functions.php' );

/*---- All custom PHP belongs BELOW THIS LINE! ----*/

// Enqueue front-end child theme scripts and styles
function child_front_scripts() {

    // Default stylesheet
    wp_enqueue_style('child-style', THEME_STYLESHEET);
}
add_action('wp_enqueue_scripts', 'child_front_scripts', 2);

(Description after the instructions)

Step 4 – Zip it up and install!

Next, you need to compress this folder as-is. Don’t do anything fancy. Just have your style.css and functions.php files inside of your folder and compress the folder.

Once it’s zipped up, go to your WordPress dashboard and navigate to Dashboard => Appearance => Themes => Install Themes (tab) => Upload and upload your zipped folder to WordPress.

Volatyl (the parent theme framework) must be installed already. It doesn’t have to be activated but it must be installed.

Once installed, go ahead and activate the child theme. When you refresh your site, there should be absolutely no change. Likewise, all of your Volatyl options should still be in place and functional.

Step 4 – Test, test, test!

Now that your child theme is installed, you want to make sure it’s working properly.

Go to Dashboard => Appearance => Editor and the only files you should see listed on the right side of your screen are the style.css and functions.php files.

Go ahead and make a small CSS edit in your style.css file, save it, and refresh your site. Try pasting this CSS snippet:

body {
     background: orange;
}

This should make your site background orange.

While your site is orange, go back to Dashboard => Appearance => Themes and activate Voaltyl… the parent theme framework. Refresh your site again. Did it go back to the normal white background?

If so, you’re good to re-activate the child theme and have some fun. If not, go back and carefully follow the directions one more time.

If you are familiar with how and when to use your style.css and functions.php files, you’re good to go. Enjoy. 🙂

If everything is good to go and you’d like to learn more, keep reading to understand Volatyl’s functions.php file.

Understanding the functions.php file

The most important line in the functions.php file is the require_once() line:

require_once( get_template_directory() . '/inc/init-functions.php' );

Volatyl was developed with child theme developers in mind. So, all of the major functions and definitions of Volatyl were not placed in Volatyl’s functions.php file. To understand why, first you must understand these two facts:

  • WordPress looks for a theme’s functions.php file when the theme is activated. Of all the PHP files included in a theme, this file runs first.
  • When a child theme is activated, WordPress will run the child theme’s functions.php file (if it exists) first before it runs the parent theme’s functions.php file.

Be sure to fully grasp those two points before reading on.

With those two points in mind, and a basic understanding of PHP, we know that it will be difficult to write functions in our child theme’s functions.php file that override functions in Volatyl’s functions.php since Volatyl’s will be ran last.

So, to make things much easier, all functions and definitions for Volatyl were placed into a remote file called init-functions.php.

WordPress will not look for this file because it doesn’t know that it exists!

Now, when Volatyl is installed by itself, the functions.php file has one line in it that “requires” the init-functions.php file. In other words, everything behaves like normal because WordPress found the file it was looking for and that file called to all of the important information that it needed from another file.

Once the child theme activated, a similar line is added to its functions.php file that calls to the same exact file (located in Volatyl’s folder), init-functions.php. To reference that file, though, a function called require_once() is used.

The name says it all. This function calls to Volatyl’s init-functions.php file and grabs all of those important Volatyl functions and definitions. The key is that this file is required only once. So once it’s called, it should never be called again (and if it is, it will not work). Here it is again from your new child theme’s functions.php file:

require_once( get_template_directory() . '/inc/init-functions.php' );

Do you remember the second point from above? Read it again:

When a child theme is installed, WordPress will run the child theme’s functions.php file (if it exists) first before it runs the parent theme’s functions.php file.

With our child theme installed and Volatyl’s init-functions.php file “required once” from the child theme’s functions.php file, when WordPress finishes with the child theme’s functions and goes to read Volatyl’s functions.php, it will NOT be able to “require once” that same file again.

Let’s sum all of that up in a couple of sentences.

Your child theme will load all of Volatyl’s functions and definitions on its own in its functions.php file. This means that the core Volatyl functions are no longer ran AFTER the child theme functions… they are ran before instead. Because of this “flip,” all it takes to override core Volatyl functions is simple functions in the child theme’s functions.php below that important line. Boom.

The remaining function in your new functions.php file is for calling your child theme’s style.css file to be ran after Volatyl’s style.css file. Here’s the function by itself:

// Enqueue front-end child theme scripts and styles
function child_front_scripts() {
    // Default stylesheet
    wp_enqueue_style('child-style', THEME_STYLESHEET);
}
add_action('wp_enqueue_scripts', 'child_front_scripts', 2);

Most parent themes and child themes use the CSS @import feature in the child theme’s style.css file to inherit the parent theme’s CSS. Volatyl takes a different approach.

Without getting too technical, a unique set of WordPress functions are used between Volatyl and your child theme that strategically load Volatyl’s style.css file, Volatyl’s responsive.css file, and your child theme’s style.css file in that order.

Another great thing about the way Volatyl handle’s the stylesheets is that responsiveness can be turned off in Volatyl’s General Settings.

With your style.css and functions.php files in place and your child theme uploaded, you should be good to go. Use child themes to make all customizations to your site!

Happy coding! 🙂

Return to docs