how to call files in child theme?

by

One does not simply throw <link> (CSS) or <script> tags into the <head> of a WordPress theme.

The right way to do it: Register, enqueue … tadaa!

WordPress has the “Dependency API” for this task. It consists basically out of those public functions:

Then there’re aligning functions to deregister scripts or styles, get data from PHP to JS – for example to use them for localization or AJAX calls – and checks/Conditionals to see if a style or script was registered/enqueued.

How to use them

First, you need to make sure that your header.php file has the appropriate hook:

wp_head();

Then add function to your themes functions.php file, like explained on WP Make. As you can see, both scripts and files, use the wp_enqueue_scripts-hook.

add_action( 'wp_enqueue_scripts', 'wpse82474_load_styles' );
add_action( 'wp_enqueue_scripts', 'wpse82474_load_scripts' );
wpse82474_load_styles()
{
    wp_enqueue_style( /* etc. */ );
}
wpse82474_load_scripts()
{
    wp_enqueue_script( /* etc. */ );
}

The arguments

The main arguments are the following

 wp_enqueue_style( $handle, $src, $deps, $ver, $media );

In the real world (to speak: In your theme), you’ll use it like the following. The examples shows a script that has jQuery loaded as dependency (in other words: loaded before your enqueued file).

wp_enqueue_script(
     'my-theme-script'
    ,get_template_directory_uri().'/js/custom_script.js'
    ,array( 'jquery' )
);

Getting the path right

From within a childtheme you’d always want to use get_stylesheet_directory_uri() and from within a parent or “normal” theme, you’d use get_template_directory_uri().

Loading from a subfolder of your child theme would use a path like this:

$stylesheet_path = get_stylesheet_directory_uri().'/css/style.css';

Loading WP scripts & styles shipped with core

In case you want to load files that are already shipped with core, then you can simply enqueue them without and further arguments.

wp_enqueue_script( 'jquery' ); // Load jQuery

The same goes for each and every other script (or style) shipped with core, as you can read in Codex.

If you want to know if a script is already registered, there’s no need to look in core or search in Codex. Simply use wp_script_is() (or it’s equivalent for styles). Per default this checks the enqueue list, but you can also use registered or done as arguments.

wp_script_is( 'jquery', 'registered' ) AND wp_enqueue_script( 'jquery' );

Leave a Comment