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.
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.
Share Improve this question asked Jun 27, 2013 at 18:02 ISnoculrucdeesISnoculrucdees 711 gold badge1 silver badge2 bronze badges 3- Thanks, it worked. Please reply as answer so that I can accept. – ISnoculrucdees Commented Jun 27, 2013 at 18:15
- How do you know which page, exactly, you want to include this script on?> – Chip Bennett Commented Jun 27, 2013 at 18:47
- you can use wordpress is_page function – Rohit Kishore Commented Aug 26, 2016 at 8:47
3 Answers
Reset to default 6Although @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
- Create a new js file for your script
my-nifty-custom.js
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/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>');
} ?>
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.
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/wp/web-design/javascript/how-to-use-jquery-plugin-with-wordpress-plugin-tutorial/