I'm currently trying to make certain custom post meta sortable on the frontend of my site. I wish the Title, Publisher, Developer, Score and Release Date all sortable, not sure what the best method is to do this, either have an arrow next to each title or to use drop down menus in a form above the results.
Here is the code I'm using:
<?php get_header(); ?>
<script language='javascript'>
$(document).ready(function() {
if ($.browser.msie && parseInt($.browser.version, 10) < 9) {
$('table tr:odd').addClass('odd');
$('table tr:even').addClass('even');
}
});
</script>
<div id="content-archives">
<?php if ( have_posts() ) : ?>
<header class="page-header">
<h1 class="page-title">Games Database</h1>
</header>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th></th>
<th><strong>Title</strong></th>
<th><strong>Platform(s)</strong></th>
<th><strong>Genre(s)</strong></th>
<th><strong>Publisher</strong></th>
<th><strong>Developer</strong></th>
<th><strong>Score</strong></th>
<th><strong>Release Date (US)</strong></th>
</tr>
<!-- Start the Loop -->
<?php while ( have_posts() ) : the_post(); ?>
<!-- Display game and information -->
<tbody>
<tr>
<td><a href="<?php the_permalink(); ?>"><?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'games_database-thumb' ); } ?></a></td>
<td><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></td>
<td><?php the_terms( $post->ID, 'games_database_game_platform' , ' ' ); ?></td>
<td><?php the_terms( $post->ID, 'games_database_game_genre' , ' ' ); ?></td>
<td><?php echo esc_html( get_post_meta( get_the_ID(), 'game_publisher', true ) ); ?></td>
<td><?php echo esc_html( get_post_meta( get_the_ID(), 'game_developer', true ) ); ?></td>
<td>
<?php
$review_link = esc_html( get_post_meta( get_the_ID(), 'game_review_link', true ) );
$game_rating = esc_html( get_post_meta( get_the_ID(), 'game_rating', true ) );
if ( ! empty( $review_link ) ) {
$game_rating = '<a href="' . $review_link . '">' . $game_rating . '</a>';
}
?>
<div class="rating-<?php echo esc_html( get_post_meta( get_the_ID(), 'game_rating', true ) ); ?>">
<?php echo $game_rating; ?>
</div>
</td>
<!--<td><a href="<?php echo esc_html( get_post_meta( get_the_ID(), 'game_review_link', true ) ); ?>"><div class="rating-<?php echo esc_html( get_post_meta( get_the_ID(), 'game_rating', true ) ); ?>"><?php echo esc_html( get_post_meta( get_the_ID(), 'game_rating', true ) ); ?></div></a></td>-->
<td><?php echo esc_html( get_post_meta( get_the_ID(), 'game_release', true ) ); ?></td>
</tr>
</tbody>
<?php endwhile; ?>
</table>
<!-- Display page navigation -->
<?php global $wp_query;
if ( isset( $wp_query->max_num_pages ) && $wp_query->max_num_pages > 1 ) { ?>
<nav id="<?php echo $nav_id; ?>">
<div class="nav-previous"><?php next_posts_link( '<span class="meta-nav">←</span> Older reviews'); ?></div>
<div class="nav-next"><?php previous_posts_link( 'Newer reviews <span class= "meta-nav">→</span>' ); ?></div>
</nav>
<?php };
endif; ?>
</div>
As you can see I have hard coded the table header elements in so maybe that has to change? I really don't know how to progress with this so any and all help will be greatly appreciated.
Cheers!