JQuery Plugins in Wordpress

Question

I have been able to somewhat piece together how this should be done but I am really struggling with it. I want to use the Table Sorter plugin (http://tablesorter.com) in a custom Page Template to display data but I am not sure it is correct.

I have hooked "wp_enqueue_scripts" and I am using this function to enqueue the Table Sorter JS file. I believe this is working correctly, however I also need to place a line in the JQuery Ready() function, however I am not sure how to do this from within my custom Page Template.

Can anyone shed some light?

<?php 
/*
Template Name: Price Chart
*/

/* Enqueue scripts and styles */
function load_table_sorter_scripts()
{
    //wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    wp_enqueue_script('jquery');
    wp_enqueue_script( 'tablesorter', get_template_directory_uri() . '/js/jquery.tablesorter.min.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'load_table_sorter_scripts' );

// Now start outputting the HTML
get_header();
global $gp_settings;

?>

<script>
  jQuery(document).ready(function($) 
    { 
      $("#priceTable").tablesorter();
  });
</script>

    <div id="content">

        <!-- TITLE -->
        <?php if($gp_settings['title'] == "Show") { ?><h1 class="page-title"><?php the_title(); ?></h1><?php } ?>

        <?

            $args=array(
                'post_type' => 'package',
                'posts_per_page' => 50
            );

            // Query all Packages
            $packages = new WP_Query($args);

            if( $packages->have_posts() )
            {
                ?>

                <table id="priceTable" class="tablesorter">
                    <thead> 
                        <tr> 
                            <th></th> 
                            <th>512MB</th> 
                            <th>1GB</th> 
                            <th>2GB</th> 
                            <th>3GB</th>
                            <th>4GB</th>
                        </tr> 
                    </thead>
                    <tbody>

                <?

                while( $packages->have_posts() )
                {
                    $packages->the_post();

                    ?>

                    <tr> 
                        <td><? echo get_the_title(); ?></td> 
                        <td><? echo get_post_meta($post->ID, 'meta-package-512mb', true); ?></td> 
                        <td><? echo get_post_meta($post->ID, 'meta-package-1gb', true); ?></td> 
                        <td><? echo get_post_meta($post->ID, 'meta-package-2gb', true); ?></td> 
                        <td><? echo get_post_meta($post->ID, 'meta-package-3gb', true); ?></td>
                        <td><? echo get_post_meta($post->ID, 'meta-package-4gb', true); ?></td> 
                    </tr> 

                    <?

                }

                echo '</tbody></table>';
            }
            else
            {
                echo 'NO POST FOUND';
            }

            // Rest Post Data
            wp_reset_postdata();

            // Reset Query
            wp_reset_query();

        ?>

    </div>


<?php get_footer(); ?>

Answer 1

Your main issue with your code is that you aren't wrapping your JS in a <script> element.

<?php 
/*
Template Name: Price Chart
*/

/**
 * Enqueue the table sorter script
 */
function load_table_sorter_scripts()
{
    //wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    wp_enqueue_script( 'tablesorter', get_template_directory_uri() . '/js/jquery.tablesorter.min.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'load_table_sorter_scripts' );

// Now start outputting the HTML
get_header();
global $gp_settings;
?>
<!-- HTML body content -->

<!-- You can put this anywhere in the body -->
<script>
  jQuery(document).ready(function() 
    { 
      jQuery("#priceTable").tablesorter();
  });
</script>
<?php get_footer(); ?>

Now this isn't the cleanest. To make it cleaner:

1. move the part where you connect tablesorter into its own Javascript file
2. move the enqueue script function into functions.php file and check which page is being called

functions.php

//...
function load_table_sorter_scripts()
{
    // Check that it is the Price Chart page template (you may need to change the name to match the file name).
    if ( is_page_template('price-chart.php') ) {
      wp_enqueue_script( 'tablesorter', get_template_directory_uri() . '/js/jquery.tablesorter.min.js', array('jquery'), '1.0.0', true );
      wp_enqueue_script( 'tablesorter-price-chart', get_template_directory_uri() . '/js/price-chart-table.js', array('jquery', 'tablesorter'), '1.0.0', true );
  }
}
add_action( 'wp_enqueue_scripts', 'load_table_sorter_scripts' );

js/price-chart-table.js

jQuery(document).ready(function() 
  { 
    jQuery("#priceTable").tablesorter();
});