How to call css stylesheets and js files into a custom WordPress theme

Question

I'm developing a custom WordPress theme from scratch and now I faced a problem with loading css and js files. I have searched everywhere to see how can I be able to load those files and I did this on my functions.php file:

    <?php 
function catalog(){
    wp_enqueue_style('bootstrap', get_template_directory_uri() . 'css/bootstrap.min.css');
    wp_enqueue_style('style', get_stylesheet_uri());
    wp_register_script( 'custom-script', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ) );
    wp_register_script( 'custom-script', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array( 'jquery' ) );
    wp_register_script( 'custom-script', get_template_directory_uri() . '/js/jquery.js', array( 'jquery' ) );
    wp_register_script( 'custom-script', get_template_directory_uri() . '/js/masonry.pkgd.min.js', array( 'jquery' ) );
    wp_register_script( 'custom-script', get_template_directory_uri() . '/js/offcanvas.js', array( 'jquery' ) );
    wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts','catalog');
register_nav_menus(array(
    'primary' => __('Primary Menu'),
    'footer' => __('Footer Menu'),
));
?>

So I don't know whats really going wrong here cause I've checked everything and it looks fine. Here's my folder structure:

theme_folder
            css
                  bootstrap.min.css
            images
            js
                  bootstrap.min.js
                  imagesloaded.pkgd.min.js
                  jquery.js
                  masonry.pkgd.min.js
                  offcanvas.js

But after all this I get this as result which means they have not beed loaded:

Correct me if I am wrong as its been quite sometime sense I worked with WordPress theme's wouldn't you want to use wp_register_script then run wp_enqueue_script? Again this is only off the top of my head, I could be totally wrong. — Dustin Snider
– Dustin Snider, Commented Dec 26, 2016 at 7:20

RRikesh · Accepted Answer · 2016-12-26 08:44:28Z

2

Problem You are register a script but not enqueue.

Solution: If you are register then you have to enqueue. wp_enqueue_style() - For css enqueue wp_enqueue_script()- For JS enqueue

Updated code

 <?php 
function catalog(){
    wp_enqueue_style('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
    wp_enqueue_style('style', get_stylesheet_uri());
    wp_enqueue_script( 'custom-script-bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ) );
    wp_enqueue_script( 'custom-script-imgesload', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array( 'jquery' ) );
    wp_enqueue_script( 'custom-script-jquery', get_template_directory_uri() . '/js/jquery.js', array( 'jquery' ) );
    wp_enqueue_script( 'custom-script-masonry', get_template_directory_uri() . '/js/masonry.pkgd.min.js', array( 'jquery' ) );
    wp_enqueue_script( 'custom-script-offcanvas', get_template_directory_uri() . '/js/offcanvas.js', array( 'jquery' ) );
}
add_action('wp_enqueue_scripts','catalog');
register_nav_menus(array(
    'primary' => __('Primary Menu'),
    'footer' => __('Footer Menu'),
));
?>

Recommendation

Always Prefer CDN for css and js like jquery,bootstrap etc.

edited Dec 26, 2016 at 8:44

RRikesh

14.5k5 gold badges55 silver badges74 bronze badges

answered Dec 26, 2016 at 7:22

Vasim Shaikh

4,5522 gold badges25 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

RRikesh Over a year ago

You should also use different names, not the same custom-script in all wp_enqueue_script() calls.

Vasim Shaikh Over a year ago

Yes why not it more preferable

RRikesh Over a year ago

Else only the last javascript file with that name will be enqueued

Vasim Shaikh Over a year ago

please check again.

Vasim Shaikh Over a year ago

don't remove that style.css.This is theme not plugin.

|

Pravin Vavadiya · Accepted Answer · 2016-12-26 08:56:10Z

0

Try to something like this.

add css file in your template like below...

<link rel="stylesheet" href="<?php bloginfo('template_directory');?>/css/bootstrap.min.css">

edited Dec 26, 2016 at 8:56

answered Dec 26, 2016 at 7:22

Pravin Vavadiya

3,2171 gold badge19 silver badges34 bronze badges

Collectives™ on Stack Overflow

How to call css stylesheets and js files into a custom WordPress theme

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related