Skip to main content
We are Brand SEO Beijing serving international business, your marketing partner, Contact us by mi@mgsh.com.cn

Website Development Loading Javascript and CSS

Loading jQuery, Javascript and CSS correctly into your WordPress site can be a pain.This article will explain how to use the official WordPress recommended way to load scripts/CSS.
There are two commonly used add_action hooks to load scripts and CSS into WordPress:

  • init: Make sure to always load scripts and CSS for your website header (if using home.php, index.php or a template file), as well as other "front-end" post, page and template styles.
  • wp_enqueue_scripts: The "proper" hook method, may not always work, depending on your WordPress setup.

All the examples below are tested in WordPress multisite mode, WordPress 3.4.2 (if it does not support subsequent versions, please leave a message)

Load external jQuery library and theme custom scripts, styles

The following example uses init in the add_action hook.There are two reasons for using init, one is because we are logging out of WordPress' default jQuery library and then loading Google's jQuery library, and the other is to ensure that scripts and CSS are loaded in the header of WordPress.
The use of if ( !is_admin() ) is to ensure that these scripts and css are only loaded in the frontend and not in the backend admin interface.

/** Google jQuery Library, Custom jQuery and CSS Files */ function myScripts() { wp_register_script( 'google', 'http://ajax.lug.ustc.edu.cn/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 ' );

Load WP default jQuery library and theme custom scripts, styles

The use of array('jquery') is to tell WordPress that jquery.js depends on the WordPress jQuery library, so that jquery.js is loaded after the WordPress jQuery library.

/** 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' );

Load print.css into your WordPress theme

The 'print' at the end is the media screen call, which ensures that the print.css is loaded only when the file in the website's printer loads.

/** 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' );

Replace init with wp_enqueue_scripts

If you want to load unique scripts on posts or pages, you should use wp_enqueue_scripts instead of init.Using wp_enqueue_scripts will only load scripts and CSS in the foreground, not in the background management interface, so there is no need to use !is_admin() to judge.

Use is_single() to load scripts or CSS only on articles

# Replace with the ID of the article to have scripts and css loaded only for that article.Of course, if you use is_single() directly (without filling in the ID), the script and CSS will be loaded on all articles.

/** 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' );

Use is_page() to only load scripts or CSS on the page

# Replace with the ID of the page to have scripts and css loaded only on that page.Of course, if you use is_single() directly (without filling in the ID), the script and CSS will be loaded 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' );

Use admin_enqueue_scripts to load scripts into the background

This example will load scripts and CSS throughout the admin interface.This method is not recommended for plugins unless the plugin rebuilds the entire admin area.
Replaced init or wp_enqueue_scripts with admin_enqueue_scripts
If you want to customize the admin area, you may need 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' );

Load scripts and CSS into the WordPress login screen

I couldn't figure out how to register/sort the CSS file on the login page, so this line was manually added to the stylesheet.
Used to remove WordPress default 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' ); ?>  ' type='text/css' media='all' />

Load scripts and CSS into WordPress plugins

It is also common for WordPress plugins to load scripts and CSS.The main difference is the URL of the file.Themes use get_template_directory_uri, while plugins should use plugins_url, since files are loaded from the plugins directory.
Load scripts and CSS from plugins
This example will load scripts and CSS on the front end of the entire website.

/** 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' );

Load scripts and CSS from plugins into the admin area

If you need to load scripts and CSS 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' );

Load scripts and CSS from plugin to plugin settings page

The example will only load the required scripts and CSS to the plugin settings page, not other pages in the admin area.
The value after custom page= is your plugin settings page

/** 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' );

Move jQuery library to footer

You can't move WordPress' default jQuery library to the bottom of the page, but you can move custom jQuery or other external jQuery libraries (like Google's) to the bottom.Don't move CSS to the bottom of the page.
Lines 3 and 4: The 'true' at the end tells WordPress to load these scripts at the bottom of the page.

/** Moves jQuery to Footer */ function footerScript() { wp_register_script('jquery', ("http://ajax.lug.ustc.edu.cn/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' );

Load jQuery and CSS based on different user roles and capabilities

If your site has authors, editors, and other administrators, you may need to use jQuery to display different information for them.You need to use current_user_can to determine the roles and capabilities of the logged in user.
In the following three examples, if the user is already logged in, these scripts and CSS will be loaded throughout the site.Use !is_admin() to wrap enqueue_script to ensure that it only loads in the foreground, or use admin_enqueue_scripts to add_action to ensure that it only loads in the background admin area.

Load scripts and CSS for admins who can "edit articles"

Only valid for super administrators and site administrators

/** 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' );

Load scripts and CSS for all logged in users

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

Load scripts and CSS for logged in users other than admin

/** 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 tip

The above examples can be combined into a single function if they use the same add_action.In other words, you can split up your script and CSS calls in one function using multiple if statements like: if_admin! if_admin, is_page, is_single and current_user_can, because each use the same add_action init.

Back to Top