Topic: Back, Random, Next Buttons

Robin Harford
January 2, 2025 at 6:02 am

Happy New Year,

On my homepage (https://www.eatweeds.co.uk/) I show a single post.

At the bottom of that post there are navigation links to my other blog posts.

Example: “1 2 … 82 Next →”

That looks messy, and instead, what I would like are two buttons that says “Next”, “Random” and when a visitor clicks through to the next post, at the bottom of that one, there are three simple buttons, “Back”, “Random”, “Next”.

But if they click the “Random” button they get shown a random post.

Here is an example on Seth Godin’s blog, https://seths.blog/2024/12/the-reality-of-meliorism/

Is this possible? If so, how?

Many thanks in advance.

Robin Harford

January 2, 2025 at 9:08 am

OK I have managed to create buttons for ‘previous’ and ‘next’ using this code:

/* General styling for both buttons */
.prev.page-numbers, .next.page-numbers {
    display: inline-block; /* Makes the links behave like buttons */
    padding: 10px 20px; /* Adjust padding for button size */
    width: 120px; /* Set a fixed width for consistent size */
    text-align: center; /* Centres the text inside the button */
    background-color: #000000; /* Button background colour (black) */
    color: #ffffff; /* Text colour (white) */
    text-decoration: none; /* Remove underline */
    border-radius: 5px; /* Rounded corners */
    font-size: 16px; /* Adjust font size */
    font-weight: bold; /* Make text bold */
    transition: background-color 0.3s; /* Smooth hover effect */
    box-sizing: border-box; /* Ensure padding is included in the width */
}

/* Hover effect */
.prev.page-numbers:hover, .next.page-numbers:hover {
    background-color: #333333; /* Slightly lighter black for hover */
}

/* Remove arrows from the buttons */
.prev.page-numbers span[aria-hidden="true"], .next.page-numbers span[aria-hidden="true"] {
    display: none; /* Hides the arrow icons */
}

/* Remove default "Previous" text */
.prev.page-numbers {
    width: 120px; /* Ensure consistent button size */
    text-align: center; /* Align text properly */
}

/* Ensure space between the buttons */
.prev.page-numbers {
    margin-right: 10px; /* Add space to the right of "Back" button */
}

.next.page-numbers {
    margin-left: 10px; /* Add space to the left of "Next" button */
}

However I cannot work out how to change the text from ‘Previous’ to ‘Back’.

And I cannot work out how to change the string of page numbers between the buttons into a button that says ‘Random’ and when clicked takes the reader to a random post.

Any ideas?

Thanks.

David
January 2, 2025 at 9:23 am

Hi there and Happy New Year.

It should be possible but may take a little custom code for the random link
But question – what happens when the random link is followed to the single post. Will that single post also have a random link ?
Robin Harford
January 2, 2025 at 10:27 am

Hi David,

Yes that’s correct.

When the random link is followed to the single post.

That single post will also have a random link.

Seth Godin’s example here: https://seths.blog/2024/07/the-zoom-stretch/

Thanks.
Ying
January 2, 2025 at 1:29 pm
Use this PHP code to change previous to back:
```
add_filter( 'generate_previous_link_text', function() {
    return 'Back';
} );
```
But I would recommend creating a block element – post navigation, so you can change the text freely, and use block settings to style the buttons.

Also, you can add a query loop block to the element, between the back and next buttons, you will add a button to the query loop, and set the button’s dynamic link to post, add orderby:random and exclude:current post parameters to the query loop block.
Robin Harford
January 2, 2025 at 2:45 pm

Hi Ying,

I have managed to create Back/Next buttons at the bottom of my posts, https://www.eatweeds.co.uk/alexanders-smyrnium-olusatrum/.

I don’t understand how to create the random button though.

And also, on my homepage (https://www.eatweeds.co.uk/), the page numbers show at the bottom of the post. But not on any of the other posts that I can find.

How do I remove them?

Thanks.
Ying
January 2, 2025 at 4:55 pm
Your homepage is the blog page, the pagination is NOT post navigation, the block element – post navigation does not do the same thing.

If you remove the pagination, your visitors won’t be able to see the content in the next page, are you sure you want to remove them?

As for the random button, change your current post navigation structure to this:
```
- container A
 -- grid
  --- grid container A 
    ---- container (BACK)
  --- grid container B 
    ---- container (RANDOM)
     ----- query loop
       ----- grid
         ------ Post template
            ------- Button 
  --- grid container C 
    ---- container (NEXT)
```
Set the button’s dynamic link to post, add orderby:random and exclude:current post parameters to the query loop block.
Robin Harford
January 2, 2025 at 11:52 pm

Thank you.
Ying
January 3, 2025 at 9:46 am

You are welcome 🙂

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Back, Random, Next Buttons