Create WordPress Child Theme Under Avada

For the equivalent instructions for the Enfold theme, see here.

Creating a WordPress child theme is very straightforward, and it allows you to make major customizations that will not be lost when you update or replace the parent theme. Your customizations are all stored within the child theme.

Note: With the Avada theme, the child theme's style.css is NOT automatically loaded, so you have to explicitly load that file in functions.php (see code below).

Note: In order for the child theme's style.css to be loaded with the code below, you must set "CSS Compiling method" to "File". If you must have it set to "Disabled", you could remove the dependency (array( 'fusion-dynamic-css'), but then the child theme's style.css may load BEFORE the Avada CSS files, and that's usually not what you want.

Step 1: Create a new folder in wp-content/themes with the desired name of your child theme.

Step 2: Create a file in the new folder called style.css with the following contents:

/*
Theme Name: Custom Avada
Description: Ben's Custom Avada Theme
Author: Benjamin Ray
Author URI: https://benjaminray.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

/* Your Custom CSS Here */

Step 3: Create a file in the same folder called functions.php with the following contents:

<?php
function theme_enqueue_styles()
{
    // OPTIONAL: Add the parent style sheet (that file may or may not have content, so this could be skipped)
    wp_enqueue_style( 'avada-parent-stylesheet', get_template_directory_uri() . '/style.css' );
    // Add child theme's custom CSS with a specific dependency to load it after most of the Avada CSS. Use ver# to help with cache-busting.
    // IMPORTANT: The dependency trick requires CSS Compiling to be enabled, which inserts much of the Avada theme (and custom CSS added under Options)
    // in a CSS file with the id "fusion-dynamic-css". We want our child theme CSS to load after that. With CSS Compiling disabled, no CSS with Id
    // "fusion-dynamic-css" will be added, so our child theme CSS won't be added either.
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', ['fusion-dynamic-css'], '1.01', 'all' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 20 );

// Add custom JavaScript to child theme (note: get_stylesheet_directory_uri() gets the child theme directory)
function child_theme_js()
{
    wp_enqueue_script( 'child-script', get_stylesheet_directory_uri() . '/custom.js', ['jquery'], '1.01', true );
}
add_action('wp_enqueue_scripts', 'child_theme_js');

Step 4: Create a file in the same folder called custom.js and fill it with your custom JS

Step 5: Create an optional image for the theme. The recommended size is 1200x900. Give it the name screenshot.png and upload it to the root folder for your child theme (same location as the files you just created above).

Step 6: Activate the child theme under Appearance -> Themes -> Child Theme Name