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:
- move the part where you connect tablesorter into its own Javascript file
- 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();
});