0

I have a situation in which I am building a plugin that is intentionnally fit for a particular theme. Within my theme I have the following folder structure leading to my css file.

wp-content -> themes -> my-theme-name -> css -> my-custom-css.css

from my plugin, how can I enqueue that template css file onto a specific settings page (FYI - I am currently using the settings API to built my settings page?).

I'm finding tutorials online on how to associate a plugin's style-sheet to the admin area, and that's cool. But I need my theme's custom css file to be enqueued to my custom settings page instead.

Here is something I found in the codex...

Can I do this for a particular settings page?

function wpdocs_enqueue_custom_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', 'wpdocs_enqueue_custom_admin_style' );
  • Have you checked this tutorial? I think this will help you: pippinsplugins.com/… – Milan Bastola May 9 '18 at 20:54
  • Thanks! That looks like it comes close - but its referencing the plugin_url(), in their examples, when I want the theme's css path instead. – klewis May 9 '18 at 21:02
  • you can use wp_enqueue_script('custom-js', 'wp-content/my-plugin-dir/js/custom.js'); instead of plugin_url(). isn't it? – Milan Bastola May 9 '18 at 21:05
2

The admin_enqueue_scripts hook has a $hook_suffix parameter for the current admin page. This parameter will return something like toplevel_page_yourpagename where the toplevel_page will be your page level and yourpagename is what you find on the ?page=yourpagename url.

Use that to check if the current page is your plugin's settings page and then load the scripts.

function wpdocs_enqueue_custom_admin_style($hook_suffix) {
    // Check if it's the ?page=yourpagename. If not, just empty return before executing the folowing scripts. 
    if($hook_suffix != 'toplevel_page_yourpagename') {
        return;
    }

    // Load your css.
    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', 'wpdocs_enqueue_custom_admin_style' );

Check this for reference https://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts#Example:_Load_CSS_File_from_a_plugin_on_specific_Admin_Page

  • 1
    that hook can be called from anywhere with whatever parameters, so just to be extra safe it is probably better to check what screen you are on. – Mark Kaplun May 10 '18 at 4:55
  • I got it working perfectly. Many thanks for the hook info and demo. I'm definitely applying Mark's recommendation as well. – klewis May 10 '18 at 14:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.