The Complete Guide To Adding jQuery and CSS Into WordPress

Include Scripts and CSS into WordPress

 

Loading jQuery, Javascript and CSS into your WordPress Website correctly can be a pain in the neck. The confusion is due to the several different possible ways to load the scripts / css, then it depends on if you are loading scripts / css via the functions.php file for a theme or within a plugin.

The two add_action hooks that will include Scripts/CSS into WordPress.

  • init: Ensures the Scripts & CSS always load on the front page of your Website (if using home.php, index.php or a template), along with every other ‘front end’ post, page and template style.
  • wp_enqueue_scripts: The “proper” hook method, which does not always work (bug?), based on how your WordPress is setup.

The examples below have all been tested on a WordPress Mutlsite Install, up to WordPress version: 3.4.2

Load the Google jQuery Library, while loading a Custom Theme jQuery and Stylesheet

The example below uses init on the add_action function. Init is used for two reasons, first because we are deregistering the default WordPress jQuery Library to load the Google jQuery Library, and second to make sure the scripts load on the front page of the Website.

  • The wp_deregister_script, wp_enqueue_script and wp_enqueue_style functions are wrapped with an if statement that forces the scripts to only load on the Website itself and not the WordPress Admin Area, which is due to the use of init.
  • !is_admin: The ! exclamation point is like say, is not. This would read: Is not the admin area.
