Change text of “Older Posts” and “Newer Posts” buttons

Hi George,

Are you using Dyad or Dyad 2? Also, do you have a site URL you can share?

Hi David.

I’m using Dyad and the site is currently at:

https://23things.dgty.uk

Kind regards,
George

Thanks for the link. Here’s some CSS code that will allow you to change the text:

/* Hide original text */

.posts-navigation .nav-previous a,
.posts-navigation .nav-next {
    visibility: hidden;
}
/* Replace "Older Posts" */

.posts-navigation .nav-previous a::before {
    content: "Go Back";
}
/* Replace "Newer Posts" */

.posts-navigation .nav-next a::after {
    content: "Go Forward";
}
/* Set appearance of new buttons */

.posts-navigation .nav-previous a::before,
.posts-navigation .nav-next a::after {
    visibility: visible;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgba(0, 0, 0, 0.2);
    color: #858d95;
    display: block;
    padding: 0.62em 1.62em;
    text-transform: uppercase;
    transition: opacity 0.3s ease 0s;
}

Feel free to change Go Forward and Go Back to any text you want.

As of WordPress 4.7, you can add this code via Appearance > Customize > Additional CSS.

Let me know if this helps.

This is really helpful, thanks ever so much David.

One sticking point however is that it works great on Chrome and Safari, but the button doesn’t appear in IEs 9 or 11 for some reason.

Do you have any ideas?

It looks like IE doesn’t like the idea of setting something to visibility:hidden and then back to visibility:visible.

I tried an alternative method and it is working for me on IE 11 and on an iPhone. Replace the code above with this and it should work:

/* Hide original text */

.posts-navigation .nav-previous a,
.posts-navigation .nav-next a {
    text-indent: -9999px;
    width: 250px;
}

/* Replace "Older Posts" */

.posts-navigation .nav-previous a:after {
    content: 'Go Back';
}

/* Replace "Newer Posts" */

.posts-navigation .nav-next a:after {
    content: 'Go Forward';
}

/* Set appearance of new buttons */

.posts-navigation .nav-next a:after,
.posts-navigation .nav-previous a:after {
    margin-left: 9999px;
    color: #858d95;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    position: relative;
    right: 40px;
}

Thanks David – this has resolved the issue, very much appreciated. One final thing, if I may…

Can these new buttons be centred?

Hi again,

It looks like the original code is still active on the site. If you still need help with this, could you replace it with the new code so I can have a look?

Hi David,

Sorry I’ve moved over to the live site on a different server. The code you suggested has been used at:

https://23digital.sssc.uk.com/

Kind Regards,
George

Hi George,

You can add this code to center the buttons:

.posts-navigation a,
.posts-navigation a:hover,
.posts-navigation a:active,
.posts-navigation a:focus,
.posts-navigation a:visited {
    background: none;
}
.posts-navigation a:after {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 15px 60px;
}
.posts-navigation .nav-previous a,
.posts-navigation .nav-next a {
    width: 100%;
}

It sort of fakes centering, because you can still click on either side of the text beyond the dark rectangle and it still work as a link, but that’s about the best I can do to center them.

Hi David,

The above code for has worked great on Safari, but the buttons have disappeared again on IE 11, which a lot of my users will be using unfortunately. The button is there and clickable, but you can’t see it.

Would it make a difference if I put this chunk of code in *before* the previous code?

• This reply was modified 7 years, 9 months ago by learntechgeorge. Reason: More detail

Hi there George,

Sorry to hear that happened. You could certainly try moving the code, but I’m not sure that will work.

If not, I’d recommend checking out https://jetpack.pro or https://jobs.wordpress.net to see if a developer there might be able to help you with a child theme that puts the buttons where you like within the underlying PHP.

It’s more likely to work across all browsers that way, but I’m afraid it’s also bit outside the scope of what I’m able to help with directly. The alternative would be to leave the buttons where they were, but if you need them centered, the two sites above should be good resources for you.

Thanks for you help David, you’ve given me some really useful advice. I can live without the centred buttons in the meantime!

George

You’re quite welcome, George!

Hi there,

I was wondering if anyone could advise me on how I can change the text of the button “READ MORE” with “discover the products” buttons in the Dyad theme. I still want the button to appear, it’s just that the text what I want to change.

Kind Regards,
Mihai

Hi @mihai2, the best way to do this is to create a Child Theme and then add one the following to the functions.php file in that child. The first is for the version of Dyad on the www.remarpro.com Themes showcase, and the second is for the version of Dyad (Dyad 2) offered for download on WordPress.com’s Theme Showcase.

To verify the above, I would suggest looking for the code in the functions.php file in the original theme and see if it references Dyad or Dyad-2, and then use the appropriate code below.

Dyad

/**
 * Replaces the excerpt "more" text by a link
 */
if ( ! function_exists( 'dyad_excerpt_continue_reading' ) ) {
	function dyad_excerpt_continue_reading() {
		return '... <div class="link-more"><a href="' . esc_url( get_permalink() ) . '">' . sprintf( esc_html__( 'Discover the Products', 'dyad' ), '<span class="screen-reader-text"> "' . get_the_title() . '"</span>' ) . '</a></div>';
	}
} // /dyad_excerpt_continue_reading

add_filter( 'excerpt_more', 'dyad_excerpt_continue_reading' );

Dyad-2

/**
 * Replaces the excerpt "more" text by a link
 */
if ( ! function_exists( 'dyad_2_excerpt_continue_reading' ) ) {
	function dyad_2_excerpt_continue_reading() {
		return '... <div class="link-more"><a href="' . esc_url( get_permalink() ) . '">' . sprintf( esc_html__( 'Discover the Products', 'dyad-2' ), '<span class="screen-reader-text"> "' . get_the_title() . '"</span>' ) . '</a></div>';
	}
} // /dyad_2_excerpt_continue_reading

add_filter( 'excerpt_more', 'dyad_2_excerpt_continue_reading' );

If you are uncomfortable with creating your own Child Theme, you can consider one of the Child Theme creation plugins.