Responsive Custom Post Type Navigation

WordPress code snippets for creating custom navigation that appears only when using tablet devices. Includes QUERY for creating 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 -->

Hire WordPress Experts at Codeable.

The only WordPress exclusive freelancer platform that connects thousands of customers with the top WordPress freelance experts to work on projects of any size. 

Free estimate • No obligation to hire • 100% risk-free