how to customize post navigation in GeneratePress

How to Customize Post Navigation In GeneratePress Theme?

Last update on:

Customizing GeneratePress post navigation is made easy with this guide. Please read the entire post attentively.

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

GeneratePress is a WordPress multipurpose theme that is used to design any type of website using default WordPress Gutenberg editor or other popular page builder plugin

Even with the free version, you can build a website using Gutenberg blocks. However, for a more professional appearance, you’ll want to consider the premium version, priced at just $59 per year for a single site, which includes unlimited updates and support.

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 customized post navigation

In this post, I’ll share a guide on how to customize post navigation in the GeneratePress theme. The below customization can be applied exclusively to its premium version. If you haven’t purchased the premium version yet, consider buy it now.

Note: You can utilize the customized post navigation as a related post section under the single post content. GeneratePress, unfortunately, does not come with a default related post feature, which can be considered a significant limitation of this theme.

How to Customize Post Navigation in GeneratePress:

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

Firstly, install and activate the GeneratePress premium plugin on your WordPress site, and ensure that all modules are activated.

Next, navigate to Appearance > Elements.

GeneratePress elements

Now, click on “Add New Element” and select “Hook” from the drop-down menu. Afterward, click the “Create” button.

GeneratePress hook

Enter the name of your hook in the “Add title” field, and then input the following codes into 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 to “generate_after_content” and select the “Execute PHP” option by ticking the checkbox.

Add new hook

Next step: Click on “Display Rules” and choose your desired 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 “Additional CSS” and input the following 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: Even with just basic CSS knowledge, you can customize this style as needed. The custom CSS code allows you to make changes to font size, color, effects, and much more.

Your custom post navigation will look like the image below:

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. 

Now that all your customizations have been completed, you can enjoy the smart navigation or related post section under the single post content of the GeneratePress theme.

If you have any questions related to this guide, please feel free to leave a comment below.

Code source: GeneratePress site library.

What’s your Reaction?
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Author

  • Palash Talukder

    Palash Talukdar is a digital marketer & the founder of WP Basic Pro. He has been building and managing WordPress websites for 5+ years. He loves to write about WordPress, SEO, marketing, productivity, and web performance.

    View all posts
Subscribe
Notify of
guest

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

0 Comments
Inline Feedbacks
View all comments
Saeed Khosravi