Blog • Read More

Hi,

How to change the text of Read More button on the blog? Also, could you point me from where I can start to change that text into button like this?

Thanks

Hi There,

Add the following code into your child theme’s functions.php file and then change the read more text.

// Change Read More

if ( ! function_exists( 'x_excerpt_string' ) ) :
  function x_excerpt_string( $more ) {
    
    $stack = x_get_stack();

    if ( $stack == 'integrity' ) {
      return ' ... <div><a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a></div>';
    } else if ( $stack == 'renew' ) {
      return ' ... <a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a>';
    } else if ( $stack == 'icon' ) {
      return ' ...';
    } else if ( $stack == 'ethos' ) {
      return ' ...';
    }

  }
  add_filter( 'excerpt_more', 'x_excerpt_string' );
endif;

To transform the link into a button, apply the class x-btn to the link.
class="more-link x-btn"

Hope that helps.

3 Likes

Hi, Darshana

Thank you so much. Worked :100:

BTW, Would you mind telling in which file of Pro this code exist in the parent theme?

To make that button I’ve applied class x-btn x-btn-red x-btn-flat x-btn-pill x-btn-x-mini How can I make it with a custom color button?

Thanks in advance!

Hi There @abdurrehman

You can add the same code into your Pro theme’s functions.php file.

To add a custom button style, you can assign your own custom class and then add the relevant CSS code into your Customizer’s Edit Global CSS area.

class="more-link my-custom-readmore-btn"

Custom CSS:

.my-custom-readmore-btn {
    background-color: #0000ff;
    border: 1px solid #ff0000;
    color: #ffffff;
    padding: 10px;
}

Hope that helps.

Hi,

Just having one issue now in multi-language with WPML the Read More button displays the same text as having edited in the file above. How can I change that for another language?

Thanks in advance!

Hi,

You should be able to translate it from your language file.

Kindly refer to the link below

Hope that helps.

1 Like