wp enqueue script - Child theme is not rendering parent and own javascripts (but css loaded properly, js not)

admin管理员组

文章数量:1122846

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!

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!

• child-theme
• wp-enqueue-script

Share Improve this question edited Feb 21, 2021 at 16:53 Jan asked Feb 21, 2021 at 16:00 JanJan 12911 silver badge44 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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!

本文标签：