Responsive Custom Post Type Navigation

This provides previous and next buttons that stay within the current taxonomy term. So, if it’s a course, or a sub-course – the links will only go to posts in that course/sub-course.

This is the tablet only version of a Module Lesson Nav for an online course website. This code is hidden using CSS when the viewport exceeds the size of tablet.

This snippet is the long form of the code as I first did it.

// START TABLET-ONLY LESSON NAV
	echo '<div>';
	echo '<div>';
	global $post;
	$terms = get_the_terms( $post->ID , 'module' ); 
	foreach ( $terms as $term ) {
	                    $term_link = get_term_link( $term, 'module' );
	                    if( is_wp_error( $term_link ) )
	                    continue;
	echo '<h2><a href="' . $term_link . '" title="'. $term->name .'"><i></i> ' . $term->name . '</a></h2>';
	} 
	echo '</div>'; // end parent meta 
	echo '<ul>';
	echo '<li>';
	previous_post_link('<div>%link</div>', '<i></i>', TRUE, ' ', 'module' );
	echo '</li>';
	echo '<li>';
	next_post_link('<div>%link</div>', '<i></i> ', TRUE, ' ', 'module' );
	echo '</li>';
	echo '</ul>';
	echo '</div>';
	// END TABLET-ONLY LESSON NAV

This is the shorter form of the same snippet.

<!-- START MODULE LESSON NAV -->
<div>
	<div>
	<?php	
	global $post; $terms = get_the_terms( $post->ID , 'module' ); 
	foreach ( $terms as $term ) {
	                    $term_link = get_term_link( $term, 'module' );
	                    if( is_wp_error( $term_link ) )
	                    continue; 
	?>
	<h2><a href="<?php echo $term_link ?>" title="<?php echo $term->name ?>"><i></i> <?php echo $term->name ?></a></h2>
	<?php } ?>
	</div>
		<ul>
			<li><?php previous_post_link('<div>%link</div>', '<i></i>', TRUE, ' ', 'module' ); ?></li>
			<li><?php next_post_link('<div>%link</div>', '<i></i> ', TRUE, ' ', 'module' ); ?></li>
		</ul>
	</div>
<!-- END MODULE LESSON NAV -->