How to include jQuery and CSS in WordPress – The WordPress Way

WordPress is now leading web development framework or CMS today to create stunning website, blog, portfolio and even e-Commerce site but before you can create stunning site you need to add themes and plugins on it or even customize site theme just to make it look good and elegant and here comes the problem, we don’t know if the plugins added jQuery and CSS correctly, I mean if the developer included it in WordPress way.

The advantages in including jQuery and CSS in the right way is that we can avoid compatibility and conflict problem and other developer can override and include their jQuery and CSS without any issue, so we can sure our site is running smoothly, today I will share you other technique on how to include jQuery and CSS in the right way.

Okay let’s start.

jQuery

Did you know that the latest WordPress has a built-in latest jQuery? Yes it has latest built-in jQuery; in fact it is jQuery versions 1.7.2.

So how can I easily include the built-in jQuery?

It’s easy, use the snippet below.

   wp_enqueue_script("jquery");

Yes, that’s it; we’re just calling WordPress jQuery.

Okay so you now know how to include built-in jQuery, the next step is to include multiple jQuery and CSS file in your theme or plugin.

jQuery and CSS

To include multiple jQuery and CSS file is easy too, have a look at the code below.

// register jquery and style on initialization
add_action('init', 'register_script');
function register_script(){
	wp_register_script( 'custom_jquery', plugins_url('/js/custom-jquery.js', __FILE__), array('jquery'), '2.5.1' );

	wp_register_style( 'new_style', plugins_url('/css/new-style.css', __FILE__), false, '1.0.0', 'all');
}

// use the registered jquery and style above
add_action('wp_enqueue_scripts', 'enqueue_style');
function enqueue_style(){
	wp_enqueue_script('custom_jquery');

	wp_enqueue_style( 'new_style' );
}

I’m pretty sure you already know wp_register_script(), wp_register_style(), wp_enqueue_script() and wp_enqueue_style() so I will leave you that 😉

Note: The jQuery and style we’re queuing above are displayed in all pages of your site.

So how can I only include specific jQuery or CSS in a page?

We’re going to divide this into two, first is the plugin and second is the page template, what actually the advantages of including jQuery or CSS only in specific page? Well, it’s simple the more file you’ve included in your page the more time it take to load ;).

Plugin

Okay in this example we’re going to include the style only in plugin settings page, here’s how to do it.

add_action( 'admin_init', 'register_admin_style' );	//register file during initialization
function register_admin_style() {
	wp_register_style( 'admin_style', plugins_url('/css/admin-style.css', __FILE__), false, '1.0.0', 'all' );
}
	//activate only in admin area
	function active_admin_styles() {
		wp_enqueue_style( 'admin_style' );
	}

add_action('admin_menu', 'add_sub_page');
function add_sub_page() {
	$page = add_submenu_page( '', __(), __(), 'manage_options', __FILE__, 'sub_page_callback' );

	//activate admin style here
	add_action( 'admin_print_styles-' . $page, 'active_nv_admin_styles' );
}

That’s it; we print style only if subpage is activated.

Page Template

The idea here is the same from above.

add_action( 'admin_init', 'register_admin_style' );
function register_admin_style() {
	wp_register_style( 'admin_style', plugins_url('/css/admin-style.css', __FILE__), false, '1.0.0', 'all' );
}

if ( is_page_template('portfolio.php') ) {	//activate only in portfolio page
	wp_enqueue_style( 'admin_style' );
}

That’s it, hope it helps 🙂