Next and Previous post written in navigation

[Amit]

I want to use Next post and Previous post written in navigation instead of arrows like this:
https://drive.google.com/file/d/1U7-Ee5UYlvi-7y7y1WV6Gd_Y77dNiWpH/view?usp=drivesdk

How to do that??

[David]

Hi there,

can you provide an example of how you would like them to look ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Amit]

Here is the example:

https://drive.google.com/file/d/1USfCutL51ICgYyH3PHAq4X7TM1_MzRB-/view?usp=drivesdk

[Amit]

Here is the example:

https://drive.google.com/file/d/1USfCutL51ICgYyH3PHAq4X7TM1_MzRB-/view?usp=drivesdk

[Amit]

Hey David, I have given the example.

Would you tell me how to do that???

[David]

Add this PHP Snippet:

add_filter( 'generate_post_navigation_args', function( $args ) {
    $args['next_format'] = '<div class="nav-next"><span class="post-nav-label">Next article</span><span class="next" title="' . esc_attr__( 'Next', 'generatepress' ) . '">%link</span></div>';
    $args['previous_format'] = '<div class="nav-previous"><span class="post-nav-label">Previous article</span><span class="prev" title="' . esc_attr__( 'Previous', 'generatepress' ) . '">%link</span></div>';

    return $args;
} );

And then this CSS:

#nav-below {
    display: flex;
    justify-content: space-between;
}

#nav-below div {
    flex: 1 0 50%;
    position: relative;
    margin-top: 1em;
    margin-bottom: 1em;
}

#nav-below div a:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#nav-below div span {
    display: block;
}

.post-nav-label {
    font-size: 14px;
    opacity: 0.5;
    margin-bottom: 0.5em;
}

.nav-next {
    text-align: right;
}

@media (max-width: 768px) {
    #nav-below {
        flex-direction: column;
    }

    #nav-below div {
        flex: 1 0 100%;
    }

    .nav-next {
        text-align: left;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Amit]

Where will I add the PHP snippet??

I mean functions.php or header.php or else ???

[David]

This article explains:

https://docs.generatepress.com/article/adding-php/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts