How to load JS and CSS only on specific Pages using is_page()?

Question

How to load JS and CSS only on specific Pages using is_page()?

RaymondMik

2017年9月18日 00:32

I am building my first WP plugin, it should load some JS and CSS files only on specific pages selected through a form available in the plugin Admin area. Once selected in the form, Page Title gets stored in the DB wp_options table, then the data is pulled back out in a variable named $page_selected. To load JS and CSS files only in the pages selected in form, I wanted to use the is_page() function, passing the $page_selected variable as a parameter.

 function my_custom_tooltip() {
    if (  is_page($page_selected) ) {
        wp_enqueue_style( 'custom_tooltip_frontend_css', plugins_url('custom-image-tooltip/custom-image-tooltip.css') );
        wp_enqueue_script( 'custom_tooltip_frontend_js', plugins_url('custom-image-tooltip/custom-image-tooltip.js'), array('jquery'), '', true );
    }
} add_action('wp_enqueue_scripts', 'my_custom_tooltip');

Unluckily In my case that conditional statement doesn't work correctly. Is there any way to achieve the same result, matching the page selected in the form by the user with the current Page being displayed?

Topic wp-enqueue-script page-specific-settings pages Wordpress

Category Web

Lucas Miranda · Accepted Answer · 2017年9月18日 00:32

If you're running this code inside a template file, it will work just fine, but if this code is in functions.php or in a plugin file, it will throw this error in debug.log:

PHP Notice: is_page was called incorrectly. Conditional query tags do not work before the query is run. Before then, they always return false.

In this case, you could use the template_redirect action hook, as explained here.

AddWeb Solution Pvt Ltd · Accepted Answer · 2016年1月9日 11:13

I make some pretty change and I hope this help you well. Try below code:

function my_custom_tooltip() {
  wp_enqueue_style( 'custom_tooltip_frontend_css', plugins_url('custom-image-tooltip/custom-image-tooltip.css') );
  wp_enqueue_script( 'custom_tooltip_frontend_js', plugins_url('custom-image-tooltip/custom-image-tooltip.js'), array('jquery'), '', true );
} 

if(is_page($page_selected)){
    add_action('wp_enqueue_scripts', 'my_custom_tooltip');
}

Here, make sure about $page_selected.

NOTE: You should always enqueue your scripts in a theme's functions.php file - not a template file. Template files are just Not The Right Place 99.9% of the time.

You can use is_page() in multiple form like:

// When any single Page is being displayed.
is_page();

// When Page 42 (ID) is being displayed.
is_page( 42 );

// When the Page with a post_title of "Contact" is being displayed.
is_page( 'Contact' );

// When the Page with a post_name (slug) of "about-me" is being displayed.
is_page( 'about-me' );

// Returns true when the Pages displayed is either post ID 42, or post_name "about-me", or post_title "Contact".  
is_page( array( 42, 'about-me', 'Contact' ) );

Note: The array ability was added at Version 2.5.

C C · Accepted Answer · 2016年1月5日 17:21

Untested...but something like this should work to get the name (i.e. slug) of the page currently displayed:

function my_custom_tooltip() {
    global $post;
    if ( is_object( $post ) && $post->post_type=='page' ) {
        if ( $post->post_name == $page_selected ) {
            wp_enqueue_style( 'custom_tooltip_frontend_css', plugins_url('custom-image-tooltip/custom-image-tooltip.css') );
            wp_enqueue_script( 'custom_tooltip_frontend_js', plugins_url('custom-image-tooltip/custom-image-tooltip.js'), array('jquery'), '', true );
        }
    }
}

The compare to $page_selected is of course expecting it to be in "slug" format as well...or if comparing to page title you could use $post->post_title instead of $post->post_name.

Note, this is an example where using PHP classes is helpful, to avoid having to use a global variable ($page_selected) inside that function...

Puneet Sahalot · Accepted Answer · 2016年1月5日 17:19

If $page_selected returns a string containing the page title, it should work fine. I have tested it and is_page() accepts page title, page ID and the slug.

If you are facing issues, it will be better to store page ID in the database and use it with is_page()

Please refer to https://codex.wordpress.org/Function_Reference/is_page for more details on the possible arguments that can be passed to this conditional statement.

How to load JS and CSS only on specific Pages using is_page()?

About