[Support request] Changing post navigation text to NEXT instead of TITLE

Home Forums Support Changing post navigation text to NEXT instead of TITLE

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #737100
    manaadiar

    Hi there.. Please see this screen shot..I am using a child theme.. While I can change style using CSS, I want to know which file I need to copy from parent theme to amend the post navigation to show NEXT or PREVIOUS instead of the actual title like it is showing now..

    Also I would like the PREVIOUS to show at left edge of the block and NEXT on the right edge removing the line break/wrap within the block..

    I want to make changes in the child theme as I don’t want this change to disappear when there are theme updates to parent..

    post navigation text change

    #737583
    Tom
    Lead Developer
    Lead Developer

    To change the text, add these functions:

    add_filter( 'next_post_link', function( $output, $format, $link, $post ) {
      	if ( ! $post ) {
    	  return '';
    	}
      
    	return sprintf(
    		'<div class="nav-next"><span class="next"><a href="%1$s" title="%2$s">Next</a></span></div>',
    	  	get_permalink( $post ),
    	  	$post->post_title
    	);
    }, 10, 4 );
    
    add_filter( 'previous_post_link', function( $output, $format, $link, $post ) {
      	if ( ! $post ) {
    	  return '';
    	}
      
    	return sprintf(
    		'<div class="nav-previous"><span class="prev"><a href="%1$s" title="%2$s">Previous</a></span></div>',
    	  	get_permalink( $post ),
    	  	$post->post_title
    	);
    }, 10, 4 );

    To make them appear on either side, you can do this:

    .post-navigation {
        display: flex;
    }
    
    .nav-previous {
        margin-right: auto;
    }
    
    .nav-next .next:before {
        display: none;
    }
    
    .nav-next .next:after {
        font-family: GeneratePress;
        content: "\f105";
        text-decoration: inherit;
        position: relative;
        margin-left: .6em;
        width: 13px;
        text-align: center;
        display: inline-block;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        speak: none;
    }
    #738297
    manaadiar

    That worked perfectly, thanks.. Can I have a Title Tip as well which will show the title of the post..

    #739104
    Tom
    Lead Developer
    Lead Developer
    #739979
    manaadiar

    Hi Tom, the title tip is showing but the Previous and Next has a break now like it was previously..

    Prev and Next

    #740122
    Tom
    Lead Developer
    Lead Developer

    Ah, sorry about that! I just adjusted the functions above 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.