[Support request] Custom Post Navgiation Next Previous Post

[Shami]

The same old problem, which happened after using Tom’s code, has happened: The pagination on my archive pages has disappeared. The rest is fine.

Infinite scroll isn’t working.

My archive pages are only showing the default number of posts, which is five. After that, there seems no way to access older posts.

Also, it’s worth noting that there are more than 20 posts.

Note: Tom had provided the solution to me earlier for this exact problem. But since the PHP code David has provided is different, I guess, the solution would be different.

[David]

Try changing this:

if ( ! $post ) {

to:

if ( ! $post || ! is_single() ) {

[Shami]

It didn’t work.

[David]

Edited above – try that.

[Shami]

Still not working. I tried. The pagination doesn’t appear in the blog archive.

[Tom]

Can you share the complete PHP function you’re using right now?

[Shami]

I’m using the Generatepress child theme.

Here is the full function.php code:

<?php
/**
 * GeneratePress child theme functions and definitions.
 *
 * Add your custom PHP in this file. 
 * Only edit this file if you have direct access to it on your server (to fix errors if they happen).
 */
//custom php 
function filter_single_post_navigation($output, $format, $link, $post){

    if ( ! $post || ! is_single() ) {
	  return '';
    }

    $title = get_the_title($post);
    $url   = get_permalink($post->ID);
    $container_class = 'previous';
    $class = 'prev post-nav-button';
    $rel   = 'post-navigation prev';
    $label = __( 'Previous Article:', 'generatepress' );
    
    if('next_post_link' === current_filter()){
        $container_class = 'next';
        $class = 'next post-nav-button';
        $rel = 'next';
        $label = __( 'Next Article:', 'generatepress' );
  }
  return "<div class='$container_class'><span class='label'>$label</span><a href='$url' rel='$rel'><span class='label'></span>$title</a></div>";
}
add_filter( 'previous_post_link', 'filter_single_post_navigation', 10, 4);
add_filter( 'next_post_link', 'filter_single_post_navigation', 10, 4);

//for changing comment section title
add_filter( 'generate_comment_form_title', function() {
    $comments_number = get_comments_number();

    return sprintf( // WPCS: XSS OK.
        /* translators: 1: number of comments */
        esc_html( _nx(
            'Reader Comments (%1$s)',
	    'Reader Comments (%1$s)',
            $comments_number,
            'comments title',
            'generatepress'
        ) ),
        number_format_i18n( $comments_number ),
	get_the_title()
    );
} );

add_filter( 'generate_show_post_navigation', '__return_false' );
add_action( 'generate_before_comments_container', function() {
    if ( is_single() ) {
        the_post_navigation();
    }
} );

//custom php end

function generatepress_child_enqueue_scripts() {
	if ( is_rtl() ) {
		wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
	}
}
add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );

add_action('generate_after_header','generate_add_title_below_header');
function generate_add_title_below_header()
{ 
	// If we're not on a page, don't do anything
	if ( is_page() || is_single() ) {
	?>
	<div class="page-header-content generate-page-header generate-content-header page-header-title">
		<div class="inside-page-header-container inside-content-header grid-container grid-parent">
			<header class="entry-header">
				<h1 class="entry-title" itemprop="headline"><?php the_title(); ?></h1>
			</header><!-- .entry-header -->
		</div>
	</div>
	<?php }
}

[Shami]

Parent theme function.php code:

[David]

Change this:

add_filter( 'generate_show_post_navigation', '__return_false' );

to:

add_action( 'wp', function() {
    if ( is_single() ) {
        add_filter( 'generate_show_post_navigation', '__return_false' );
    }
} );

[Shami]

That worked. Thanks.

[David]

You’re welcome

[Shami]

I’ve to change the post title color to white on hover. How do I do it? I’m finding it difficult to find the section where I could put:

color: #ffffff;

This is my current CSS:

.post-navigation .nav-links {
display: flex;
}

@media (max-width: 768px) {
.post-navigation .nav-links {
flex-direction: column;
}
}

.post-navigation .nav-links div {
display: flex;
flex-direction: column;
flex: 1 0 calc(50% – 2px);
margin: 2px;
padding: 30px;
box-sizing: border-box;
position: relative;
background-color: #ffffff;
border: 1px solid #f3f3f3;
transition: background 0.2s;
border-radius: 2px;
}

.post-navigation .nav-links div:hover {
background-color: #15c235;
}

.post-navigation .nav-links .previous {
text-align: right;
padding-left: 70px;

}

.post-navigation .nav-links .next {
padding-right: 70px;

}

.post-navigation .nav-links .label {
text-transform: uppercase;
font-size: 14px;
font-weight: 600 ;
font-family: ‘Lato’, sans-serif;
color: #3d4817;
/* Add font styles for Next-Prev Label */
}

.post-navigation .nav-links a {
font-size: 24px;
font-weight: 600;
font-family: ‘Lato’, sans-serif;
/* Add font styles for Post title */
}

.post-navigation .nav-links a:before {
content: ”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.post-navigation .nav-links a:after {
border-left: 1px solid #999;
border-bottom: 1px solid #999;
content: ”;
display: block;
height: 20px;
opacity: 0.8;
position: absolute;
top: calc(50% – 10px);
width: 20px;
}

.post-navigation .nav-links .previous a:after {
left: 30px;
transform: rotate(45deg);
transition: all 0.2s;
}

.post-navigation .nav-links .next a:after {
transform: rotate(225deg);
right: 30px;
transition: all 0.2s;
}

.post-navigation .nav-links .previous a:hover:after {
left: 20px;
}

.post-navigation .nav-links .next a:hover:after {
right: 20px;
}

Note: This has to be done in the same next-previous post navigation at the end of the blog post. This isn’t a different topic. So I’ve asked in the same thread.

[David]

Add this CSS:

.post-navigation .nav-links div:hover a {
    color: #fff;
}

[Shami]

Hey, this is my current css:

/*css for previous next navigation in post*/
.post-navigation .nav-links {
display: flex;
}

@media (max-width: 768px) {
.post-navigation .nav-links {
flex-direction: column;
}
}

.post-navigation .nav-links div {
display: flex;
flex-direction: column;
flex: 1 0 calc(50% – 2px);
margin: 2px;
padding: 30px;
box-sizing: border-box;
position: relative;
background-color: #ffffff;
border: 1px solid #f3f3f3;
transition: background 0.2s;
border-radius: 2px;
}

.post-navigation .nav-links div:hover {
background-color: #15c235;
}

.post-navigation .nav-links div:hover a {
color: #fff;
}

.post-navigation .nav-links .previous {
text-align: right;
padding-left: 70px;

}

.post-navigation .nav-links .next {
padding-right: 70px;

}

.post-navigation .nav-links .label {
text-transform: uppercase;
font-size: 14px;
font-weight: 600 ;
font-family: ‘Lato’, sans-serif;
color: #3d4817;
/* Add font styles for Next-Prev Label */
}

.post-navigation .nav-links a {
font-size: 24px;
font-weight: 600;
font-family: ‘Lato’, sans-serif;
/* Add font styles for Post title */
}

.post-navigation .nav-links a:before {
content: ”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.post-navigation .nav-links a:after {
border-left: 1px solid #999;
border-bottom: 1px solid #999;
content: ”;
display: block;
height: 20px;
opacity: 0.8;
position: absolute;
top: calc(50% – 10px);
width: 20px;
}

.post-navigation .nav-links .previous a:after {
left: 30px;
transform: rotate(45deg);
transition: all 0.2s;
}

.post-navigation .nav-links .next a:after {
transform: rotate(225deg);
right: 30px;
transition: all 0.2s;
}

.post-navigation .nav-links .previous a:hover:after {
left: 20px;
}

.post-navigation .nav-links .next a:hover:after {
right: 20px;
}
/*css for previous-next navigation in post end*/

New Goal: I’ve to make the archive page navigation look like:
Previous 2 3 4 .. Next
as buttons with color:#009b19

Currently, they are appearing as simple links.

Please check the older threads above. I want to keep earlier settings intact. Use my css if possible so that I won’t have to change colors again.

[Tom]

Hi there,

You can do this to make them look like buttons:

.nav-links > * {
    display: inline-block;
    padding: 5px 10px;
    background: #222;
    color: #fff;
}

Adjust the colors as needed 🙂

[Author]

Posts