Register with your Envato account

Support forums

Homepage Support Callisto WooCommerce How-To: Modifying theme with WordPress Child theme

How-To: Modifying theme with WordPress Child theme

Homepage Support Callisto WooCommerce How-To: Modifying theme with WordPress Child theme

This topic contains 0 replies, has 1 voice, and was last updated by  planetshine 3 years, 5 months ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #2373

    planetshine
    Keymaster

    Child themes are a great WordPress feature, that should be used by everyone. If you wish to make any modifications to the themes code files – edit styling, add new functions etc. then you must always use a child theme. The reason for this is simple – when you edit code files using a child theme, you can still update the parent theme to the latest version when an update is released. Otherwise you would lose your modifications every time you make an update.

    Your child theme will include all of the features and functions of the parent theme. Nothing will change apart from the fact that you can now make changes with ease.

    How to activate a child theme

    Every Planetshine theme comes with a child theme template included. Open the folder you downloaded from Themeforest and inside it you’ll find a zip with the word “child” in it. For example “polaris-child.zip” or “goliath-child.zip”.

    Take this zip, upload it to your WordPress just like you would any other theme and activate it. Make sure you have installed the parent theme on the same WordPress or otherwise none of this will work.

    Now you have a working child theme, that you can use modify parent theme files.

    Editing the CSS code of parent theme

    In some cases you might want to make modifications in theme’s styles that are not possible with the Visual Editor alone. In these cases you need to write CSS code. For small changes we recommend that you either use the Custom CSS box that can be found in theme settings or use SiteOrigin CSS plugin.

    If however you need to do a lot of changes, it’s best to you a separate file for this. All child themes code with style.css file that you can use for this purpose. The theme will include this file after all the main CSS files, so you should have no problem overriding the default styling.

    Overriding theme template files

    If you wish to make changes to one of the theme template files you can simply copy it from the main theme into the child theme. WordPress will recognize this and use the version found inside the child theme. For example, if you want to change something in the footer, then copy the file footer.php from parent theme into the child theme. Then make your modifications.

    Only files that are inside the main theme folder ( the first level where files like header.php and footer.php are located) and files inside /theme/templates/ folder can be overridden like this. When overriding files from /theme/templates/ make sure that you create the same folder structure inside you child theme – create folder “theme” and inside that place folder “templates“.

    Overriding theme Javascript files

    It’s not possible to directly override Javascript files so another method must be used. You need to use WordPress wp_dequeue_script function to first remove the file that you wish to replace and then use wp_enqueue_script to add the version you wish to use.

    See this example for replacing the main theme.js file. You would have to paste this in the functions.php file of your child theme. If the script you’re replaching is localized using WordPress wp_localize_script function (like the main theme javascript file usually is) you would have to also copy the code used for localization.

    <?php // hook in late to make sure the parent theme's registration
    // has fired so you can undo it. Otherwise the parent will simply
    // enqueue its script anyway.
    add_action('wp_enqueue_scripts', 'plsh_child_script_override', 100);
    function plsh_child_script_override()
    {
    wp_dequeue_script('plsh-theme');
    wp_enqueue_script('child-plsh-theme', get_stylesheet_directory_uri().'/assets/js/your-javascript-file.js', array('jquery'));
    }
Viewing 1 post (of 1 total)
You must have active support license to create new replies.

Learn more about Renewing Item Support and Themeforest Item Support Policy.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close