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 a WordPress Expert

Get hourly and project based theme customization, theme tweaks, and development help from world-class WordPress developers at Codeable. If you’re in Kelowna and need a custom website for your business visit our Kelowna Web Design page now to get started.