Linking JS and CSS in WordPress

I have some widgets which create some nice effects for my html websites and I'd like to be able to use them in WordPress. I was told I just need to add the js and css links to the header.php file.

Initially, that sounded simple enough, but I've also been told that it's important to create child themes. And, I believe the header.php file resides in the main theme directory. Then, there is the issue of where the js and css files/directory need to reside. I believe they would reside in the child theme directory.

So, would I put the js and css links in the header.php file in the main theme directory? If my theme was in the "abc" directory and my child theme was in the "def" directory, how do I designate the links? Would it be ../def/... in the header.php file?

TIA

  • Vaughan

    Hi @prb@skyhoundz.com,

    Hope you're well?

    when you create a child theme, you would simply copy the header.php file from the parent theme to the child theme folder, the header.php from the child theme will then be used instead of the header.php in the parent theme.

    so you could just add the js directly in the <head> tags of the header.php

    But an alternative would be to use the proper queuing functions in wp.

    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    http://codex.wordpress.org/Function_Reference/wp_enqueue_style

    The above links should hopefully get you going.

    Hope this helps

  • Vaughan

    Hi,

    The examples are on the link I provided earlier. http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    So you would place the following in your child theme functions.php

    function my_child_theme_scripts() {
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js' );
    }

    add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );

    so replace script-name with the name of the javascript (call it what you want)

    the path /js/example.js

    This would assume that your .js file is located in a subfolder called js

    /wp-content/themes/your-child-theme/js/example.js

    Hope this helps

  • [email protected]

    Thank you Vaughan. Here is where things stand. I've gotten some help to get this far, but now I'm lost as to what I'm doing wrong. It looks like greek to me. I'm hoping that you speak the language. :slight_smile:

    I have a child theme named "prb". The file structure looks like this:

    prb (directory)
    functions.php
    prb_css
    prb_img
    prb_js
    style.css

    The enqueue script in my functions.php file reads as follows:

    <?php
    /*
    * Simple Child Theme generated by Ultimatum Framework
    */
    $theme = array(
    'theme_name' => 'PRB',
    'theme_slug' => 'prb',
    );
    require_once( get_template_directory() . '/wonderfoundry/wonderworks.php' );

    function ult_child_script_style_loader() {
    wp_register_style( 'custom-style', get_stylesheet_directory_uri() . '/css/prb.css', false, '1.0.0' );
    wp_enqueue_style( 'custom-style' );
    }

    add_action( 'wp_enqueue_scripts', 'ult_child_script_style_loader', 99 );

    function child_add_scripts() {
    wp_register_script('child-js',get_stylesheet_directory_uri() . '/js/p7HLSscripts.js',false,'1.0',true);
    wp_enqueue_script( 'child-js' );
    }

    add_action( 'wp_enqueue_scripts', 'child_add_scripts' );

  • Ash

    Hello @[email protected]

    I hope you are well today.

    In this line: wp_register_style( 'custom-style', get_stylesheet_directory_uri() . '/css/prb.css', false, '1.0.0' ); You have used the folder "css" but in your folder structure the correct folder name is "prb_css". Same for "prb_js".

    Instead of above code try this:

    <?php
    /*
    * Simple Child Theme generated by Ultimatum Framework
    */
    $theme = array(
    'theme_name' => 'PRB',
    'theme_slug' => 'prb',
    );
    require_once( get_template_directory() . '/wonderfoundry/wonderworks.php' );
    
    function ult_child_script_style_loader() {
    	wp_register_style( 'custom-style', get_stylesheet_directory_uri() . '/prb_css/prb.css', false, '1.0.0' );
    	wp_enqueue_style( 'custom-style' );
    	wp_register_script('child-js',get_stylesheet_directory_uri() . '/prb_js/p7HLSscripts.js',false,'1.0',true);
    	wp_enqueue_script( 'child-js' );
    }
    add_action( 'wp_enqueue_scripts', 'ult_child_script_style_loader', 99 );

    Hope it helps :slight_smile: Please feel free to ask more question if you have.

    Cheers
    Ash

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.