[Support request] Customizing Previous Post Title and Next Post Title

[Eya]

Hi.My name is Eya.
I just got GP Premium today, have gone through the site library and wondering if it’s possible to customize the grey arrows for “Previous and next Post titles” to words like:
<Previous post title > Next post title>
Instead?

With the actual previous or Next post title showing?
That’s why I got the premium pack honestly but after going through The Site Library I couldn’t find any with Previous and Next Post Titles Displayed for users.
Thanks in advance for response.

[Tom]

Hi there,

The actual titles should display by default. Are you just wanting to put them on one line?

Any chance you can link us to one of your posts so we can see?

Let me know 🙂

[Eya]

Hi Tom. Thanks for your prompt response. Yes the titles display by default. I would love if in addition to the grey signs used for PREVIOUS AND NEXT, I see actual words like ‘NEXT POST” or “PREVIOUS POST guiding users to the Titles.

Secondly, is it possible to move the Next and Previous post up to show just immediately after blog post and not under some other plugins?
Here is a post from my blog: https://www.wivestownhallconnection.com/2016/07/fish-stew-how-to-cook-fish-stew.html

I’m sorry I have to use a post from another of my blogs to help explain myself properly: https://naijapidginenglish.blogspot.com/2016/01/una-still-dey-happy-new-year-o-how.html

Thank you so much Tom. I tried other Themes before now but didn’t get the speed I’m enjoying with GeneratePress. Thanks for giving us such a fast loading WordPress Theme.

[David]

Hi there,

1. You can use this CSS, although there isn’t much space with them aligned left and right:

#nav-below .nav-previous .prev:before, #nav-below .nav-next .next:before {
    width: auto;
    display: block;
    color: #000;
    font-weight: 700;
    margin: 0.5em 0;
}
#nav-below .nav-previous .prev:before {
     content: '← Previous Post';   
}
#nav-below .nav-next .next:before {
    content: 'Next Post →';
}
#nav-below {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
#nav-below .nav-previous, #nav-below .nav-next {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 46%;
        flex: 1 0 46%;
        text-align: center;
        margin: 2%;
        text-transform: uppercase;
}

2. The plugins you’re using for the related posts and sharing, do the provide a shortcode option? If so you would need to use that with a Hook Element. Let me know.

[Eya]

Hi David. Thank you so much for this help.
I must confess that I’m new to WordPress. Just migrated my blog from blogger and not sure how to use the codes or where to place them. Is there any way I can get further help please?

[David]

Of course, that code is CSS – simplest way is to add it to the Customizer > Additional CSS

More info here if you need it:

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

[Eya]

Thank you so much. I just read the info. Realized I haven’t answered the second question you asked:

“The plugins you’re using for the related posts and sharing, do the provide a shortcode option? If so you would need to use that with a Hook Element. Let me know.”

I checked and The Sharing Plugin has a place for Additional CSS. Not sure if that’s what ‘HOOK ELEMENT’ is about?

Will try adding the code you provided and give you feedback right away.
Thank you.

[David]

Which plugin are you using for the social sharing?

[Eya]

I use Addtoany for the social sharing.
Thanks.

[Eya]

Awesome! You are so genius!
The code is working. Next and Previous Post showing clearly now on my blog.
Thanks. My only wish left is to be able to change its position and take it up above those two plugins.
I’m happy…

[David]

Right so time to get introduce to the Hooks – they are places in the GP templates where you can add your own stuff. Here is a visual guide for where the main ones are:

https://docs.generatepress.com/article/hooks-visual-guide/

To use them we’re going create a Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

Go to Dashboard > Appearance > GeneatePress and activate the Elements module.
Then Dashboard > Appearance > Elements –> Add new –> Select Hook

1. Give it a title – something relevant eg. Social Sharing
2. Add the Addtoany shortcode to the content ie.

[addtoany]

3. Select the after_content hook from the list
4. Check Execute Shortcodes.
5. Go to Display Rules and set Location to Post > All Posts.

The social share icons should now be below the post navigation. All you need to do now is go to the Addtoany settings and uncheck the Placement: Display at bottom of posts.

Now we need to do the same with the related posts. Which plugin is that?

[Eya]

Awesome! Thank you! I use Jetpack Related Posts

[David]

Ok Jetpack has a few extra steps. You’re going to need to add some PHP – this article explains how:

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

If you’re not using a Child Theme then use the Code Snippets plugin, there is a link to it in the article above. Then create a new snippet and add this code and save:

function jetpackme_remove_rp() {
if ( class_exists( 'Jetpack_RelatedPosts' ) ) {
$jprp = Jetpack_RelatedPosts::init();
$callback = array( $jprp, 'filter_add_target_to_dom' );
remove_filter( 'the_content', $callback, 40 );
}
}
add_filter( 'wp', 'jetpackme_remove_rp', 20 );

Now create a new Hook Element, exactly like the one for the Social share in everyway except use this content:

<?php
if ( class_exists( 'Jetpack RelatedPosts' ) ) {
    echo do_shortcode( '[jetpack-related-posts]' );
}
?>

And check the Exectute PHP checkbox as well.

[Eya]

Thanks Again. I’m going to carefully read and try my best.
Will give you feedback when it’s done.
Thanks.

[David]

Yes its a lot to take in – let us know if you get stuck 🙂

[Author]

Posts