[Resolved] Next / Previous Links in Blog Posts

[arthur]

Hi, I’m having some trouble with the next/previous links in the blog posts. Some blog post titles are really, really long, and so they look less than beautiful.

A few solutions would work for me, but I haven’t been able to get anything to work yet:
1. Clip the text past a certain number of characters, but in PHP and not in CSS.
2. Change the visible link text to ‘Next’ and ‘Previous’, while leaving the title of the a tag as the post title.
3. Creating buttons maybe?
4. A different easy and elegant solution.

I thought about doing away with the links altogether, but I’m minimizing navigation abilities to begin with and so I don’t want to limit these as well.

Thanks!

[Tom]

Any reason you don’t want to use CSS for #1?

[arthur]

I started using CSS for #1 and unexpected things were happening.

But really, I think #2 is my best option; unless you feel #1 makes the most sense….

Thanks!

[Leo]

What unexpected things were happening?

[arthur]

I don’t remember, I think because they aren’t block elements they weren’t cutting off the text.

[Tom]

You could do this:

.post-navigation span {
    display: inline-block;
    width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

[arthur]

Thank you, that did it!!

[Tom]

You’re welcome 🙂

[Jessica]

I just came across this and had a similar issue with the previous and next links. The post titles are quite long and shortening them with the above css doesn’t solve the problem since it isn’t obvious that they are previous and next links. (clearly WE know they are, but most people don’t really read or get it).

I’m trying to change the link text to just “Previous Article” and “Next Article” and keep breaking the page when I add code into the single.php template – clearly I’m putting it in the wrong place if that’s happening) but I was hoping there’s either a function to change the text or a suggestion of WHERE to the put the code which will replace the current previous/next long-text links.

Here’s what the links currently look like (see pic). I can made them less wide but you see the issue with the length of the title and why “next/previous article” would be more efficient.

Suggestions? The codex isn’t helpful b/c it next says where to insert the code & since GP is set up a little different, I keep breaking the page(s). 🙁

[Jessica]

I just foundn a different post in this forum and came across your code here: https://gist.github.com/generatepress/bb5a62c2a94b94bedad0

It works but had to try it twice as there wasn’t an indication if it should be in the functions file or the single post file.

I pasted it in the functions file, and VIOLA! All is working great now.

[Tom]

Awesome! 🙂

[litesprint]

This is the code:

<?php previous_post_link( '<div class="nav-previous"><span class="prev" title="' . __('Previous post','generate') . '">%link</span></div>', __('Previous post','generate') ); ?>

Works fine, but I want the link title (not the linking text) to be the post title instead of “Previous post”. Can you please send me the revised code?

[David]

Hi there,

the default Post Navigation will display the Post tiles of the Next and Previous links.
Are you trying to add this somewhere else?

[Jessica]

I worked on this a few years back mostly to get it styled right and I have had no issues. My previous and next links show the post title.

I just looked at my custom template and I didn’t add anything extra to make the links appear, only edited the css to make them appear how they do.

You can see examples on my blog. At the bottom of any post you’ll see the previous/next links in the form of post title.

I’m in the process of restyling a few things since the titles are longer and I don’t love how wide the links are, but the functionality works perfectly fine.

What is the issue you’re having?

[litesprint]

I changed the default navigation texts to display just “Previous/Next Post” instead of the post titles, using the code I’ve pasted above. However, it’s also changed the HTML ‘title’ attribute from the post name to “Previous/Next Post”, which I don’t want. So how can I modify the code above so that the visible link text is still “Previous/Next post” but the HTML ‘title’ attribute has the actual post name, so that hovering over the link would display the post name?

[Author]

Posts