0

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(); ?>
2

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();
});
| improve this answer | |
  • Ah I feel dumb, I should have tried that. I read something that said just place that anywhere in the document but as Wordpress seems to operate outside of standards in some cases, I assumed this was one of those times. I am however getting an Exception regarding JQuery not being defined now. Isn't it included in Wordpress already? – Aidan Knight Nov 8 '14 at 23:20
  • Fixed it by moving the code to "price-chart-table.js" as you suggested, thanks! – Aidan Knight Nov 9 '14 at 1:36
  • Typically jQuery is included by default, but it is always a good idea to put it in the dependencies. – Seamus Leahy Nov 9 '14 at 15:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.