Customize Post Navigation Buttons at Bottom of Blog Posts

[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!

[Tom]

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 🙂

[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!

[Tom]

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 🙂

[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

[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! 🙂

[Tom]

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 🙂

[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!

[Tom]

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 🙂

[Finance Clever]

Awesome!
Thanks for all the help 🙂

[Tom]

You’re welcome 🙂

[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!

[Tom]

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;
}

[Finance Clever]

No problem. Thank you!

[Tom]

You’re welcome! 🙂

[Author]

Posts