How To Include CSS & JavaScript To WordPress Themes Properly

When building WordPress themes from scratch or creating child themes, you need to include JavaScript and CSS files properly. There are many ways to include JavaScript and CSS files in WordPress themes but WordPrss has proper guidelines.

Always follow best practices and recommended methods to include JavaScript and CSS files to your WordPress themes.

For example, I have built a WordPress child theme. Parent theme is TwentySixteen. I used the following code to register stylesheets files.

function theme_enqueue_styles() {

$parent_style = 'parent-style';

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );

wp_enqueue_style( 'my-child-fontawesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' );

wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style )
);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

As you can see, I have included 3 stylesheets, first, we have parent theme’s stylesheet, then we have Font Awesome stylesheet and finally child theme’s stylesheet.

Loading Main Stylesheet

If you want to load the main stylesheet in your WordPress theme, you can add following code in your theme’s functions.php file.

wp_enqueue_style( 'style', get_stylesheet_uri() );

So if you wanted to load a stylesheet named “slider.css” in a folder named “CSS” in you theme’s root directory, you would use:

wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all');

How to load JavaScript files properly in WordPress themes?

Any additional JavaScript files required by a theme should be loaded using wp_enqueue_script. This ensures proper loading and caching, and allows the use conditional tags to target specific pages.

wp_enqueue_script uses a similar syntax to wp_enqueue_style.

Your enqueue function may look like this:

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

How to Combine Enqueue Functions in WordPress Themes

It is best to combine all enqueued scripts and styles into a single function, and then call them using the wp_enqueue_scripts action. This function and action should be located somewhere below the initial setup (performed above).

You can see an example below.

function add_theme_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );

wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all');

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

Reference & resources

To learn more you can visit Including CSS & JavaScript at WordPress Developers handbook page.

If you are a beginner developer and want to learn more about WordPress theme development, you should visit WordPress Theme Handbook.

Who Should Read WordPress Theme Handbook?

The Theme Developer Handbook is a self-contained resource to help you learn the basics of WordPress theme development. You should read this handbook to accomplish a number of things:

• develop a child theme meant to work with a parent theme
• create a new theme based on an existing one
• understand the inner workings of themes in general
• develop a theme based on nothing but your imagination.