Child Themes

Add, override or extend anything without the risk of losing your customizations when updating.

A child theme has its own theme folder, side by side with the yootheme theme folder. It contains only your modified files and otherwise inherits the styling and layout of its parent theme. Using a child theme ensures your modifications are not lost when updating the parent theme. Typical use cases are:

Create a Child Theme

To create a child theme for YOOtheme Pro, just follow the WordPress child theme documentation. Open the /wp-content/themes directory in your WordPress installation and create your own folder yootheme-NAME, for example yootheme-mytheme. Afterwards, you need to create a style.css file in your child theme's directory, which must contain specific information in its header, which could look like this:

 Theme Name:   YOOtheme MyTheme
 Template:     yootheme
 Author:       John Doe
 Description:  YOOtheme Child Theme
 Version:      1.0.0
 Text Domain:  yootheme-mytheme

The most important condition for your child theme to load is the Template line which refers to the parent theme, in this case yootheme. Afterwards, you should be able to select your child theme in the WordPress administration.

To add custom PHP in your WordPress child theme, add a functions.php file as you are used to from WordPress themes.

Note A child theme in WordPress has its own settings which are independent from the parent theme. When you activate the child theme for the first time, all settings from the parent theme will be copied and applied. This also includes the menu settings and widget assignments.

When not to Use a Child Theme

Many customizations can be made from within YOOtheme Pro, like modifying the theme style in the style customizer.

To add custom JavaScript, CSS or LESS, go to the Settings → Custom Code panel in YOOtheme Pro. Learn more.

Custom CSS for specific elements in the page builder can be added in the Advanced tab in the element settings. That way your code stays right where it is applied and is also removed whenever you decide to remove the element. Learn more.

YOOtheme Pro Documentation