Post Navigation

<?php

/*=======================================
=            POST NAVIGATION            =
=======================================*/
add_action('generate_before_comments_container', 'rocket_post_navigation');
function rocket_post_navigation() {

	global $post;

	// PREVIOUS POST - setup object and retrieve post thumbnail
	$prev_post = get_previous_post();
	if ( !empty( $prev_post ) ) {
		$prev_post_thumbnail_id = get_post_thumbnail_id( $prev_post->ID );
		$prev_post_thumbnail = wp_get_attachment_url( $prev_post_thumbnail_id );
		$column = 100;
		$has_prev_and_next = false;
	}

	// NEXT POST - setup object and retrieve post thumbnail
	$next_post = get_next_post();
	if ( !empty( $next_post ) ) {
		$next_post_thumbnail_id = get_post_thumbnail_id( $next_post->ID );
		$next_post_thumbnail = wp_get_attachment_url( $next_post_thumbnail_id );
		$column = 100;
		$has_prev_and_next = false;
	}

	if( !empty( $prev_post ) && !empty( $next_post ) ) {
		$column = 50;
		$has_prev_and_next = true;
	} ?>

	<div id="post-navigation" class="clearfix">

				<?php if ( !empty( $prev_post ) ) { ?>
					<a href="<?php echo get_permalink( $prev_post->ID ); ?>">
						<div id="prev-post" class="tablet-grid-<?php echo $column; ?> grid-<?php echo $column; ?> grid-parent" style="background-image: url( '<?php echo esc_url( $prev_post_thumbnail ); ?>' );">
							<div id="prev-post-content-wrapper" class="<?php if ( $has_prev_and_next ) { echo 'has-prev-and-next'; } ?>">
								<div class="description">Previous Post</div>
								<div class="title"><?php echo $prev_post->post_title; ?></div>
							</div>
							<div class="overlay"></div>
						</div><!-- previous-post -->
					</a>
				<?php } ?>

				<?php if ( !empty( $next_post ) ) { ?>
					<a href="<?php echo get_permalink( $next_post->ID ); ?>">
						<div id="next-post" class="tablet-grid-<?php echo $column; ?> grid-<?php echo $column; ?> grid-parent" style="background-image: url('<?php echo esc_url( $next_post_thumbnail ); ?>');">
							<div id="next-post-content-wrapper" class="<?php if ( $has_prev_and_next ) { echo 'has-prev-and-next'; } ?>">
								<div class="description">Next Post</div>
								<div class="title"><?php echo $next_post->post_title; ?></div>
							</div>
							<div class="overlay"></div>
						</div><!-- next-post -->
					</a>
			<?php } ?>

	</div><!-- #post-navigation -->

}

#post-navigation {

	@include full-width;

	text-align: center;
	transition: all .2s ease;

	#prev-post-content-wrapper,
	#next-post-content-wrapper {
		display: flex;
  		justify-content: center;
  		flex-direction: column;
		padding: 0 12%;
		min-height: 220px;
		z-index: 10;
		position: relative;
		transition: all .5s ease;

		&:hover {
			transform: scale(1.07);
		}
	}

	.description {
		font-weight: 500;
		font-size: 16px;
		color: #ffffff;
		margin-bottom: 9px;
	}
	.title {
		font-weight: 500;
		font-size: 24px;
	}

	a {
		color: #ffffff;
		z-index: 10;
		position: relative;
	}

	#prev-post,
	#next-post {
		background-size: cover;
		background-position: center center;
		position: relative;
		overflow: hidden;
	}

}

@media screen and ( min-width: 768px ) {
	#post-navigation {

		#prev-post-content-wrapper,
		#next-post-content-wrapper {
			min-height: 300px;
		}
		#prev-post-content-wrapper.has-prev-and-next {
			text-align: right;
		}

		#next-post-content-wrapper.has-prev-and-next {
			text-align: left;
		}
	}
}