Hi there
Just wondering how to insert a ‘Read More’ button and image on the front of my PRO blog page.
I would rather use the ‘Insert Read More tag’ within the text instead of the excerpt.
Regards
Hi There,
Did you mean the featured image? You can add the featured image when editing your posts:
The readmore will display by default if you disable the FULL POST CONTENT ON INDEX option under Theme Options > Blog > Content:
Would you mind clarify what you want to achieve on your blog page?
Thanks.
Hi there
By turning on that option that has fixed a lot of issues.
The spacing seems inconsistent though… please see attached.
I’d also like to change the ‘Read More’ to a button.
Hello @Severo,
I am assuming that you are using Renew stack. The inconsistency of the spacing could be coming from a custom css. Do you have any custom css?
And to make the read more link into a button, assuming that the child theme is set up, please add the following code in your child theme’s functions.php file
// 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 x-btn x-btn-regular x-btn-flat">' . __( 'Read More', '__x__' ) . '</a></div>';
} else if ( $stack == 'renew' ) {
return ' ... <a href="' . get_permalink() . '" class="more-link x-btn x-btn-regular x-btn-flat">' . __( 'Read More', '__x__' ) . '</a>';
} else if ( $stack == 'icon' ) {
return ' ...';
} 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 there
Code didn’t make a difference. I’m using the Ethos stack and no CSS has been used yet.
Regards
Hello@Severo,
The code is intended for Integrity or Renew stack to make the read more link a button. If you are using a different stack, then you must have added a different code in your read more link. To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look?
To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288
Thank you.
Secure note attached.
Thanks!
Hi There,
I’ve changed the code to this:
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 x-btn x-btn-regular x-btn-flat">' . __( 'Read More', '__x__' ) . '</a></div>';
} else if ( $stack == 'renew' ) {
return ' ... <a href="' . get_permalink() . '" class="more-link x-btn x-btn-regular x-btn-flat">' . __( 'Read More', '__x__' ) . '</a>';
} else if ( $stack == 'icon' ) {
return ' ...';
} else if ( $stack == 'ethos' ) {
return ' ... <a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a>';
}
}
add_filter( 'excerpt_more', 'x_excerpt_string' );
endif;
I’ve also turned off the FULL POST CONTENT ON INDEX option then set the featured image.
Everything looks good now:
http://www.melanieskitchen.co.nz/blog/
Cheers!
Hi there, I don’t want to use a featured image and there’s still no ‘Read More’ button.
Now when you click on the ‘Read More’ text there are two images??
Take a look at this… https://www.mad-daily.com
Regards
Hello @Severo,
I have logged in and made several changes to the code. I also added custom css in X > Theme Options > Custom CSS so that the output will look like the example website.
The duplicate image on the single blog post is because you have a featured image and you also added the image within the post. I would recommend that you remove the image in the post instead. So that content of your blog post should only be this:
[vc_row padding_top="0px" padding_bottom="0px"][vc_column fade_animation_offset="45px"][vc_column_text]I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
[/vc_column_text][/vc_column][/vc_row]
We would loved to know if this has work for you. Thank you.
Hi there, thanks for the button. As for the featured image, this is something I do not want to use as I want full control over the image sizes as seen here: https://www.mad-daily.com
Button colours can’t be changed through ‘Customise’ like they can with https://www.mad-daily.com so I’m not sure what has been done…
Regards
Hello @Severo,
I was able to resolved your read more issue by adding this code in your child theme’s functions.php file
function modify_read_more_link() {
return '<a class="more-link x-btn x-btn-transparent x-btn-square x-btn-mini mlm" href="' . get_permalink() . '">Your Read More Link Text</a>';
}
add_filter( 'the_content_more_link', 'modify_read_more_link', 99 );
The button colors on the other hand can now set in Pro > Theme Options > Buttons.
If you need anything else we can help you with, don’t hesitate to open another thread.
Hi there, ended up going back to the featured image because there seem to be too many issues to iron out but I still need to sort the inconsistent spacing on the blog page and within the post.
Please see attached.
Hi There,
Please add this custom CSS under Theme Options > CSS:
.blog .x-content-band,
.blog .wpb_content_element {
display: none;
}
.blog .entry-content {
margin-top: 8px;
}
On the single post page, I could see that there is already a gap between the post meta and text content. Can you confirm?
Hope it helps 
Hi there, it all seems to be looking good now but with some CSS I’ve added for the ‘Read More’ button I seemed to have killed the button on the contact page: http://www.melanieskitchen.co.nz/contact/
.x-btn, .button, [type=“submit”] {
display: table;
font-size: 1px;
line-height: 1;
text-align: center;
vertical-align: middle;
margin-left: 0 !important;
margin: 20px;
letter-spacing: 1.5px;
}
Regards
Hi @SEVERO,
Have you changed the login URL? It returns 404 now. For the meantime, please change that CSS to this
body:not(.page-id-3034) .x-btn, body:not(.page-id-3034) .button, [type="submit"] {
display: table;
font-size: 1px;
line-height: 1;
text-align: center;
vertical-align: middle;
margin-left: 0 !important;
margin: 20px;
letter-spacing: 1.5px;
}
Then just change the 3034 with your contact page’s ID. And please check this https://www.ostraining.com/blog/wordpress/how-to-find-the-page-id-in-wordpress/ to get the ID of your contact page.
Thanks!
Hi there, that didn’t seem to work…
Hello @Severo,
I could not see that you have applied the code given by Rad. I am still seeing your old code. Please have it updated, clear your caches and test your site again.
Please let us know how it goes.
Hi there, I had removed it because it made both buttons small… have now put it back.
Regards
Hi @SEVERO,
I corrected the CSS, the contact page uses a different button (standard button).
Thanks!