iThemes site-wide discount! 40% OFF Grab this offer!

How to Customize Post Navigation In GeneratePress Theme?

Customize GeneratePress post navigation make easy with this guide. Read the entire post attentively.

Professional bloggers well know about GeneratePress, but if you are new to the blogging journey, you should have little knowledge about it. If you already know about GeneratePress, then skip this part and jump to the step-by-step guide.

GeneratePress is a WordPress multipurpose theme that is used to design any type of website with any Gutenberg plugin or page builder plugin

Even you can make a website using its free version with Gutenberg blocks. But when you going to apply professional looks on your website, you need to install its premium version that is only $59 per year for a single site with unlimited updates and supports. 

But in both the free and premium versions, you can’t customize post navigation by the default customizer. The default post navigation will look like the below screenshot.

How to Customize Post Navigation In GeneratePress Theme? 1
GeneratePress default post navigation
How to Customize Post Navigation In GeneratePress Theme? 2
GeneratePress customized post navigation

In this post, I’ll share a guide on how to customize post navigation in GeneratePress theme. The below customization can be applied only to its premium versions. So if you don’t purchase its premium version till now, buy it now.

Note: You can use customized post navigation as a related post under the single post content. Because GeneratePress has no default-related post feature. This is a big disadvantage of this theme.

How to Customize Post Navigation of GeneratePress

First of all, install and activate GeneratePress premium plugin on your WordPress site and activate its all modules.

Then go WordPress Appearance> Elements.

GeneratePress elements

Now click on the Add New Element and choose ‘Hook’ from its drop-down menu, then click the ‘Create’ button.

GeneratePress hook

Enter the name of your hook in the Add title field. Then enter the below codes in the code snippet box.

<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>

Now change the hook name default to generate_after_content then tick mark on Execute PHP.

Add new hook

Next step: click on the ‘Display Rules’ then choose your location. Select ‘post’ from the drop-down menu.

Generatepress custom hook display

Finally ‘Publish’ the custom hook.

Next step: Go to the theme Customize section, which is under the WordPress Appearance menu.

Then click on the ‘Additional CSS’ and enter the below CSS codes.

/* 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;
}

Note: if you have little knowledge about CSS, you can customize this customization as your need. You can change font size, color, effect, and money more from this custom CSS section.

Your custom post navigation will look like the below image

GeneratePress customized navigation

Now your all customizations have been completed. Enjoy your smart navigation or related post section under the single post content of the GeneratePress theme. 

If you have questions related to this guide, please comment below.

Code source: GeneratePress site library.

Previous

7 Best Woocommerce Wallet Plugins Compared

Schema Theme Vs Generatepress: Which Theme Is Best?

Next

A team of WordPress experts that always ready to share WordPress related tips, tricks, plugins, and themes review, and more.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.