Change Read more link to button Icon Stack

Hi!

I am currently using the Icon stack and on the main blog posts page there is a “read more” link below the post excerpt. However, I would like to change it to a button instead. Here is the code. It worked for my other website, but I’m trying to figure out how to adjust it so that I will also work here.

  1. Also, there aren’t any arrows on the single posts page that will enable you to view previous or go to next post how do I add some? Additionally, there is no pagination/ ajax pagination on the main blog page. Does it automatically appear after so many posts or how do I add it?

Goes at the footer of functions.php file

/* Modify the read more link on the_excerpt() */

function et_excerpt_length($length) {
return 100;
}
add_filter(‘excerpt_length’, ‘et_excerpt_length’);

/* Add a link to the end of our excerpt contained in a div for styling purposes and to break to a new line on the page.*/

function et_excerpt_more($more) {
global $post;
return ‘

View Full Story
’;
}
add_filter(‘excerpt_more’, ‘et_excerpt_more’);

Goes in the footer of style.css file

.view-full-post-btn{
display:inline-block;
/border-radius/
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
padding:8px 16px;
margin-top:10px;
color:#000000;
border:1px solid #d8dcdc;
font-family:Georgia,serif;
font-style:italic;
font-size:16px;
}
.view-full-post-btn:hover{
background:#FF3399;
/transition/
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-o-transition:all .3s ease;
transition:all .3s ease;
border:1px solid #000000;
color:#ffffff;
}

Hey There,

Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at pinnacle@theme.co if this is of interest to you. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

Hi!

I provided the code, but every stack is different so a developer is not necessary.
I don’t need anyone to implement it only to help me adjust it for the Icon stack as it works fine on the integrity stack and on another website I’m using it on. This stack doesn’t offer even pagination on single posts pages or a next previous option to view posts so you have no choice to customize it if you want to use it. Even the sidebar setup is not good on the blog page, but that’s another story.Some requests are basic for proper website functionality, I’m being told that’s outside of the scope of assistance too but thanks… I guess.:confused:

Hello There,

Sorry for the confusion. The excerpt can be modified by overriding the default excerpt more in X. Please add the following code in your child theme’s functions.php file

// 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 ' ...</p><p><a href="' . get_permalink() . '" class="more-link x-btn x-btn-regular">' . __( 'View Full Story', '__x__' ) . '</a>';
    } else if ( $stack == 'ethos' ) {
      return ' ...';
    }

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

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

Hi, RueNel!

Thanks for the code however, I need customization code to create the read more button rather than link for Icon and not integrity. Currently. this is at the bottom of my fuctions.php file

// Adding “Read More” link to the Excerpts
// =============================================================================

function excerpt_read_more_link($output) {
global $post;
return $output . ’ Read More’;
}

add_filter(‘the_excerpt’, ‘excerpt_read_more_link’);

Does the code above replace this or am I keeping both codes?

Hello There,

Please only keep one code block so that we can easily track which one is working for and which one does not. You can start off with the code I provided. It is intended to work in Icon. As you notice that I only added the text “View Full Story” when the stack is Icon.

// 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 ' ...</p><p><a href="' . get_permalink() . '" class="more-link x-btn x-btn-regular">' . __( 'View Full Story', '__x__' ) . '</a>';
    } else if ( $stack == 'ethos' ) {
      return ' ...';
    }

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

And by the way, the resulting display will have “View Full Story” link and will not be like a button if you haven’t set the button colors in the theme options, X > Launch > Options > Buttons.

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

Hi, RueNel!

Thanks so much. The read more button instead of the traditional link is exactly what I have hoped for. Here’s a screenshot.

Hello There,

The code should work because I personally tested it in my local testing. Upon checking, it turns out that your child theme is not active. The child theme must be active so that all the custom functions will override the parent theme.

Please activate the child theme first.

1 Like

Thanks :hugs:

You are most welcome. :slight_smile:

1 Like