How to Embed CSS Stylesheets and jQuery Files to WordPress
March 10, 2016

How to Embed CSS Stylesheets and jQuery Files to WordPress

Know How WordPress


This is a post that will teach you how to embed CSS stylesheets and jQuery files to WordPress. I am assuming that you have already converted your web design onto HTML/CSS format and have a little knowledge of PHP.

The Function File

A Little Introduction

The functions.php is one of the most important file for your WordPress theme. It specifies what your WordPress theme can do. All custom functions should be defined here unless you are familiar with your own mechanism.

Defining the Function

First, we need to define the function. I have define it as ravingcode_scripts. You can basically call the function anything you want. As you can see, we check to see if the function called ravingcode_scripts has already exists. If not, then proceed inside the function.

Right before we close our if statement, you will see the line add_action( ‘wp_enqueue_scripts’, ‘ravingcode_scripts’);. The add_action is a built-in function from WordPress. It tells WordPress when should it call the ravingcode_scripts function.

// check to see if ravingcode_scripts exists.
if ( ! function_exists( 'ravingcode_scripts' ) ) :
  function ravingcode_scripts() {
    // your code goes here
  }
  add_action( 'wp_enqueue_scripts', 'ravingcode_scripts' );
endif;

How to Embed CSS Stylesheets

A WordPress theme can have more than one CSS stylesheet. Below is how you can add different kinds of CSS stylesheets (Google font, bootstrap, font icons and your custom stylesheet) into the functions.php file.

The wp_enqueue_style is a built-in function from WordPress. Refer here for a list of parameters available.

// Load the stylesheets.
wp_enqueue_style( 'roboto', 'https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,500italic' );
wp_enqueue_style( 'bootstrap', get_stylesheet_directory_uri() . '/css/bootstrap.css' );
wp_enqueue_style( 'font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' );
wp_enqueue_style( 'master', get_stylesheet_directory_uri() . '/css/styles.css' );

How to Embed jQuery Files

The wp_register_script is very similar to the wp_enqueue_style function except that this is meant for jQuery files instead. Refer here for a list of parameters available.

There is another additional step when embedding jQuery files. Once we have register the scripts, we need to enqueue the scripts. We use the wp_enqueue_script function to enqueue jQuery files.

// Register scripts.
wp_register_script( 'bootstrap-js', get_stylesheet_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ), false, true );
wp_register_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ), false, true );

// Load the scripts.
wp_enqueue_script( 'bootstrap-js' );
wp_enqueue_script( 'custom-script' );

The Entire Block of Code

Below is how the block of code should look like.

if ( ! function_exists( 'ravingcode_scripts' ) ) :
    function ravingcode_scripts() {

        // Register scripts.
        wp_register_script( 'bootstrap-js', get_stylesheet_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ), false, true );
        wp_register_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ), false, true );

        // Load the scripts.
        wp_enqueue_script( 'bootstrap-js' );
        wp_enqueue_script( 'custom-script' );

        // Load the stylesheets.
        wp_enqueue_style( 'roboto', 'https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,500italic' );
        wp_enqueue_style( 'bootstrap', get_stylesheet_directory_uri() . '/css/bootstrap.css' );
        wp_enqueue_style( 'font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' );
        wp_enqueue_style( 'master', get_stylesheet_directory_uri() . '/css/styles.css' );
	}
    add_action( 'wp_enqueue_scripts', 'ravingcode_scripts' );
endif;

Congratulations! All your CSS stylesheets and jQuery files have been added successfully.


Leave a Reply

Your email address will not be published. Required fields are marked *