JQuery Plugins in WordPress

by

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();
});