In a block theme like Twenty Twenty-Three you don’t need to add any custom code to change the previous/next text.
In the site editor at Appearance > Editor, select the “Single” template and select the Previous Post block on the template. Click the “Previous:” text and start typing your own text and this will override the default text. Do the same with the Next Post block and save the template.
Thread Starter
auitje
(@auitje)
Wow, that’s easy… Getting there, but not yet quite.
I changed the text of Previous and Next. Now there’s two more things I’d like, but cannot figure out how to do it:
* how to get the “>” mark for the next post after the title of that next post?
* how to get the title of the next/prev post in italic?
Thanks for you help!
It looks like it is not possible to change the position of the custom text, in your case moving “>” to after the post title.
I have been testing with the Gutenberg plugin and there is an option to give the previous & next post links an arrow style or a chevron style. The arrow/chevron is diplayed after the next post title just like you wanted it.
The Gutenberg plugin is the testing plugin for block features that will make their way into future versions of WordPress, so the arrow/chevron style will be available in a future WordPress version. Sorry I don’t know when this will be.
how to get the title of the next/prev post in italic?
Additionally, you can change the text to italic by using the blocks Typography settings, you can use Appearance to change the font to italic.
Thread Starter
auitje
(@auitje)
Pity about the order of the text, and nice to see even more options hidden under the Typography settings.
Thanks for your help!
Hi @auitje yes, unfortunately, there isn’t a way to customize that, however, if you are willing to work with CSS. You can use the CSS code below, it might provide the look you want
.wp-block-query-pagination .wp-block-query-pagination-next span {
position:relative;
left:-110px;
}
You can access the CSS editor by adding this after your URL /wp-admin/customize.php and visiting the Additional CSS panel.
Thread Starter
auitje
(@auitje)
Thanks for you suggestion @thelmachido . However, if I add that CSS-code, I see no difference to the previous/next layout? Esp. with the next, the “>” is still before the title of the next post.
Esp. with the next, the “>” is still before the title of the next post.
Hi @auitje By default the pagination block will show the icon after the text. Previously, you said * how to get the “>” mark for the next post after the title of that next post? I just assumed you wanted the opposite of what is already there sorry about that.
If you remove the CSS code I provided earlier, you will see that for the Next Post the icon will be after the text.
Hi @thelmachido, @auitje is here using the previous post & next post blocks (or specifically the Post Navigation Link block with it’s previous and next block types), not the Post Pagination block.
Your CSS code did get me thinking and this custom CSS should display the “>” text after the next post title:
.post-navigation-link-next {
display: flex;
flex-direction: row-reverse;
}
Thread Starter
auitje
(@auitje)
Thanks for your suggestion, @uxl , but your css code also does not seem to work. This is what it looks like in the editor: https://snipboard.io/Xuqpde.jpg
And this is what it looks like on my published site: https://snipboard.io/L6c8DP.jpg – note that I would want the “>” at the end of the title of the next post (in this case “Nieuwjaarswens 2023”)
The CSS code above will work if you don’t have the “Include the label as part of the link” option toggled on.
If you do have that option on, then the CSS needs a slight modification, like so:
.post-navigation-link-next a {
display: flex;
flex-direction: row-reverse;
}
Thread Starter
auitje
(@auitje)
Thanks, it works! I am grateful to have you lot here on this forum – I have no idea how I would have figured this out on my own…
To nitpick just a little more. As you can see on the page https://www.verhalenmaker.nl/2022/12/de-translationes-de-reizen-na-hun-dood/ there are two minor differences between the previous and the next link:
- there is a space after the ‘<‘ in the previous label, which I cannot seem to get in front of the ‘>’ in the next label;
- in the previous label, the ‘<‘ is part of the link, whereas in the next label, the ‘>’ is not clickable.
If these can be helped, that would be great. If not, it’s fine enough already 🙂
Starting with 2. first, the reason “>” is not part of the link is because in the Next Post block you have the “Include the label as part of the link” option off, whereas in the Previous Post block that setting is on.
You could change the Previous Post block to toggle the “Include the label as part of the link” setting off, and then replace the CSS code with this to make both prev/next blocks look similar with the same spacing:
.post-navigation-link-previous,
.post-navigation-link-next {
display: flex;
gap: 0.5em;
}
.post-navigation-link-next {
flex-direction: row-reverse;
}
Thread Starter
auitje
(@auitje)
Thanks again. I think it looks quite OK now!
-
This reply was modified 3 years, 3 months ago by
auitje.
Can I hijack this thread to ask how in the twenty-twenty-three them I can change the next/previous text to be the title of the post, and possibly limit it to posts within the same category?
-
This reply was modified 3 years ago by
drumltd.
