Customize Post Navigation Buttons at Bottom of Blog Posts

Home Forums Support Customize Post Navigation Buttons at Bottom of Blog Posts

Home Forums Support Customize Post Navigation Buttons at Bottom of Blog Posts

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #90269
    Finance Clever

    Hello,

    I recently installed the GeneratePress theme and bought the add-ons. I am trying to change the way post navigation buttons look at the bottom of blog post.

    http://financeclever.com/how-much-to-retire/

    On the link above you can see how these navigation buttons currently look at the end of the post (I am talking about the “previous/next” buttons just to be clear).

    I would like them to look something like this:
    – Left side of the page –> “previous post (chronologically) + post title”
    – Right side of the page –> “next post (chronologically) + post title”

    I have looked for plug-ins that could get me what I need but have had no luck. After a little bit of research, I am thinking I will have to do it by modifying a few lines of code.

    I am fairly new to WordPress and and don’t have a strong coding background. I’d appreciate any help with this matter.

    Thanks!

    #90335
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    So you’re basically wanting to add “Previous Post” and “Next Post” text before each item? I believe they’re already done in chronological order.

    Let me know ๐Ÿ™‚

    #90362
    Finance Clever

    Hi Tom,

    Thank you for your prompt response.
    Yes, I would like to add โ€œPrevious Postโ€ and โ€œNext Postโ€, and possibly have the “next post” link appear at the right of the page and the “previous post” to appear to the left of the page, as opposed to one top of the other (current layout). My idea is that it would look something like this.

    Previous post: article 1 Next post: article 3

    With the “Next post: article 3” as close as possible to the right margin

    Thanks again!

    #90678
    Tom
    Lead Developer
    Lead Developer

    Ok, so doing this means we have to overwrite the entire function that deals with pagination etc..

    This would be your code: https://gist.github.com/generatepress/db03ed9158a57799a20e

    You would add this inside your child theme’s functions.php file, or using the Code Snippets WP plugin.

    Let me know if you have any questions ๐Ÿ™‚

    #90792
    Finance Clever

    I did something that messed up my entire page and can’t even access it now ๐Ÿ™ Please help!

    Here is what I did:

    1. Downloaded and activated the child theme.
    2. Went to the editor.
    3. Added the code you shared with me inside the child theme’s functions.php file below the code that was already there.
    4. I went back to the site to check if it had been modified the way I wanted. No luck.
    5. Went back to the child theme’s functions.php and added the code you sent. I added it over the existing code so the only code there what you sent me. I think this was what messed it up since from this point I haven’t been able to access my page at all. I get the following error message:

    “Parse error: syntax error, unexpected ‘}’ in /home4/gusperra/public_html/wp-content/themes/generatepress_child/functions.php on line 50”

    You can see for yourself if you try to open financeclever.com

    I know I probably did something very dumb ๐Ÿ™ I hope you can help me

    Thanks,

    Juan

    #90801
    Finance Clever

    Please disregard the previous message. I was able to fix the issue by re-inserting the code I had deleted through my hosting account, what a relief!

    Going back to the original issue:
    I now see the words “previous” and “next” (great!)

    Only three minor issues left:

    1. Any way the “Next article” link can be aligned to right of the page? As opposed to being on the left right under previous. So that it looks something like this:

    http://www.yellowtreehouse.com/capsule-wardrobe-update/

    2. There is no space between the words “previous” and “next”, and the article’s name. It looks something like this: NextArticle 3. What can I do to get the space?

    3. When I return to the parent theme (Generate Press), I don’t see the words “previous” and “next”. Is this normal? Am I supposed to stay in the child theme and customize everything again from there?

    Thank you again for your help and patience! ๐Ÿ™‚

    #90877
    Tom
    Lead Developer
    Lead Developer

    1. This CSS should do it:

    @media all and (min-width: 769px) {
        .nav-previous {
            float: left;
            max-width: 50%;
        }
        .nav-next {
            float: right;
            max-width: 50%;
        }
    }

    2. I updated the code to include the spaces: https://gist.github.com/generatepress/db03ed9158a57799a20e

    3. You’ll need to keep the child theme activated. What do you mean customize everything again? All of your customizer options will be preserved – the only thing you’ll lose is if you were editing the core theme files.

    Hope this helps ๐Ÿ™‚

    #90908
    Finance Clever

    1. Done, looks good. THANK YOU!

    2. Done, looks good. THANK YOU!

    3. My top navigation menu looked disorganized when activating the child theme so I assumed other things I had done would need , but so far it looks like only the top navigation needed re-customizing.

    I have a few questions regarding the child theme. While keeping the child theme activated, do I still get all the benefits of the main Generate Press theme (SEO & microdata, secure & stable, etc.)?
    Is there any downside to having the child theme active vs having the main Generate Press theme?

    Thank you for all the help once again!

    #90916
    Tom
    Lead Developer
    Lead Developer

    Ah, when you change themes, you need to re-set the “Theme Location” in “Appearance > Menus”. Doing so will bring your menu back to normal.

    There’s no downside to using child themes. They use all of the core theme functions, but allow you to add your own functions and CSS as well ๐Ÿ™‚

    #90948
    Finance Clever

    Awesome!
    Thanks for all the help ๐Ÿ™‚

    #91034
    Tom
    Lead Developer
    Lead Developer
    #91594
    Finance Clever

    Hi Tom,

    Sorry to bother you again. As I get ready to officially launch my site, I am working on fine tuning some details and I would like to make a few changes to the “previous” and “next” buttons. How can I make them:

    1. So that the words “next” and “previous” are black or dark gray in color
    2. So that the text of the post (i.e. Think Differently About Your Money) is blue (and therefore more obvious to the user that it is a clickable link)

    Right now I have them backwards as you can see by opening the link below.

    http://financeclever.com/basic-principles-to-thrive-financially/

    This is the current CSS code I have:


    @media
    all and (min-width: 769px) {
    .nav-previous {
    float: left;
    max-width: 50%;
    }
    .nav-next {
    float: right;
    max-width: 50%;
    }
    .nav-previous {
    color: blue;
    font-size: 16.5px;
    }
    .nav-next {
    color:blue;
    font-size: 16.5px;
    }

    }

    Thank you!

    #91951
    Tom
    Lead Developer
    Lead Developer

    Sorry for not getting back to you sooner!

    This should do that:

    .post-navigation .nav-previous,
    .post-navigation .nav-next {
          color: #000;
    }
    
    .entry-meta .post-navigation a,
    .entry-meta .post-navigation a:visited {
          color: #0000cd;
    }
    
    .entry-meta .post-navigation a:hover {
          color: #222;
    }
    #92109
    Finance Clever

    No problem. Thank you!

    #92222
    Tom
    Lead Developer
    Lead Developer
Viewing 15 posts - 1 through 15 (of 21 total)
  • The topic ‘Customize Post Navigation Buttons at Bottom of Blog Posts’ is closed to new replies.