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

Home Forums Support Customizing Previous Post Title and Next Post Title

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #891122
    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.

    #891165
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #891478
    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.

    #891527
    David
    Staff
    Customer Support

    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.

    #891558
    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?

    #891565
    David
    Staff
    Customer Support

    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/

    #891586
    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.

    #891592
    David
    Staff
    Customer Support

    Which plugin are you using for the social sharing?

    #891594
    Eya

    I use Addtoany for the social sharing.
    Thanks.

    #891597
    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…

    #891614
    David
    Staff
    Customer Support

    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?

    #891619
    Eya

    Awesome! Thank you! I use Jetpack Related Posts

    #891627
    David
    Staff
    Customer Support

    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.

    #891633
    Eya

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

    #891653
    David
    Staff
    Customer Support

    Yes its a lot to take in – let us know if you get stuck πŸ™‚

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