Installing the child theme for Jupiter X

Updated on June 2, 2020

Note: If you plan on customizing and editing the theme files, it is highly recommended to install a child theme. Having a child theme guarantees that your changes will not be deleted on each update of the theme and they will stay intact.
Make sure to have jupiterx-child.zip file.



In order to install the child theme:


1. From WordPress left menu, go to Appearance > Themes.

2. Click on Add New Theme.

3. Click on Upload Theme button.

4. Click on Browse button and select jupiterx-child.zip file, then click on Install Now button and wait for the install to complete.

5. After the child theme installed successfully, click on the Activate button.


This line in jupiterx-child/functions.php is required, so please do not remove it:

require_once( get_template_directory(). '/lib/init.php');


We include some examples by default for functions and styles in functions.php file but they are disabled by default. You need uncomment the line, for example, remove // to modify markups and attributes:

If you want to add some custom CSS or JS code to the child theme, you need to add them in jupiterx-child/assets/less/style.less and jupiterx-child/assets/js/script.js files.

If you added any CSS snippet in the style.less file and realized it is not working, it may have different reasons, but most probably, you need to Flush the assets cache in Jupiter X -> Customizer -> Settings once to see the effect.

Also, if you wish to add any CSS snippet to the style.less file in jupiterx-child/assets/less/ directory, you need to make sure these codes exist in your child theme’s functions.php file:

jupiterx_add_smart_action( 'wp_enqueue_scripts', 'jupiterx_child_enqueue_scripts', 8 );

function jupiterx_child_enqueue_scripts() {

	// Add the theme style as a fragment to have access to all the variables.
	jupiterx_compiler_add_fragment( 'jupiterx', get_stylesheet_directory_uri() . '/assets/less/style.less', 'less' );

	// Add the theme script.
	wp_enqueue_script('jupiterx-child', get_stylesheet_directory_uri() . 'https://d34b8fs2z18t5a.cloudfront.net/assets/js/script.js', [ 'jquery' ], '', true );
}

Note: Avoid adding CSS snippets in jupiterx-child/style.css because it is not being enqueued to your pages by default. Add them in jupiterx-child/assets/less/style.less and flush the assets in the control panel to see it’s working.

Note: Parent Jupiter X must be installed before installing the child theme.

Note: When you activate the child theme, the Customizer settings need to be reconfigured in Appearance > Customizer as Customizer saves parent and child theme settings differently.

Did this answer your question?