Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Posted by danielcroft
danielcroft
7,438 Points

Linking styles and JS in wordpress functions

// Load the Theme CSS
    function theme_styles() {
        wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'fwslider', get_template_directory_uri() . '/css/fwslider.css' );
        add_action( 'wp_enqueue_scripts', 'theme_styles' );
        }
    //Load the Theme JS
        function theme_js() {
        wp_register_script('fwslider', get_template_directory_uri() . '/js/fwslider.js', array('jquery'), '', true );
        add_action ('wp_enqueue_scripts', 'theme_js');
        }
        wp_enqueue_script ('theme.js', get_template_directory_uri() . '/js/theme.js', array('jquery'), '', true );

This is my code, but i cant find where i have gone wrong as its not showing up in the source like it should. Can anyone help me?

danielcroft
danielcroft
7,438 Points

I have put it in code pen to it is easier to read

http://codepen.io/anon/pen/IBbrD

1 Answer

Khemraj Thapa
Khemraj Thapa
8,885 Points
Khemraj Thapa
Khemraj Thapa
8,885 Points

Hi daniel, just put add_action from the themes css function and put the wp_enqueue inside themes js function.. so the correct code should look like below and it will work out.. 

  // Load the Theme CSS
    function theme_styles() {
    wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'fwslider', get_template_directory_uri() . '/css/fwslider.css' );

    }
    add_action( 'wp_enqueue_scripts', 'theme_styles' );

//Load the Theme JS
    function theme_js() {
    wp_register_script('fwslider', get_template_directory_uri() . '/js/fwslider.js', array('jquery'), '', true );
    wp_enqueue_script ('theme.js', get_template_directory_uri() . '/js/theme.js', array('jquery'), '', true );

    }
    add_action('wp_enqueue_scripts', 'theme_js');
danielcroft
danielcroft
7,438 Points

Hey, thanks ill try this out soon :)

Zac Gordon
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

Yeah, we generally register or enqueue the scripts and styles in the functions and then use add_action to tell WordPress to call our functions when it loads the wp_head() function.

danielcroft
danielcroft
7,438 Points

Ok thanks i understand this now. Slowly chipping away at wordpress and enjoying it. Your videos help a lot. Thank you