0

I have a child theme and a quite empty function.php. The CSS from the parent is picked up by the child theme, but the whole JS section from the parent theme is not rendered in the DOM at all. (I am quite new to WP dev). Did I miss something? What I am doing wrong?

This is my basic file structure of the child-theme:

/themes
  /main-theme
  /main-theme-child
    /js
       custom_script.js
    functions.php
    screenshot.png
    style.css

I created the child theme by a plugin (Child Theme Configurator)

functions.php


<?php

// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;

// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED - Do not modify or remove comment markers above or below:
if ( !function_exists( 'chld_thm_cfg_locale_css' ) ):
    function chld_thm_cfg_locale_css( $uri ){
        if ( empty( $uri ) && is_rtl() && file_exists( get_template_directory() . '/rtl.css' ) )
            $uri = get_template_directory_uri() . '/rtl.css';
        return $uri;
    }
endif;
add_filter( 'locale_stylesheet_uri', 'chld_thm_cfg_locale_css' );

if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
    function chld_thm_cfg_parent_css() {
        wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( 'bootstrap','font-awesome','flaticon','animate','hover','owl-theme','jquery-ui','fancybox' ) );
    }
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 );

// END ENQUEUE PARENT ACTION

function custom_enqueue_scripts() {
    wp_enqueue_script( 'consultox-main-script', get_stylesheet_directory_uri().'/js/custom_script.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );
  • How get I all the basic functionality of the parent theme working?
  • How can I get my custom javascript loaded?

If you need more information I will edit this post.

Thank you very much in advance!

0

The function get_template_directory_uri always returns the directory of the PARENT THEME, even if in a child theme, while the function get_stylesheet_directory_uri() returns the directory of your child theme.

I guess that your scripts are enqueued in the parent theme using the "get_stylesheet_directory_uri" method, meaning the javascript won't be found in the child theme.

I would suggest changing ALL the enqueues in the parent AND the child (but not the main style css) to using get_theme_file_uri(file) like this:

function custom_enqueue_scripts() {
    wp_enqueue_script( 'consultox-main-script', get_theme_file_uri('/js/custom_script.js'), array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );

get_theme_file_uri works by looking into the current theme for the searched file, and if it doesn't find it, looks for the file in the parent theme (if there is one). This way, the correct styles and scripts are loaded in your parent AND your child theme ;)

Happy Coding!

1
  • If this were the case the scripts would still be rendered in the DOM, just with invalid URLs that won't load. OP suggests that they're not showing in the DOM at all. – Jacob Peattie Feb 22 at 6:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.