Building a Child Theme for Avada the Right Way

You want to customize Avada beyond what the theme options allow. Maybe you need to modify a template, add custom functions, or override some PHP...

You could edit the parent theme files directly. But the next time Avada updates - and it updates frequently - all your changes vanish. Gone!!

A child theme solves this permanently. But there's a right way and a wrong way to build one. This guide shows you the right way, with code you can actually use.

What a Child Theme Actually Does

Think of a child theme as a layer on top of Avada. It inherits everything from the parent - all the styling, functionality, and templates. But anything you add to the child theme overrides the parent.

The key benefit? When Avada updates, only the parent theme changes. Your customizations in the child theme stay exactly where you put them.

Child themes let you:

• Add custom CSS that survives updates
• Override template files selectively
• Add custom PHP functions
• Hook into Avada's actions and filters
• Register custom scripts and styles [

](https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=53476&url=73342)

Setting Up Your Avada Child Theme

Option 1: Use Avada's Included Child Theme

Avada actually provides a child theme in their full package download from ThemeForest. Look for Avada-Child-Theme.zip in your download.

Install it:

1. Go to Appearance → Themes → Add New → Upload Theme
2. Upload the zip file
3. Click Install Now
4. Activate the child theme

Done!! You now have a working child theme.

Option 2: Build Your Own From Scratch

Want to understand how it works? Let's build one manually.

Step 1: Create the folder

In /wp-content/themes/, create a new folder called avada-child

Step 2: Create style.css

Create a file called style.css with this content:

/*
 Theme Name: Avada Child
 Theme URI: https://your-site.com
 Description: Child theme for Avada
 Author: Your Name
 Author URI: https://your-site.com
 Template: Avada
 Version: 1.0.0
 Text Domain: avada-child
*/

/* Your custom CSS goes below */

The critical line is Template: Avada - this must exactly match the parent theme's folder name (case-sensitive).

Step 3: Create functions.php

Create a file called functions.php:

<?php
/**
 * Avada Child Theme Functions
 */

// Enqueue child theme styles
function avada_child_enqueue_styles() {
    wp_enqueue_style(
        'avada-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('fusion-dynamic-css'),
        wp_get_theme()->get('Version')
    );
}
add_action('wp_enqueue_scripts', 'avada_child_enqueue_styles', 999);

Step 4: Activate

Go to Appearance → Themes and activate your child theme.

The CSS Loading Problem (And How to Fix It)

Here's something that trips people up: Avada's CSS loading is complex. Your child theme's style.css might load before Avada's styles, making your overrides useless...

The fix is in how you enqueue your stylesheet.

The wrong way:

// DON'T DO THIS
wp_enqueue_style('child-style', get_stylesheet_uri());

The right way:

function avada_child_enqueue_styles() {
    wp_enqueue_style(
        'avada-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('fusion-dynamic-css'),  // Load AFTER Avada's CSS
        wp_get_theme()->get('Version')
    );
}
add_action('wp_enqueue_scripts', 'avada_child_enqueue_styles', 999);

The key is:

• Dependency: array('fusion-dynamic-css') ensures your CSS loads after Avada's compiled CSS
• Priority: 999 makes it load late in the queue

Important: This only works if CSS Compiling Method is set to "File" in Avada → Options → Performance. If set to "Disabled", you'll need a different approach.

Template Overrides: The Right Files to Copy

You can override Avada's template files by copying them to your child theme. But there are rules...

Files You CAN Override

Copy these from /wp-content/themes/Avada/templates/ to your child theme:

templates/
├── blog-layout.php
├── featured-image.php
├── footer.php
├── header.php
├── rollover.php
├── searchform.php
├── sidebar.php
└── ... (other template files)

Also works for standard WordPress templates:

• single.php
• page.php
• archive.php
• 404.php
• search.php

Files You CANNOT Override

Avada intentionally blocks copying files from /includes/ to child themes. This protects you from breaking core functionality.

Don't try to copy:

• Files in /includes/
• Class files
• Core function files

The Template Override Process

1. Find the template file in the parent theme
2. Copy it to the exact same relative path in your child theme
3. Make your modifications
4. Test thoroughly

Example: To customize the header:

Parent: /wp-content/themes/Avada/templates/header.php
Child:  /wp-content/themes/avada-child/templates/header.php

WordPress checks your child theme first. If it finds the file there, it uses your version.

The Update Problem

Here's the catch - when Avada makes major changes to a template file, your override might break. You'll need to:

1. Check the Avada changelog before updating
2. Compare your modified file with the new parent version
3. Merge any important changes

If an update does break your site, don't panic - check out my Avada Theme Update Broke My Site: A Survival Guide for step-by-step recovery.

This is why hooks and filters are better than template overrides when possible...

Functions.php Best Practices

Your child theme's functions.php doesn't replace the parent's - both run. The child's loads first, which is actually useful for overriding things.

Structure Your functions.php Properly

<?php
/**
 * Avada Child Theme Functions
 * 
 * @package Avada-Child
 */

// Prevent direct access
if (!defined('ABSPATH')) {
    exit;
}

/**
 * Enqueue Styles
 */
function avada_child_enqueue_styles() {
    wp_enqueue_style(
        'avada-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('fusion-dynamic-css'),
        wp_get_theme()->get('Version')
    );
}
add_action('wp_enqueue_scripts', 'avada_child_enqueue_styles', 999);

/**
 * Enqueue Scripts
 */
function avada_child_enqueue_scripts() {
    wp_enqueue_script(
        'avada-child-script',
        get_stylesheet_directory_uri() . '/js/custom.js',
        array('jquery'),
        wp_get_theme()->get('Version'),
        true  // Load in footer
    );
}
add_action('wp_enqueue_scripts', 'avada_child_enqueue_scripts');

/**
 * Custom Functions
 */
// Your custom functions go here...

Don't Copy Parent Functions

Never copy functions from Avada's functions.php to your child theme. You'll get fatal errors from duplicate function names!!

Instead, use hooks or pluggable functions (explained next).

Pluggable Functions: Override Without Copying

Some Avada functions are "pluggable" - wrapped in function_exists() checks. You can override these by defining them in your child theme.

How it works:

In Avada's code:

if (!function_exists('avada_get_page_title_bar_contents')) {
    function avada_get_page_title_bar_contents($post_id, $get_secondary_content = TRUE) {
        // Original function code
    }
}

In your child theme's functions.php:

// Your version loads first, so Avada's won't load
function avada_get_page_title_bar_contents($post_id, $get_secondary_content = TRUE) {
    // Your modified function code
}

Since child theme functions load before parent, your function exists first. Avada's check fails, and your version is used.

Common pluggable functions in Avada:

• avada_get_page_title_bar_contents() - Page title bar rendering
• Various helper functions in custom_functions.php

Hooks and Filters: The Safest Customization Method

This is the professional way to customize Avada. No file copying, no version conflicts, minimal maintenance.

Understanding Actions vs Filters

Actions - Do something at a specific point:

// Add a banner before the header
add_action('avada_before_header_wrapper', 'my_custom_banner');
function my_custom_banner() {
    echo '<div class="promo-banner">Free shipping on orders over $50!</div>';
}

Filters - Modify data before it's used:

// Change the sharing box tagline
add_filter('fusion_sharing_box_tagline', 'my_sharing_tagline');
function my_sharing_tagline($tagline) {
    return 'Spread the word!';
}

Useful Avada Action Hooks

// Before entire header
add_action('avada_before_header_wrapper', 'my_function');

// After header, before content
add_action('avada_before_main_container', 'my_function');

// Before footer
add_action('avada_before_footer', 'my_function');

// After footer
add_action('avada_after_footer', 'my_function');

// Before body content (good for tracking scripts)
add_action('avada_before_body_content', 'my_function');

Useful Avada Filters

// Modify sidebar order on mobile
add_filter('fusion_responsive_sidebar_order', 'my_sidebar_order');
function my_sidebar_order($order) {
    return 'sidebar-content';  // or 'content-sidebar'
}

// Customize sharing box text
add_filter('fusion_sharing_box_tagline', 'my_tagline');
function my_tagline($tagline) {
    return 'Share this article:';
}

// Modify post meta data
add_filter('fusion_get_all_meta', 'my_meta_filter', 10, 2);
function my_meta_filter($data, $post_id) {
    // Modify $data array
    return $data;
}

WordPress Hooks That Work With Avada

Standard WordPress hooks work too:

// Modify image sizes
add_action('after_setup_theme', 'my_custom_image_sizes');
function my_custom_image_sizes() {
    // Remove default Avada size
    remove_image_size('blog-large');
    // Add your own
    add_image_size('blog-large', 800, 500, true);
}

