Adding Scripts Properly to WordPress Part 3 – Page Detection

You might find yourself in the situation where you only want a script to run on a certain page. In fact, it’s good practice to only load your JavaScript files when absolutely necessary; loading the files on every single page is a big no-no (I’ve been chastised before for this). While on the blog’s front-end, WordPress makes it super-easy with its conditional tags. I’m not going to go over the conditional tags here, but here are a few you can take advantage of: is_home() is_front_page() is_single() is_page() And much more. While being selective on the front-end is relatively straightforward, the admin-panel is another monster. Sure, there’s the is_admin() conditional, but what if you only want to run a script in a certain section within the admin panel? One technique is to use the PHP reserved variable called $_GET. Say you have a plugin options page with a URL of: http://www.mydomain.com/wp-admin/options-general.php?page=my-plugin-file.php […]


You might find yourself in the situation where you only want a script to run on a certain page. In fact, it’s good practice to only load your JavaScript files when absolutely necessary; loading the files on every single page is a big no-no (I’ve been chastised before for this).

While on the blog’s front-end, WordPress makes it super-easy with its conditional tags.

I’m not going to go over the conditional tags here, but here are a few you can take advantage of:

While being selective on the front-end is relatively straightforward, the admin-panel is another monster.

Sure, there’s the is_admin() conditional, but what if you only want to run a script in a certain section within the admin panel?

One technique is to use the PHP reserved variable called $_GET.

Say you have a plugin options page with a URL of:

http://www.mydomain.com/wp-admin/options-general.php?page=my-plugin-file.php

You can use the $_GET variable to capture the page and run a conditional to determine if the page is yours.


<?php
if (isset($_GET['page'])) { 
    if ($_GET['page'] == "my-plugin-file.php") {
        /*load your scripts here */
    }
}
?>

If there are no variables to capture, you may have to use the reserved variable $_SERVER to capture the page name. From there, you would use a conditional or a switch statement.


<?php
switch (basename($_SERVER['SCRIPT_FILENAME'])) {
    case "edit-comments.php":
               /*load scripts here*/
        break;
    case "upload.php":
               /*load other scripts here*/
        break;
    default:
        break;
}
?>

A Real-World Example

For a WordPress plugin I modified (WP Grins Lite – I’m not the original author), I wanted to include the JavaScript file only on specific pages.

In the admin panel, I wanted the script to load when adding/editing posts and pages, and when editing a comment.

On a post, I wanted the script to load only on posts and pages. To make things interesting, I also wanted to only load the script if comments were open.


<?php
function add_scripts(){
    global $post;
    if (is_admin()) {
        switch (basename($_SERVER['SCRIPT_FILENAME'])) {
            case "post.php":
            case "post-new.php":
            case "page.php":
            case "page-new":
            case "comment.php":
                break;
            default:
                return;
        }
    } else if ((!is_single() && !is_page()) || 'closed' == $post->comment_status) {
        return;
    } 
    wp_enqueue_script('wp_grins_lite', plugins_url('wp-grins-lite') . '/js/wp-grins.js', array("jquery"), 1.0); 
    wp_localize_script( 'wp_grins_lite', 'wpgrinslite', $this->get_js_vars());
}
?>

And there you have it. Page detection in a nutshell.

This article is an excerpt from Ronald Huereca’s e-book entitled WordPress and Ajax (used with permission).


Leave a Reply

Your email address will not be published. Required fields are marked *