override parent theme - wordpress

How to Override Parent Theme With a Child Theme

Posted by

You might wanna start setting up a child theme to make some changes. Usually, the free theme is meh and needs some updates. In my case, I was okay with everything except the ugly dropdown navigation.

In order to replace the parent theme’s components, you need to take the following steps:

  1. Create a child theme and enqueue the parent style first
  2. Dequeue the parent’s JS and enqueue new scripts
  3. Create template files in child theme to override those of the parent’s if necessary

Enqueue the parent style first

The active theme’s style.css will load automatically. But we need to make sure that the child theme stylesheet loads after the parent’s theme’s.

In order to do so, enqueue the parent stylesheet in child theme’s functions.php.

function remove_parents_scripts() {
    wp_dequeue_script('parent-script-name');
}
add_action('wp_enqueue_scripts', 'remove_parents_scripts');

Now your child theme’s style.css will override the parent’s stylesheet.

Dequeue the parent’s JS and enqueue new scripts

It’s alright if the first step override was enough. However, there are some components in the parent’s theme that uses JavaScript. In my case, it was the dropdown nav bar that ran on jQuery.

First, you need to find under which name the scripts are enqueued in the parents’ theme. Then, you will dequeue it by the script name.

function remove_parents_scripts() {
    wp_dequeue_script('parent-script-name');
}
add_action('wp_enqueue_scripts', 'remove_parents_scripts');

After dequeueing the parent’s script, you can create new scripts. It is easier if you copy and paste the parent’s script and edit it in a way you want. Now, you need to enqueue the script.

function child_scripts() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    wp_enqueue_script(
        'new-script-name',
        get_stylesheet_directory_uri() . '/assets/js/new-script.js',
        array( 'jquery' ),
        '20200901'
    );
    wp_localize_script(
        'new-script-name',
        'object-name',
        array
    );
}
add_action('wp_enqueue_scripts', 'child_scripts');

wp_enqueue_script takes four arguments. As in order, it takes name of the script, full URL of the script, and dependencies as array, and version as string. The date is usually put in as the version info like my example.

Also, if necessary, you might want to localize variables in the script. wp_localize_script takes three parameters: name of the script that will handle the data, variable name, and the data as array. In my case, the dropdown navigation needed a localized variable in the script for it to appear on the screen. So, I followed the rule and created my script that also needs a localized variable to work.

Override the template files

Just to be clear, the template files are a wordpress’ backbone such as header.php, footer.php, and so on. If you edit one of them from parent theme and save it in child theme, the child one will be rendered. This way, you can remove the copyright statement of the parent theme and present yours. In my case, I needed to make a few amends in header.php where the nav bar resides.

Thanks for reading.

Hope you enjoyed the article. If you have any question or opinion to share, feel free to write some comments.

Facebook Comments