IMPORTANT NOTE: If you are having issues with your Child Theme, particularly after updating to Avada 7.2, please see this explanation FAQ. In short, it』s to do with the style sheet being moved, and so a new snippet of code is required.A WordPress child theme allows you to apply custom code changes to your site. Using a child theme ensures that all your customizations will not be overwritten even when you update the parent theme. Continue reading below to learn how to setup your own child theme, and watch the video for a visual overview.
SUPPORT POLICY ON CHILD THEMES: While child themes are a great way to add custom changes to Avada, there are generally used to customize core code from the parent theme. Because of this, please be aware that customizations of this nature fall outside our scope of support and we will be unable to assist you with issues that may arise from it.Overview
What Is A Child Theme?
Downloading and Installing the Avada Child Theme
How To Download Avada Child Theme
Methods Of Modifying A Child Theme
Useful Documentation On Child Themes
What Is A Child Theme?A child theme is a theme that has all the functionality and styling of another theme, called the parent theme, which in our case is Avada. Child themes are the recommended way of modifying the code of an existing theme, because a child theme preserves all custom code changes and modifications even after a theme update.
If you modify code directly in a parent theme, and then update the parent theme, your changes will be lost. Always use a child theme if you intend modifying core code. Child themes can be used for a number of things, such as custom CSS applications, template file modifications, and custom PHP functions and/or hooks. There are a couple of methods to modify a child theme. Child themes don』t guarantee that an update of custom code on the parent theme will not require further maintenance. This is especially true if you copy files from the parent theme to your child theme.
Downloading and Installing the Avada Child ThemeBefore anything else, you must first download and install the Avada child theme to begin making your customizations. The Avada child theme comes with downloading Avada』s Full Package from ThemeForest, and the method of installing it is exactly the same as installing the Avada theme. Please follow the detailed steps below on how to download and install the Avada child theme.
How To Download Avada Child ThemeStep 1 – Login to your ThemeForest account and go to your Downloads tab.
Step 2 – Locate your Avada purchase, and click Download. Choose the 『All Files & Documentation』 option.
Step 3 – Once the .ZIP file is finished downloading, locate it on your computer and extract it. You will then have a folder called Avada_Full_Package.
Step 4 – Navigate to Avada_Full_Package > Avada Theme and you will see an Avada.zip file and an Avada-Child-Theme.zip file.
Step 5 – Before installing the Child Theme, you must first have Avada (the parent theme) installed. You install the child theme using the exact process of installing the parent theme. You can choose to install the theme zip files via WP upload or via FTP upload.
Methods Of Modifying A Child ThemeThere are a several methods you can use to modify a child theme, and we』ll be explaining 3 methods below. These methods are copying files from a parent theme, pluggable functions, and actions and filters. To learn more about each one, please continue reading below.
Method 1: Copying Files From Parent ThemeCopying files from the parent theme to a child theme is a common method to make code customizations. This is the easiest method available, but there are limitations to it. Due to the limitations, we recommend only copying the files inside the templates folder from the parent theme into the child theme.
You can only copy some files to the child theme. In Avada, we have made a decision to make sure that core logical code which can break the theme is not able to be copied into the child theme. This includes the files inside the includes folder.
It is not update-safe (sometimes). Whenever we make major changes to a certain file e.g. header.php in the parent theme, you』ll have to copy the theme file from parent theme again and apply the customizations again. If you don』t do this, there』s a chance that the related feature might not work anymore.
Method 2: Pluggable FunctionsPluggable functions are PHP functions that can be changed inside a child theme or a even a plugin. If a function is wrapped inside a function_exists call within the parent theme, you can create the same function in the child theme which will override the original function from the parent theme, because child theme functions are loaded first.
Example of a function override inside the Child ThemeTo change the rendering of the Page Title Bar, you can override Avada』s avada_get_page_title_bar_contents function, which is located in Avada/includes/custom_functions.php. The function definition looks like this:
Copy to Clipboardif ( ! function_exists( 'avada_get_page_title_bar_contents' ) ) {
/**
* Get the contents of the title bar.
*
* @param int $post_id The post ID.
* @param bool $get_secondary_content Determine if we want secondary content.
* @return array
*/
function avada_get_page_title_bar_contents( $post_id, $get_secondary_content = true ) {
if ( $get_secondary_content ) {
ob_start();
.
.
.
return array( $title, $subtitle, $secondary_content );
}
}x 1if ( ! function_exists( 'avada_get_page_title_bar_contents' ) ) {2 /**3 * Get the contents of the title bar.4 *5 * @param int $post_id The post ID.6 * @param bool $get_secondary_content Determine if we want secondary content.7 * @return array8 */9 function avada_get_page_title_bar_contents( $post_id, $get_secondary_content = true ) {10 if ( $get_secondary_content ) {11 ob_start();12 .13 .14 .15 16 return array( $title, $subtitle, $secondary_content );17 }1819}Simply copy the function to the functions.php of the child theme, which will override the parent theme』s one. Once done, you can modify it to meet your needs.
Copy to Clipboardfunction avada_get_page_title_bar_contents( $post_id, $get_secondary_content = TRUE ) {
// Place your code here.
.
.
.
return array( $title, $subtitle, $secondary_content );
}xxxxxxxxxx8 1function avada_get_page_title_bar_contents( $post_id, $get_secondary_content = TRUE ) {2 // Place your code here.3 .4 .5 .67 return array( $title, $subtitle, $secondary_content );8}Method 3: Actions and FiltersThe correct and safest way of updating or modifying theme functions within a child theme is using actions and filters. Apart from the actions and filters built-in within Avada, you can use the default WordPress actions and filters to modify the theme』s functionality.
A simple example would be changing the image size generated for blog large layout thumbnails in the Avada theme. The correct way to re-register within the child theme is to use after_setup_theme action in the child theme functions.php, remove the image size and then re-register the image size.
Example of an ActionCopy to Clipboardadd_action( 'after_setup_theme', 'my_child_theme_image_size' );
function my_child_theme_image_size() {
remove_image_size( 'blog-large' );
add_image_size( 'blog-large', 1000, 500, true );
}xxxxxxxxxx5 1add_action( 'after_setup_theme', 'my_child_theme_image_size' );2function my_child_theme_image_size() {3 remove_image_size( 'blog-large' );4 add_image_size( 'blog-large', 1000, 500, true );5}Useful Documentation On Child ThemesIf you』d like to learn and read even more about child themes, please follow the links below.
WordPress Codex on Child ThemesWordPress Developers Handbook: Child ThemesHow To Create A WP Child Theme video by WPBeginner.com