4

I have this code which I want to add into a specific page of mine. I don't want to create a file for it and then include etc (though do tell if that would be the only way). Also I don't want it to be in the header as it would be included in all pages. The code is:

<script type="text/javascript">
$(function () {
    $('input[name=done]:radio').click(function () {
        if ($(this).val() === "Yes") {
            $('#p-days').show();
        } else {
            $('#p-days').hide();
        }
    });
    $('input[name=already-b]:radio').click(function () {
        if ($(this).val() === "Yes") {
            $('#div-name').show();
        } else {
            $('#div-name').hide();
        }
    });
});
</script>

I added this in the editor by selecting the Text (not in Visual mode.) But it is not working. Any ideas what I'm doing wrong?

Thanks.

  • Thanks, it worked. Please reply as answer so that I can accept. – ISnoculrucdees Jun 27 '13 at 18:15
  • How do you know which page, exactly, you want to include this script on?> – Chip Bennett Jun 27 '13 at 18:47
  • you can use wordpress is_page function – Rohit Kishore Aug 26 '16 at 8:47
5

Although @s_ha_dum is correct you WILL need to use jQuery no conflict within WordPress the original question is left unanswered.

I have this code which I want to add into a specific page of mine.

There are a couple of ways to do this

Based on Page name/slug WordPress in theme's functions.php

This method uses the WordPress hook wp_enqueue_scripts

  1. Create a new js file for your script my-nifty-custom.js
  2. In your functions.php add the following

    /* Enqueue scripts (and related stylesheets) */
        add_action( 'wp_enqueue_scripts', 'my_nifty_scripts' );
    /**
     * Registers scripts for the theme and enqueue those used site wide.
     *
     * @since 0.1.0.
     */
    
    function my_nifty_scripts() {
        wp_register_script('my-nifty-custom', get_stylesheet_directory_uri() . '/js/my-nifty-custom.js', false, null, true);
    if(is_page('page-slug-here')){
        wp_enqueue_script('my-nifty-custom'); 
    }}
    

Note if you are using a child-theme or want to do it morebetter wrap the whole thing in after_setup_theme ie:

add_action( 'after_setup_theme', 'nifty_theme_setup' );
function nifty_theme_setup() {
// script function and other functions that should happen after the initial theme setup
}

Based on Body Class (DOM-based Routing)

This is a little bit more complicated. Luckily Paul Irish wrote a fantastic blog about it here: http://www.paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/

If you use this method it will get your custom JS on a per page basis based on the Body Class. For Example <body class="nifty">

Then you would use:

//clip 
 nifty : {
    init     : function(){ //custom script goes here }
  }
//clip

The only problem with this is the page must have the body class you are calling. For this WordPress has the function body_class

add_filter('body_class','nifty_class_names');
function nifty_class_names($classes) {
    if(is_page('page-slug-here')){
        $classes[] = 'nifty';
    }

    return $classes;
}

So which method should you use?

I recommend a combination of both. Create one JavaScript file that uses Paul's method. Then use wp_enqueue_scripts to call that method.

Lazy header.php method

Lastly there IS always the lazy way (which I don't recommend but am noting just for reference.

In your header.php you can do:

 <?php if(is_page('page-slug-here')){
           echo ('<script type="text/javascript" src="'. get_stylesheet_directory_uri() . '/js/my-nifty-custom.js"> </script>'); 
        } ?>
1

WordPress loads jQuery in "No Conflict" mode. The "$" alias doesn't work. Use the full "jQuery"-- jQuery.$.ajax({... or wrap your script like the example from the jQuery docs...

(function($) { 
  $(function() {
    // more code using $ as alias to jQuery
  });
})(jQuery);

There is information about this in the Codex as well.

-1

I've ran into this problem every time I wanted to use a jQuery plugin in my posts and pages. My solution was to create a generic jQuery plugin shortcode http://www.coding-dude.com/wp/web-design/javascript/how-to-use-jquery-plugin-with-wordpress-plugin-tutorial/

  • 2
    Add the crux of the answer in addition to linking to a external link. – bravokeyl Aug 26 '16 at 6:12
  • downvoted as ianswer should be on this site, and in some unknown and unreliable third party site – Mark Kaplun Aug 26 '16 at 6:26
  • Down-voted. This is not an answer to the question. Rather, it's a link to your external site, which then requires the user to subscribe to your newsletter in order to even get the plug-in you've posed as the "answer" to the question. – omega33 Sep 2 '17 at 10:56

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.