/** Google jQuery Library, Custom jQuery and CSS Files */
function myScripts() {
		wp_register_script( 'google', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js' );
		wp_register_script( 'default', get_template_directory_uri() . '/jquery.js' );
		wp_register_style( 'default', get_template_directory_uri() . '/style.css' );
	if ( !is_admin() ) { /** Load Scripts and Style on Website Only */
		wp_deregister_script( 'jquery' );
		wp_enqueue_script( 'google' );
		wp_enqueue_script( 'default' );
		wp_enqueue_style( 'default' );
	}
}
add_action( 'init', 'myScripts' );

Uses the default WordPress jQuery library, while loading a themes custom jQuery and CSS files.

Adding jQuery and CSS to a theme is rather straight forward.

  • Line 3: The use of array(‘jquery’) tells WordPress that the jquery.js file depends on the WordPress jQuery Library file, thus the jquery.js file will load after the WordPress jQuery Library file.
/** Add Custom jQuery and CSS files to a Theme */
function myScripts() {
		wp_register_script( 'default', get_template_directory_uri() . '/jquery.js', array('jquery'), '' );
		wp_register_style( 'default', get_template_directory_uri() . '/style.css' );
	if ( !is_admin() ) { /** Load Scripts and Style on Website Only */
		wp_enqueue_script( 'default' );
		wp_enqueue_style( 'default' );
	}
}
add_action( 'init', 'myScripts' );

Add a print.css file to your WordPress Theme

For Printer Friendly CSS Files.

  • Line 3: At the end of this line is ‘print’, this is the media screen call that tells the print.css file to load when the printer friendly version of the Website is loaded.
/** Adding a Print Stylesheet to a Theme */
function myPrintCss() {
		wp_register_style( 'print', get_template_directory_uri() . '/print.css', '', '', 'print' );
	if ( !is_admin() ) { /** Load Scripts and Style on Website Only */
		wp_enqueue_style( 'print' );
	}
}
add_action( 'init', 'myPrintCss' );

Using wp_enqueue_scripts instead of init

If you load scripts on a unique posts or pages, then wp_enqueue_scripts should be used instead of init. Using wp_enqueue_scripts will only load the Scripts / CSS on the outside of the Website and not the Admin Area, so the !is_admin() if statement is not needed.

Using is_single() to add jQuery and CSS to a WordPress Post

Line 3: Replace # with the Posts
ID number to make the Scripts and CSS only load on the called post. Alternatively you can use is_single() without the Post ID to load the Scripts / CSS on all posts.

/** Adding Scripts To A Unique Post */
function myScripts() {
	if ( is_single(#) ) { /** Load Scripts and Style on Posts Only */
		/** Add jQuery and/or CSS Enqueue */
	}
}
add_action( 'wp_enqueue_scripts', 'myScripts' );

Using is_page() to add jQuery and CSS to a WordPress Post

Line 3: Replace # with the Pages ID number to make the Scripts and CSS only load on the called page. Alternatively you can use is_page() without the Page ID to load the Scripts / CSS on all pages.

/** Adding Scripts To A Unique Page */
function myScripts() {
	if ( is_page(#) ) { /** Load Scripts and Style on Pages Only */
		/** Add jQuery and/or CSS Enqueue */
	}
}
add_action( 'wp_enqueue_scripts', 'myScripts' );

Using admin_enqueue_scripts to add Scripts to the WordPress Admin Area

The example below will load the Scripts and CSS globally throughout the WordPress Admin Area. This method is not recommended for Plugins, unless the Plugin is rebuilding the entire Admin Area look.

  • Line 10: The admin_enqueue_scripts hook is used instead of init or wp_enqueue_scripts.
  • Lines 5 & 6: If you are creating a custom WordPress Admin Area then you may want to disable the default WordPress CSS Calls.
/** Adding Scripts To The WordPress Admin Area Only */
function myAdminScripts() {
	wp_register_script( 'default', get_template_directory_uri() . '/jquery.js', array('jquery'), '' );
	wp_enqueue_script( 'default' );
	//wp_deregister_style( 'ie' ); /** removes ie stylesheet */
	//wp_deregister_style( 'colors' ); /** disables default css */
	wp_register_style( 'default', get_template_directory_uri() . '/style.css',  array(), '', 'all' );
	wp_enqueue_style( 'default' );
}
add_action( 'admin_enqueue_scripts', 'myAdminScripts' );

How to add jQuery and CSS to the WordPress Login Page

The example below allows you to customize the look of the WordPress Login Page.

  • Line 6: I could not figure out how to register/enqueue the CSS file on the login page so this line manually adds the Stylesheet.
  • Lines 10-14: This function removes the default WordPress Stylesheets.
/** Adding Scripts To The WordPress Login Page */
function myLoginScripts() {
	wp_register_script( 'default', get_template_directory_uri() . '/jquery.js', array('jquery'), '' );
	wp_enqueue_script( 'default' );
?>
	<link rel='stylesheet' id='default-css' href='<?php echo get_template_directory_uri() . '/style.css';?>' type='text/css' media='all' />
<?php }
add_action( 'login_enqueue_scripts', 'myLoginScripts' );
/** Deregister the login css files */
function removeScripts() {
	wp_deregister_style( 'wp-admin' );
	wp_deregister_style( 'colors-fresh' );
}
add_action( 'login_init', 'removeScripts' );

Adding Scripts and CSS Into WordPress Plugins

Loading Scripts and CSS files is basically the same when done within a WordPress plugin. The main difference is url to the script / css file. Instead of using get_template_directory_uri you will use plugins_url, because the files are located within the called plugins directory.

Loading jQuery and CSS from within a WordPress Plugin

This example loads the Scripts and CSS throughout a Websites front end.

/** Global Plugin Scripts for Outside of Website */
function pluginScripts() {
	wp_register_script( 'plugin', plugins_url( 'jquery.js' , __FILE__ ), array('jquery'), '' );
	wp_register_style( 'plugin', plugins_url( 'style.css' , __FILE__ ) );
	if ( !is_admin() ) { /** Load Scripts and Style on Website Only */
		wp_enqueue_script( 'plugin' );
		wp_enqueue_style( 'plugin' );
	}
}
add_action( 'init', 'pluginScripts' );

Loading jQuery and CSS for the WordPress Admin Area within a Plugin

If you need the Scripts and CSS to load throughout the Admin Area, use admin_enqueue_scripts instead of init.

/** Global Plugin Scripts for The WordPress Admin Area */
function pluginScripts() {
	wp_register_script( 'plugin', plugins_url( 'jquery1.js' , __FILE__ ), array('jquery'), '' );
	wp_enqueue_script( 'plugin' );
	wp_register_style( 'plugin', plugins_url( 'style1.css' , __FILE__ ) );
	wp_enqueue_style( 'plugin' );
}
add_action( 'admin_enqueue_scripts', 'pluginScripts' );

Loding jQuery and CSS for a WordPress Plugins Setting Page

This example loads the needed Scripts and CSS on a plugins settings page only, this keeps the files from loading on other Admin Area pages that do not need the files.

  • Line 3: Modify the page=name to match your plugins settings page name.
/** Adding Scripts On A Plugins Settings Page */
function pluginScripts() {
	if ( $_GET['page'] == "plugin_page_name.php" ) {
		wp_register_script( 'plugin', plugins_url( 'jquery.js' , __FILE__ ), array('jquery'), '' );
		wp_enqueue_script( 'plugin' );
		wp_register_style( 'plugin', plugins_url( 'style.css' , __FILE__ ) );
		wp_enqueue_style( 'plugin' );
	}
}
add_action( 'admin_enqueue_scripts', 'pluginScripts' );

Moving Google’s jQuery Library and a custom jQuery File to the WordPress Footer

You can not move the default WordPress jQuery Library to the footer, but you an move your own custom jquery file and the Google Library jQuery file to the footer. Do not move CSS files to the Footer.

  • Lines 3 & 4: The ‘true’ defined at the end of each line tells WordPress to load the script at the footer.
/** Moves jQuery to Footer */
function footerScript() {
		wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"), false, '', true );
		wp_register_script( 'default', get_template_directory_uri() . '/jquery.js', false, '', true );
	if ( !is_admin() ) { /** Load Scripts and Style on Website Only */
		wp_deregister_script( 'jquery' );
		wp_enqueue_script( 'jquery' );
		wp_enqueue_script( 'default' );
	}
}
add_action( 'init', 'footerScript' );

How to add custom jQuery and CSS based on Roles and Capabilities

If you have guest authors, other admins, or subscribers you may want to display custom colors or unique messages to them using jQuery. To do this you will use current_user_can to determine the Roles and Capabilities of the logged in user.

The following three examples would load the Scripts and CSS throughout the Website, if the user is logged in. Wrap your enqueue_script calls with !is_admin() to limit the display to the outside of the Website or the hook admin_enqueue_scripts with the add_action to limit the display to the Admin Area only.

Custom jQuery and CSS Files for Admins and Super
Admins that can Edit Posts

Works only for Super Admins and Admins of a Website.

/** Add CSS & jQuery based on Roles and Capabilities */
function myScripts() {
	if ( current_user_can('edit_posts') ) {
		/** Add jQuery and/or CSS Enqueue */
	}
}
add_action( 'init', 'myScripts' );

Custom jQuery and CSS Files for all Logged In users

Covers every type of registered user that is also logged in.

/** Admins / Authors / Contributors /  Subscribers */
function myScripts() {
	if ( current_user_can('read') ) {
		/** Add jQuery and/or CSS Enqueue */
	}
}
add_action( 'init', 'myScripts' );

Loading custom jQuery and CSS Files for all Logged In users other than Admins

Covers every type of registered user that is also logged in, othe than Admins and Super Admins.

/** Disable for Super Admins / Admins enable for Authors / Contributors /  Subscribers */
function myScripts() {
	if ( current_user_can('read') && !current_user_can('edit_users') ) {
		/** Add jQuery and/or CSS Enqueue */
	}
}
add_action( 'init', 'myScripts' );

Final Note

The above examples may be stacked into a single function, if the add_action is the same. Another words, you can use multiple if statements within a function to split up your Script and CSS calls, such as: if_admin, !if_admin, is_page, is_single and current_user_can because each use the same add_action of init.