-
Hello,
I’m trying to decrease the number of page links shown in my post pagination to 2, using the following code:
add_filter( 'generate_pagination_mid_size','tu_increase_pagination_numbers' ); function tu_increase_pagination_numbers() { return 2; // number of page numbers to be displayed }But nothing is changing it still shows at least 3 page links.
-
Hi there,
Try setting it to 1 instead:
add_filter( 'generate_pagination_mid_size','tu_increase_pagination_numbers' ); function tu_increase_pagination_numbers() { return 1; // number of page numbers to be displayed } -
Set to 1 but stil nothing has changed. Otherwise is it possible to add a rule for mobile for the next and previous text snippet? I’m now using this code:
//Generate pagination next link text add_filter( 'generate_next_link_text', function() { return 'Volgende<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"/> </svg>'; } ); //Generate pagination previous link text add_filter( 'generate_previous_link_text', function() { return '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"/> </svg>Vorige'; } );But I want the previous and next link text on mobile to only show the svg icon, like this:
//Generate pagination next link text add_filter( 'generate_next_link_text', function() { return '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"/> </svg>'; } ); //Generate pagination previous link text add_filter( 'generate_previous_link_text', function() { return '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"/> </svg>'; } ); -
I see. Could you share the link to your Blog page first? I’ll check what’s going on.
-
I have shared it now. The purpose was to make the pagination fit on one line on mobile devices. That’s why I am asking if it’s possible to include a rule in this snippet that only applies to mobile devices.
-
I see. Doesn’t it fit for you on mobile? It fits for me in one row. What device are you checking with?
-
iPhone 15; now, when navigating to page 2, the text of the next link moves to the next line. However, you need to check on the search results page instead. I’ve added the link to this page.
-
Try adding this CSS instead:
@media (max-width: 768px){ span.page-numbers.current ~ a.page-numbers:not(.next) { display:none; } } -
Hello,
I prefer to change the “prev” and “next” text only on mobile. So, remove the text and only show the arrow on mobile, as I explained in my previous response.
-
Hi there,
Try this CSS:
@media(max-width: 600px) { .paging-navigation .nav-links a.page-numbers:is(.prev, .next) { font-size: 0; } .paging-navigation .nav-links { display: flex; justify-content: space-between; align-items: center; } } -
Fixed, thank you.
-
You’re welcome
- You must be logged in to reply to this topic.