How to Include JavaScript & CSS in WordPress

When we are customizing any wordpress theme using child theme at some time we need to enqueue any external CSS or JavaScript in site. In this case we can best way to include css and JavaScript in functions.php file. We can enqueue the JavaScript or CSS using wp_enqueue_script() or wp_enqueue_style() functions.

CSS

You can enqueue your css in functions.php file using wp_enqueue_style() function.

<?php
 wp_enqueue_style( $handle, $src, $deps, $ver, $media );
?>

You can include these parameters:

• $handle is simply the name of the stylesheet.
• $src is where it is located. The rest of the parameters are optional.
• $deps refers to whether or not this stylesheet is dependent on another stylesheet. If this is set, this stylesheet will not be loaded unless its dependent stylesheet is loaded first.
• $ver sets the version number.
• $media can specify which type of media to load this stylesheet in, such as ‘all’, ‘screen’, ‘print’ or ‘handheld.’

If you want to include custom-style.css file in folder css in your child theme directory. You can write below in functions.php file.

<?php
  wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/css/custom-style.css',false,'1.5','all');
?>

JavaScript

You must load Javascript file using wp_enqueue_script() function. Syntax of wp_enqueue_script() is same like to using wp_enqueue_script().

<?php
  wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);
?>

• $handle is the name for the script.
• $src defines where the script is located.
• $deps is an array that can handle any script that your new script depends on, such as jQuery.
• $ver lets you list a version number.
• $in_footer is a boolean parameter (true/false) that allows you to place your scripts in the footer of your HTML document rather then in the header, so that it does not delay the loading of the DOM tree.

You should enqueue custom.js like this in your child theme:

<?php
  wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom.js', array ( 'jquery' ), 1.1, true);
?>

Combining Enqueue Example

The best way to combine all css and javascript in a single function using wp_enqueue_scripts WordPress action. It will look like below example. Put below code in functions.php file and move .css and .js file into “js” and “css” folder of child theme.

<?php
 add_action('wp_enqueue_scripts', 'cxc_enqueue_my_styles_scripts');

function cxc_enqueue_my_styles_scripts() {

	/* Enqueue google font & bootstrap css */
	wp_enqueue_style('font-maven-css', 'https://fonts.googleapis.com/css?family=Maven+Pro:400,500,700');
	wp_enqueue_style('bootstrap-css', get_stylesheet_directory_uri() . '/css/bootstrap.css');

	/* Enqueue bootstrap & custom script */
	wp_enqueue_script('bootstrap-script', get_stylesheet_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '1.0.0', true);
	wp_enqueue_script('custom-script', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), '1.0.0', true);

	/* Localize a registered custom-script with Ajax URL for a JavaScript variable. */
	wp_localize_script('custom-script', 'myAjax', array( 'ajaxurl' => admin_url('admin-ajax.php')));
}
?>

Load CSS File on WordPress Admin

Sometime you want to load CSS and JavaScript in all admin pages for any customization. You can do that using admin_enqueue_scripts action. You can enqueue script and style using below code.

<?php
add_action( 'admin_enqueue_scripts', 'cxc_enqueue_my_styles_scripts_in_admin' );

  function cxc_enqueue_my_styles_scripts_in_admin() {
    wp_enqueue_style( 'custom-admin-css', get_stylesheet_directory_uri() . '/css/custom-admin-style.css');
    wp_enqueue_script( 'custom-admin-script', get_stylesheet_directory_uri() . '/js/custom-admin.js', array('jquery'), '1.0.0', true );
}
?>

Load CSS File from Plugin on WordPress Admin

<?php
add_action( 'admin_enqueue_scripts', 'cxc_enqueue_my_styles_scripts_in_admin_from_plugin' );

function cxc_enqueue_my_styles_scripts_in_admin_from_plugin() {
	wp_enqueue_style( 'custom-admin-css', plugins_url('custom-admin-style.css', __FILE__) );
}
?>