If you are reading this post to find out how to add Javascript or CSS to your WordPress site you are on the right path. I remember my first post where I wanted to add a jQuery code, yeap, it didn’t work the first time. Actually I had to read many information and articles, but none of the was helping me, I had to add a classic Javascript file on the header of my theme, exactly the header.php file. It worked for a while but now is now working any more, guess why? Because I was not doing it the right way.
There is a way to add/enqueue these Javascript and CSS files into WordPresss. WordPress includes functions to Enqueue Scripts and Styles in a way that you can always be sure to have available those files. I am writing this article so that you can digest better the information found in the WordPress CODEX site.
Where to add/enqueue my Scripts
There are two places where you can add your Scripts and Styles. The first place is the readers/users side, It could be a landing page, a post, a search page, a custom post, a widget, header, footer, and many more places.
The second place where you can add Scripts and Styles is the admin area, for this area we can include the previous places, but if you have worked with WordPress you know that there are places where only an Administrator is able to interact like your WordPress Dashboard, editing a post, in your page settings for a specific Plugin configuration and many more.
So having said some places where you can add a Script and Style you know that with this you can add powering stuff into your site.
Steps to add/enqueue a Scripts and Styles
By default WordPress has its own libraries loaded to do many things like jQuery, but on this case you want to add your own magical Script into your site.
- To add a Script or Style into your admin site with you use the admin_enqueue_scripts/admin_enqueue_style hook.
- To add a Script or Style into your front page you use the wp_enqueue_scripts/wp_enqueue_scripts.
- To add it in the login page you use login_enqueue_scripts/login_enqueue_style.
Let us look at the following example:
| 1 2 3 4 5 6 7 8 9 10 | function themeslug_enqueue_style() { wp_enqueue_style( 'core', 'style.css', false ); } function themeslug_enqueue_script() { wp_enqueue_script( 'my-js', 'filename.js', false ); } add_action( 'wp_enqueue_style' , 'themeslug_enqueue_style' ); add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' ); |
On the previous example we see that we are enqueuing our Scripts and Styles into the front page by hooking our functions into the wp_enqueue_scripts/wp_enqueue_style hook.
Adding the Scripts and Styles into all the admin areas
| 1 2 3 4 5 | function load_custom_wp_admin_style() { wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' ); wp_enqueue_style( 'custom_wp_admin_css' ); } add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' ); |
With the previous code we are adding a style resource in every admin page.
Correct way to Enqueue Script and Styles
Now that you have an Idea of how this works I will teach you the correct way to use enqueue scripts and styles. First of all, WordPress has function to register Scripts and Style so that you don’t have to pollute your site with Scripts and Style that are not needed, you Enqueue them on the exact moment.
wp_register_script
| 1 | <?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?> |
wp_register_script has 5 Arguments of which only $handle and $src are required and the rest are optional. I will give a brief description of the 5 arguments but if you want the complete detail you can go to the CODEX page.
- $handle – This is the unique name that you will use with your script in further functions like wp_enqueue_script.
- $src – This is the source where you have you file, usually you use plugins_url() for plugins and get_template_directory_uri() for themes.
- $deps – Sometimes you want to include some other functionality like a datepicker from the jQuery UI site, since WordPress is already loaded with this and is already registered you only add the dependency. Si the CODEX for all the dependencies loaded in WordPress..
- $ver – If you are loading a script that is already on WordPress but you want to use that file then for the sake of clashing script is better to use a version, the number is up to you.
- $in_footer – This is if you want to load the script on the footer, by default the script goes in the head, so send a true value to place it at the footer.
This is an example of the wp_register_script function.
| 1 | wp_register_script('stcr-admin-js', plugin_url('js/stcr-admin.js', __FILE__), array( 'jquery','jquery-ui-datepicker' ), '150915', true ); |
After you register you script you are able to use it anywhere you want either using admin_enqueue_scripts, wp_enqueue_scripts or login_enqueue_scripts.
wp_register_style
| 1 | <?php wp_register_style( $handle, $src, $deps, $ver, $media ); ?> |
wp_register_script has 5 Arguments of which only $handle and $src are required and the rest are optional. I will give a brief description of the 5 arguments but if you want the complete detail you can go to the CODEX page.
- $handle – This is the unique name that you will use with your style in further functions like wp_enqueue_style.
- $src – This is the source where you have you file, usually you use plugins_url() for plugins and get_template_directory_uri() for themes.
- $deps – On this case is an array of stylesheets that you want to use with this one that your are including.
- $ver – If you are loading a styles that are already on WordPress but you want to use that file then for the sake of clashing styles is better to use a version, the number is up to you.
- $media– String specifying the media for which this stylesheet has been defined. Examples: ‘all‘, ‘screen‘, ‘handheld‘, ‘print‘.
Enqueuing Script to a specific admin edit page.
| 1 2 3 4 5 6 7 8 | function my_enqueue($hook) { if ( 'edit.php' != $hook ) { return; } wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'myscript.js' ); } add_action( 'admin_enqueue_scripts', 'my_enqueue' ); |
On this example we are enqueuing the my_enqueue script in the pages where the user role is able to edit.
Where should I write this code?
By this point you might have an understanding of how to properly add/enqueue scripts and styles into your WordPress site, but you might be wondering where to add this code. The answer is it depends. Yes, it depends where you add the code but mostly if you are a Theme developer you could add this code on the functions.php file or if you are a Plugin developer you can add this code where you need it (for example in a settings page). If you still need a guide of where to add it please add your comment.
Final Comments
As you can see adding/enqueuing script into our WordPress site is not that difficult and also we have the power to control our styles and scripts so that we can have a with better performance by adding them only when is need it. Just remember to add scripts/styles you first register them with wp_register_script/wp_register_style and the enqueue them in the correct place with admin_enqueue_scripts, wp_enqueue_scripts or login_enqueue_scripts.