Installing the Child Theme for JupiterX

Customizing your website is a creative process, and for those who like to add a personal touch to theme files within WordPress, a child theme is essential. A child theme allows you to implement your customizations without losing them with each theme update. In this article, we will walk you through the steps to install a child theme for JupiterX. Before diving in, it's worth noting that for many customizations, a child theme may not be necessary. The powerful custom snippets feature within JupiterX often provides enough flexibility for code-level changes.

Why Use a Child Theme?

The child theme ensures your edits are preserved through updates. Changes to the code in the child theme will not be overwritten when the parent JupiterX theme is updated.

Getting Started

Make sure you have the jupiterx-child.zip file ready—it comes with your full theme package download from ThemeForest.

Installation Steps

In your WordPress dashboard, navigate to Appearance > Themes.
Click on the Add New Theme section.
Choose the Upload Theme button.
Click on Browse, select the jupiterx-child.zip file, and then click on Install Now. Wait for the installation to complete.
Once installed, click on Activate to switch to your child theme.

Critical Line: Your child theme’s functions.php must include the following line. Do not remove it:

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

We provide some example functions and styles in the functions.php file, disabled by default. Uncomment (remove // ) the necessary lines to activate them.

Adding Custom CSS or JS

To incorporate custom CSS or JavaScript:

For CSS, add to the jupiterx-child/assets/less/style.less file.
For JavaScript, include it within jupiterx-child/assets/js/script.js .

Important Tips for Custom CSS:

After adding CSS to style.less , you might need to Flush the assets cache. Go to JupiterX > Settings > Regenerate Assets to ensure the changes take effect.
The following code snippet must be present in your functions.php to enqueue your LESS and JS files correctly:

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

function jupiterx_child_enqueue_scripts() {
    // Add theme style for access to all the variables.
    jupiterx_compiler_add_fragment( 'jupiterx', get_stylesheet_directory_uri() . '/assets/less/style.less', 'less' );

    // Add theme script.
    wp_enqueue_script('jupiterx-child', get_stylesheet_directory_uri() . '/assets/js/script.js', array('jquery'), '', true );
}

Avoid Direct style.css Edits: Refrain from adding CSS to jupiterx-child/style.css as it is not enqueued by default. Use the style.less file and flush assets afterward to see your changes in action.

Prerequisites:

The parent JupiterX theme and JupiterX Core plugin must be installed and activated before setting up the child theme.

Customizer Settings:

When switching to the child theme, remember that you may need to reconfigure your Customizer settings found under Appearance > Customizer, as settings for parent and child themes are saved separately.

In conclusion, using a child theme with JupiterX protects your customizations and makes your update process worry-free. The initial setup is quick and straightforward, ensuring that you can focus on the creative aspect of developing your site while maintaining upgrade compatibility. If you encounter any issues or have further questions, our support team is always ready to assist you.