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.
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
- 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.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>');
} ?>
