Скачать или смотреть How to Use wp_enqueue_style for Specific Pages in WordPress

A step-by-step guide on loading CSS and JS files on specific WordPress pages, including how to troubleshoot issues with loading scripts, particularly on your plugin settings page.
---
This video is based on the question https://stackoverflow.com/q/73784624/ asked by the user 'Dimitry' ( https://stackoverflow.com/u/14374725/ ) and on the answer https://stackoverflow.com/a/73792149/ provided by the user 'Vijay Hardaha' ( https://stackoverflow.com/u/11848895/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: wp_enqueue_style for specific pages

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Use wp_enqueue_style for Specific Pages in WordPress

When developing plugins for WordPress, you may want to load custom CSS and JavaScript files only on specific pages. This can help keep your site lightweight and organized. However, it's not always clear how to achieve this, especially when you encounter issues with loading your scripts. In this guide, we're going to address a common problem where scripts load on certain pages but not in the plugin settings page.

The Problem

Consider this scenario: you have a piece of code that is supposed to load CSS and JS files on various admin pages like post, post-new, profile, and user-edit. However, your intended settings page (in this case, http://wp.local/wp-admin/options-gene...) does not seem to load these files.

The Example Code

The sample code provided looks something like this:

[[See Video to Reveal this Text or Code Snippet]]

Identifying the Issue

The issue arises because the settings page is not included in the $pages array initially. In order to resolve this, you need to determine the correct base name that WordPress is using for your settings page.

The Solution

Follow these steps to load your scripts effectively on the settings page:

Add Debugging Line
Before the if ( in_array( $screen->base, $this->pages ) ) line, add the following line to echo the base name:

[[See Video to Reveal this Text or Code Snippet]]

Navigate to the Page
Open the desired settings page in your browser:
http://wp.local/wp-admin/options-gene...

View Page Source
Right-click on the page and select "View Page Source", or use
view-source:http://wp.local/wp-admin/options-gene...
to view the HTML source of your page.

Search for Base Name
Use the Find tool (CTRL + F) and search for debug-xyz. Look for the line that includes debug-xyz to identify what base name is being used for your settings page.

Update the Pages Array
Copy the base name you found and add it into your $pages array. For example:

[[See Video to Reveal this Text or Code Snippet]]

Remove Debug Line
Once you've successfully added the base name, remove the debugging line you added earlier to clean up your code.

Verify Loading
Reload your settings page and check if your CSS and JavaScript files are loading as expected.

Conclusion

By following these steps, you should be able to effectively load specific CSS and JavaScript files on your WordPress pages, including your plugin's settings page. Debugging is a crucial part of development, and knowing how to inspect the base values can save you a lot of time. Happy coding!