[Resolved] "Display Read More as Button" Doesn't work on a custom excerpt…

Home Forums Support [Resolved] "Display Read More as Button" Doesn't work on a custom excerpt…

Home Forums Support "Display Read More as Button" Doesn't work on a custom excerpt…

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #465038
    Rob Cruz

    Hello!

    First of all, I’m loving this theme so far. Thank you much for providing us this amazing theme πŸ™‚

    Usually, the problems I have or any customizations I want are just one google away. But it seems I can’t find any solutions for this one.

    So I’m using the excerpt field on generating a custom excerpt from my blog post.

    I’ve also added this code to have that “Continue Reading” link under it as per this thread’s instructions: https://generatepress.com/forums/topic/how-to-display-read-more-when-using-the-excerpt-field/

    
    add_filter( 'wp_trim_excerpt', 'tu_excerpt_metabox_more' );
    function tu_excerpt_metabox_more( $excerpt ) {
    	$output = $excerpt;
            $settings = wp_parse_args( 
    		get_option( 'generate_blog_settings', array() ), 
    		generate_blog_get_defaults() 
    	);
    	
    	if ( has_excerpt() ) {
    		$output = sprintf( '%1$s <a href="%2$s">%3$s</a>',
    			$excerpt,
    			get_permalink(),
                            wp_kses_post( $settings['read_more'] )
    		);
    	}
    	
    	return $output;
    }
    

    It’s working great so far but it seems the option “Display Read More as Button” doesn’t work when you do this. I’m pretty much sure I ticked it, but as you can see, it still shows as a bare link.

    Also, I want to customize the button to make it full width. Basically, what I want is like of Brian Dean’s here: https://backlinko.com/blog — custom excerpt and a full width “Continue Reading” button.

    How do I achieve this?

    Thanks in advance!

    Rob

    #465190
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    We just need to add the button class to the link element to achieve this.

    In that code, find: %3$s

    And replace it with: <p class="read-more-button-container"><a class="button" href="%2$s">%3$s</a></p>

    That should do it πŸ™‚

    Glad you’re enjoying the theme!

    #465407
    Rob Cruz

    Thanks Tom!

    Just implemented what you said above. I added these css to achieve the current look of it on my site:

    
    read-more-button-container {
      float: none;
      text-align: center;
      width: 100%;
    }
    
    .button {
      width: 100%;
      border: 2px solid #51a9ab;
      border-radius: 3px
    }
    

    I’m getting close to what I want.. But as you can see, the button exceeds its container. How do I fix this?

    I’m not that good on these code thingy and I used siteorigin css plugin to help me generate those css codes.

    Thanks πŸ™‚

    #465484
    Tom
    Lead Developer
    Lead Developer

    Try this:

    .read-more-button-container {
      float: none;
      text-align: center;
      width: 100%;
    }
    
    .button {
      width: 100%;
      box-sizing: border-box;
      border: 2px solid #51a9ab;
      border-radius: 3px
    }
    #465485
    Rob Cruz

    Now it’s working perfectly!! Thank you so much, Tom!

    This thread is resolved πŸ™‚

    #465488
    Tom
    Lead Developer
    Lead Developer

    You’re welcome! πŸ™‚

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.