Question posted in
You can find the official documentation here.

How Can i add jquery code in single wordpress page? – Jquery ajax

I have a script that requires jQuery, and I don’t know how to add it into a single wordress page.
I looked for many solution, but they are too hard for me to understand.

<script>
$(document).ready(function(e) {
$('#checkboxtest').change(function(){
    if( $('#checkboxtest').prop('checked') )
       {checkboxstatus = "YES";}
       else
       {checkboxstatus = "NO";}
$.ajax({
        type: "POST",
        url: "checkboxtestbackend.php",
        data: {checkboxstatus: checkboxstatus},
        })
        
});
});
</script>
Tags:

4

Answers


  1. 0

    There are many ways to add javascript to your WordPress.

    The easiest way is to use plugins like this one css javascript toolbox to add your scripts where you need on your WordPress.

    Another way is to update your WordPress template and insert your code where it needed. This link provide you a full example of how achieved this: add-javascript-to-wordpress

    Login or Signup to reply.
  2. 0

    First of all – you should rewrite your jQuery wrapper for code to work within WP pages:

    jQuery(function($) {
    $('#checkboxtest').change(function(){
        if( $('#checkboxtest').prop('checked') )
           {checkboxstatus = "YES";}
           else
           {checkboxstatus = "NO";}
    $.ajax({
            type: "POST",
            url: "checkboxtestbackend.php",
            data: {checkboxstatus: checkboxstatus},
            })
            
    });
});

    Now you can add this code to a WordPress page in two ways:

    Using a plugin for custom code snippets (like this one)

    Or if your page is using a custom-coded template, you can directly paste the

    <script>
...
</script>

    tag with your code, where you need it.

    Login or Signup to reply.
  3. 0

    Try this:

    <?php if (is_page('my-page-slug')): ?>
<script>
$(document).ready(function(e) {
$('#checkboxtest').change(function(){
    if( $('#checkboxtest').prop('checked') )
       {checkboxstatus = "YES";}
       else
       {checkboxstatus = "NO";}
$.ajax({
        type: "POST",
        url: "checkboxtestbackend.php",
        data: {checkboxstatus: checkboxstatus},
        })
});
});
</script>
<?php endif; ?>
    Login or Signup to reply.
  4. 0

    Use code like below:

      <?php
    function myscript() {
        // if ( is_single() && 'post' == get_post_type() ) {
        // if ( is_singular( 'book' ) ) {  // book is a custom post type 
        if ( is_single()) {
            ?>
            <script type="text/javascript">
                alert("Hello! I am Added");
    
            </script>
        <?php
        }
    }
    add_action('wp_footer', 'myscript');

    Another example:

    /**
 * Proper way to enqueue scripts and styles.
 */
function wpdocs_theme_name_scripts() {
    // if ( is_single() && 'post' == get_post_type() ) {
    // if ( is_singular( 'book' ) ) {  // book is a custom post type 
    if ( is_single()) {
        wp_enqueue_style( 'style-name', get_stylesheet_uri() );
        wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery'), '1.0.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search