Add Read More Text to my posts

Hi there!

On my posts, I was wondering how does one add read more text or buttons…Currently the user has to hover the post image to read more

Hello Carolina,

Thanks for updating in!

In your homepage, you are using an Ultimate Addon plugin element to display the recent post items.

The news pages on the other hand is the built in designed with Ethos stack. It does not have a read more button evidently shown here: http://demo.theme.co/ethos-1/

To display a read more button, it will require you to install a child theme because what you are trying to accomplish requires a template customization. Having a child theme allows you to make code changes that won’t be overwritten when an X update is released.

Once the child theme is set up, please add the following code in your child theme’s functions.php file by going to Appearance > Editor

// Custom Excerpt More String
// =============================================================================

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 '<div><a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a></div>';
    }

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

Hope this explains it briefly.

That makes sense, a couple questions is better to have child theme installed or pro? or do you have a child pro theme? will it also erase what i have done?

Hi Carolina,

There are separate child themes for X theme and Pro which you can download it from your Themeco Dashboard (https://theme.co/apex/child-themes).

Child theme’s will keep all of your customizations separately, so that when you update your parent X/Pro themes, your child theme customizations will not be overwritten.

Hope that helps.

So i downloaded the child theme and updated the PHP file and the read more appears on my blog…However, the read more is now doubled on my posts on the homepage…Can we get rid of the double read more?

And just keep one of the read more’s ideally the second one with the red underline…and than update the code so that the read more on the news section also has that red line appear underneath

Hello @Carolina,

Please have the code updated and use this:

// Custom Excerpt More String
// =============================================================================

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' && ( !is_front_page() ) ) {
      return '<div><a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a></div>';
    }

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

Hope this helps. Kindly let us know.

it worked is there anyway we can add the sam animation of the red line that appears when you hover over the read more text in the news section

Hey Carolina,

To mimic the effect of the read more text of the Ultimate Addon plugin applied to the read more text of the Blog index, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.entry-content.excerpt .more-link {
    position: relative;
}

.entry-content.excerpt .more-link:after {
    position: absolute;
    display: block;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    content: "";
    -webkit-transition: width .3s ease;
    transition: width .3s ease;
    background-color: hsl(0, 74%, 52%);
}

.entry-content.excerpt .more-link:hover:after {
    background-color: hsl(0, 74%, 52%);
    width: 100%;
}

We would loved to know if this has work for you. Thank you.

It worked perfectly thank you!!!

On behalf of my colleague, you’re welcome. Cheers! :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.