[Support request] how to make Previous and Next post navigation as like on Dispatch single post

[Deepa Chokkakula]

How to make post navigations on a single post as like on Dispatch. The Theme, I am using is marketer theme.

[Elvin]

Hi there,

Dispatch uses a Hook Element containing this code:

<div id="post-nav">
	<?php 
	global $post;
	$prevPost = get_previous_post(false);
	$post_type = get_post_type();
	
	if ( $prevPost ) {
		$args = array(
			'posts_per_page' => 1,
			'include' => $prevPost->ID,
			'post_type' => $post_type,
		);
		
		$prevPost = get_posts($args);
		foreach ($prevPost as $post) {
			setup_postdata($post);
			?>
				<a class="post-previous" href="<?php the_permalink(); ?>">
					<div class="post-nav-wrap" style="background: linear-gradient(0deg,rgba(52,62,71,0.1),rgba(52,62,71,0.3)),url('<?php the_post_thumbnail_url(); ?>');">
						<div class="post-nav"><?php _e( 'Previous', 'generatepress' ); ?></div>
						<h3 class="post-nav-title"><?php the_title(); ?></h3>
					</div>
				</a>
			<?php
			wp_reset_postdata();
		} //end foreach
	} // end if
         
	$nextPost = get_next_post(false);
	
	if ( $nextPost ) {
		$args = array(
			'posts_per_page' => 1,
			'include' => $nextPost->ID,
			'post_type' => $post_type,
		);
		
		$nextPost = get_posts($args);
		foreach ( $nextPost as $post ) {
			setup_postdata($post);
			?>
				<a class="post-next" href="<?php the_permalink(); ?>">
					<div class="post-nav-wrap" style="background: linear-gradient(0deg,rgba(52,62,71,0.6),rgba(52,62,71,0.3)),url('<?php the_post_thumbnail_url(); ?>');">
						<h3 class="post-nav-title"><?php the_title(); ?></h3>
						<div class="post-nav"><?php _e( 'Next', 'generatepress' ); ?></div>					
					</div>
				</a>
			<?php
			wp_reset_postdata();
		} //end foreach
	} // end if
?>
</div>

And here’s the settings for it:
https://share.getcloudapp.com/GGu6DZpz
https://share.getcloudapp.com/6quQ69vm

It also removes the post navigation on the customizer settings.
https://share.getcloudapp.com/Qwu9NxLq

[Alexander]

Hi! Is there any CSS to be applied to this nice post navigation?

[David]

Hi there,

here is the CSS:

/* Post Navigation */
#post-nav a {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 50%;
    flex: 1 0 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    #post-nav a {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 100%;
        flex: 1 0 100%;
    }
}

#post-nav, #post-nav .post-nav-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#post-nav {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 60px;
}

#post-nav .post-nav-wrap {
    background-size: cover !important;
    background-position: center center !important;
    min-height: 120px;
    height: 100%;
    padding: calc(6% + 1em) 5%;
    -webkit-box-shadow: inset 0 -50px 70px 20px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 -50px 70px 20px rgba(0, 0, 0, 0.5);
    -webkit-transition: -webkit-box-shadow 500ms;
    transition: -webkit-box-shadow 500ms;
    transition: box-shadow 500ms;
    transition: box-shadow 500ms, -webkit-box-shadow 500ms;
    position: relative;
	box-sizing: border-box;
}

#post-nav .post-nav-wrap:hover {
    -webkit-box-shadow: inset 0 -90px 70px 20px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 -90px 70px 20px rgba(0, 0, 0, 0.5);
}

.post-nav-wrap>* {
    color: #fff;
}

.post-nav-date {
    font-size: 0.9em;
}

.post-nav-title {
    margin: 5px 0 !important;
}

.post-nav {
    min-width: 60px;
    position: absolute;
    top: 0;
    border-radius: 0 0 2px 0;
}

.post-nav:first-child {
    left: 0;
}

.post-nav:last-child {
    right: 0;
}

.post-nav {
    padding: 6px 12px;
    border-radius: 3px;
    font-size: 0.7em;
    text-transform: uppercase;
    background-color: #ff1956;
    color: #fff !important;
}

[Alexander]

Thank you, David!

[Deepa Chokkakula]

Thanks David and Elvin for your valuable support

[David]

Glad we could be of help!

[Author]

Posts