Load Stylesheets and Scripts on Specific WP Admin Pages

When we develop WordPress themes and plugins, it is essential to enqueue stylesheets and scripts with our plugins and themes. But most of the times we don’t do it correctly. And the result? Conflicts with other plugins or themes.

Last few bug reports I got for my plugin WP Coupons and Deals were due to my negligence of this issue, not loading the stylesheets and scripts correctly.

When I say not doing it correctly, I meant loading them where it was not necessary.

Stylesheets and scripts from my plugin was loading on every WP admin pages. And it created few conflicts with other plugins, breaking the functionality of either my plugin or their plugin. Cause some other developers were not doing it the right way either.

So, after doing a little research I was able to fix this issue with my plugin.

Load Stylesheets and Scripts on Specific WP Admin Pages

First of all, if you don’t know how to enqueue stylesheets and scripts on WordPress, go check this little tutorial.

Okay, now let’s see how to do it correctly.

Let’s say we want to add a stylesheet or script to new post or edit post page. Here’s how we would do it.

Here is what happens here. admin_enqueue_scripts hook allows us to pass a variable $hook to our function. This $hook variable contains the name or hook of the current admin page.

post-new.php is the file/page that is loaded when we add a new post and post.php is the file/page that is loaded when we edit a post.

We used those hooks to load our stylesheet and script conditionally. Now our script and stylesheet will only be loaded when we are post-new.php or post.php page.

We can do this for other admin pages like – index.php, options-general.php, edit.php etc.

Now let’s see how we can load stylesheets and scripts conditionally on custom admin pages.

I have a custom settings page in my plugin. Here’s how I created it.

Now, I want to add a stylesheet just on this page.

When I created the page, I declared the $settings_page as global. Because I will use that global variable to check it against the $hook variable.

Now let’s load stylesheet on this page.

We accessed the global $settings_page variable in our function and checked with $hook variable. Now, our stylesheet is loaded only on the custom settings page we have.

Over to You

Now you know how to load stylesheets and scripts on specific WordPress admin pages. Make sure you load them correctly next time to avoid the conflicts and bugs in your theme or plugin.

If you have any questions, ask them through comments.

Click Here to Leave a Comment Below

r1ckd33zy

if ( ! $hook = $settings_page ) with this line are you checking for equality or assigning a variable?

if( $hook != 'post-new.php' && $hook != 'post.php' ) with these lines please use the strict equality check.

Also, it look into Yoda conditionals to save you from the above mistakes.

Reply
    Imtiaz Rayhan

    Hi,

    With the first one I am checking for equality. The global variable $settings_page contains the hook for the settings page. We are checking that with the $hook variable.

    And that’s a good suggestion.

    Thank you.

    Reply
l

Hi there,
I was really looking for a detailed step by step guide to do this because I was really confused about doing this.
Thanks a lot, buddy.
Keep posting good stuff. Cheers

Reply
Leave a Reply: