Best Way to Enqueue Script Style in Front End and Admin in WordPress

Hi, As time goes WordPress make lots of changes in code to improve its functionality. In this article I am going to show you how to enqueue or add scripts and styles in admin and front end. You can add scripts easily by wp_enqueue_script but best way to add/enqueue Script and Style both via single hook on the front end is “wp_enqueue_scripts” (Mark extra ‘s’ in this hook)

I will give you two examples, First to show enqueue scripts and style on front end and second to show enqueue scripts and styles on admin side.

First, We will use “wp_enqueue_scripts” to enqueue scripts/styles on front end. Despite name of this hook, it will enqueue or add both scripts and styles on front end. Below is example :

function example_enqueue_style() {
    wp_enqueue_style( 'yourcssfile', 'yourcssfile.css', false );
}
function example_enqueue_script() {
    wp_enqueue_script( 'your-js', 'your.js', false );
}
add_action( 'wp_enqueue_scripts', 'example_enqueue_style' );
add_action( 'wp_enqueue_scripts', 'example_enqueue_script' );

So you can see in above code we used “wp_enqueue_scripts” two times, first is for add or enqueue style file and second is to enqueue script file. Difference is both hooks called different functions and then in different functions we use “wp_enqueue_style” for style and “wp_enqueue_script” to enqueue script. Remember “wp_enqueue_scripts” is only useful to add/enqueue script and style on front end only, it will not add script and style on admin side.

So how to add script and style on admin side? If you want to add script and style on admin side you need to use “admin_enqueue_scripts” instead of “wp_enqueue_scripts”. Below is example :

function admin_example_enqueue_script() {
    wp_enqueue_script( 'youradmin-js', 'youradmin.js', false );
}
function admin_example_enqueue_style() {
    wp_enqueue_style( 'youradmincssfile', 'youradmincssfile.css', false );
}
add_action( 'admin_enqueue_scripts', 'admin_example_enqueue_script' );
add_action( 'admin_enqueue_scripts', 'admin_example_enqueue_style' );

So you can see in above code we used “admin_enqueue_scripts” two times, first is for add or enqueue script file and second is to enqueue style file. Remember “admin_enqueue_scripts” is only useful to add/enqueue script and style on admin side only, it will not add script and style on front end side.

I hope this post helps you in some way, Let me know if you have any thoughts about this or any other way to do this by posting in comments.

2 Comments

  • Owen January 9, 2016 Reply

    Please fix your captcha page. I am trying to send you a message but I keep getting ejected by your captcha code

    • admin January 11, 2016 Reply Author

      Just tested contact form and it is working. If you want to contact send me email on anku.gandhi[@]gmail.com

      Thanks.

Leave a Reply