Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Next / Previous Links in Blog Posts

Home Forums Support Next / Previous Links in Blog Posts

Viewing 15 posts - 1 through 15 (of 31 total)
  • Author
    Posts
  • #442621
    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!

    GP Premium 1.5.6
    #442739
    Tom
    Lead Developer
    Lead Developer

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

    #442936
    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!

    #443120
    Leo
    Staff
    Customer Support

    What unexpected things were happening?

    #444465
    arthur

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

    #444521
    Tom
    Lead Developer
    Lead Developer

    You could do this:

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

    Thank you, that did it!!

    #447462
    Tom
    Lead Developer
    Lead Developer
    #503763
    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). 🙁

    Current Previous and Next Link Text

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

    #503908
    Tom
    Lead Developer
    Lead Developer
    #1010357
    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?

    #1010498
    David
    Staff
    Customer Support

    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?

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

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

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