// Add custom body classes
add_filter('body_class', 'my_body_classes');
function my_body_classes($classes) {
    if (is_page('landing')) {
        $classes[] = 'landing-page';
    }
    return $classes;
}

// Modify excerpt length
add_filter('excerpt_length', 'my_excerpt_length');
function my_excerpt_length($length) {
    return 30;  // words
}

Practical Examples

Example 1: Add Google Tag Manager

// Add GTM to head
add_action('avada_before_body_content', 'add_gtm_script');
function add_gtm_script() {
    ?>
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXX');</script>
    <!-- End Google Tag Manager -->
    <?php
}

Example 2: Custom Admin Dashboard Widget

add_action('wp_dashboard_setup', 'my_dashboard_widget');
function my_dashboard_widget() {
    wp_add_dashboard_widget(
        'my_quick_links',
        'Quick Links',
        'my_dashboard_widget_content'
    );
}

function my_dashboard_widget_content() {
    echo '<ul>';
    echo '<li><a href="/wp-admin/edit.php">All Posts</a></li>';
    echo '<li><a href="/wp-admin/upload.php">Media Library</a></li>';
    echo '<li><a href="/wp-admin/themes.php?page=avada_options">Avada Options</a></li>';
    echo '</ul>';
}

Example 3: Remove Avada Version from Source

add_filter('avada_get_theme_version', 'remove_avada_version');
function remove_avada_version() {
    return '';
}

Example 4: Conditional Slider Per Page

add_action('avada_before_main_container', 'conditional_slider');
function conditional_slider() {
    if (is_front_page()) {
        echo do_shortcode('[smartslider3 slider=1]');
    } elseif (is_page('about')) {
        echo do_shortcode('[smartslider3 slider=2]');
    }
}

Organizing Your Child Theme

For anything beyond basic customizations, organize your files:

avada-child/
├── style.css
├── functions.php
├── css/
│   └── custom.css
├── js/
│   └── custom.js
├── templates/
│   └── (any template overrides)
├── inc/
│   ├── custom-functions.php
│   └── hooks.php
└── screenshot.png

Include additional files in functions.php:

// Load custom functions
require_once get_stylesheet_directory() . '/inc/custom-functions.php';
require_once get_stylesheet_directory() . '/inc/hooks.php';

Common Mistakes to Avoid

Mistake 1: Editing parent theme files
Always use a child theme. No exceptions.

Mistake 2: Wrong Template name
Template: Avada must exactly match the parent folder name.

Mistake 3: Copying functions from parent
You'll get duplicate function errors. Use hooks instead.

Mistake 4: @import for parent styles
This method is outdated and slow. Use wp_enqueue_style().

Mistake 5: Ignoring the CSS loading order
Use dependencies and priority in your enqueue function. For more CSS tips, check out my Custom CSS in Avada: Beyond the Theme Options Panel guide.

Mistake 6: Overriding files you don't need to
Hooks are almost always better than template overrides.

Mistake 7: Not testing after Avada updates
Template overrides can break. If your site crashes after an update, see my Avada Theme Update Broke My Site: A Survival Guide for recovery steps.

When to Consider Alternatives

Child themes are powerful, but sometimes there's a better tool:

• Simple CSS changes? Use Avada → Options → Custom CSS (or see my Custom CSS in Avada guide)
• Single page styling? Use page-specific CSS in Avada Builder
• Adding tracking scripts? Consider a plugin instead
• Plugin conflicts after changes? Check my Plugin Conflicts in Avada: How to Debug Without Losing Your Mind
• Constantly fighting the theme? Maybe it's time for a different foundation...

Speaking of alternatives - if you find yourself building extensive child themes for every Avada project, Divi might be worth exploring. Their hook system is more straightforward, and their unlimited licensing means you can use it across all client sites without per-site fees. Just something to consider if child theme maintenance is eating your time...

Wrapping Up

A properly built Avada child theme gives you:

1. Update safety - Customizations survive theme updates
2. Clean organization - All modifications in one place
3. Professional workflow - Hooks and filters over file hacking
4. Version control friendly - Easy to track changes with Git

The key principles:

• Use wp_enqueue_style() with proper dependencies
• Prefer hooks and filters over template overrides
• Never copy functions from the parent theme
• Keep your functions.php organized

Bookmark this guide. Next time you need to customize Avada beyond the options panel, you'll know exactly how to do it the right way ;-)

Building an Avada child theme? Drop your questions in the comments!!

This article contains affiliate links!