HUB Elementor - Child Theme
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 set up your own child theme.
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 Hub. 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 the code directly from a parent theme, then update the parent theme, your changes will be lost. Always use a child theme if you are modifying core code. Child themes can also 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 Hub Child Theme
Before anything else, you must first download and install the Hub child theme to begin making your customizations. The Hub child theme comes with downloading Hub's Full Package from ThemeForest, and the method of installing it is exactly the same as installing the Hub theme. Please follow the detailed steps below on how to download and install the Hub child theme.
How To Download Hub Child Theme
Step 1 - Login to your ThemeForest account and go to your Downloads tab.
Step 2 - Locate your Hub 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 Hub_Full_Package.
Step 4 - Navigate to Hub _Full_Package > Hub Theme and you will see an hub.zip file and an Hub-Child-Theme.zip file.
Step 5 - You must first install hub.zip file because that is the parent theme. Once that's done, you can then install the child theme which follows the exact process of installing the parent theme. Choose to install the theme zip files via WP upload or via FTP upload.
Methods Of Modifying A Child Theme
There are several methods you can use to modify a child theme, and we'll be explaining the 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 Theme
Copying 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 Hub, 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.
- To override any templates, just copy the directory TEMPLATES from the parent theme and do any modification you need in the required template file.
Method 2: Actions and Filters
The correct and safe 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 Hub, 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 Av 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 Filter
add_filter( 'liquid_media_image_sizes', 'liquid_media_image_sizes', 1 );
function liquid_media_image_sizes( $size ) {
$size['liquid-default-blog'] = array(
'width' => '100',
'height' => '100',
'crop' => true
);
return $size;
}
Useful Documentation On Child Themes
If you'd like to learn and read even more about child themes, please follow the links below.