[Resolved] Some of my posts are missing the “Read More” button

[Michelle]

Some of my posts are missing the “Read More” button. Here are two examples:

Example 1: “Testing the Intro Post”

The “Testing the Intro Post” does not have a “Read More” button on the Home Page https://www.reachingmyworld.com
the Author Page https://www.reachingmyworld.com/author/michelleandjordan/
or the Category Page https://www.reachingmyworld.com/category/general/

The “Testing the Intro Post” DOES have a “Read More” button on the blog page https://www.reachingmyworld.com/blog/

Example 2: “Narrow Up A Child”

The “Narrow Up A Child” Post does not have a “Read More” button on the Home Page
The Author Page https://www.reachingmyworld.com/author/michelle/
Or the Category Page https://www.reachingmyworld.com/category/general/

The “Narrow Up A Child” Post DOES have a “Read More” button on the blog page https://www.reachinmyworld.com/blog/

How can I fix this?

Strange that some posts show the button and some don’t. One would think that the settings would apply to all or none. The posts that are missing the “Read More” button have content that is longer than the word count set in the customizer. Also, I tried saving the posts with and without custom excerpts. Neither made a difference. I have a fair bit of Additional CSS that you may want to look at. The CSS styling makes “out-of-the-box” native WordPress archives, category, and author pages match the design of WP Show Posts Pro.

[Ying]

Hi Michelle,

Can you check if these posts are using custom Excerpt in the post editor?

If so, you can use this method to activate read more link for them:
https://docs.generatepress.com/article/activating-read-custom-excerpt/

[Michelle]

Yes, they are using custom excerpts. I will give this method a try…where do I put the code? I have Snippets.

[Ying]

It’s because your blog page is a static page not the default “blog” or “archive page”, it’s using WP Show posts plugin to generate the posts.

[Michelle]

I see. So I added the code in Snippets, and it added the Read More button to the posts that have custom excerpts; however, it also added a second Read More Button to the pages that use WP Show Posts (Home Page, Blog Page…) Another problem is that the two Read More buttons are styled different. We’re part of the way there! Thank you for your help. Can you assist me with fixing these remaining issues? I have Additional CSS that once made the Read More buttons the same. Do you want me to send the CSS to you?

Here is an example of double buttons (page using WP Show Posts Pro):
https://www.reachingmyworld.com/author/michelleandjordan/

Here is an example of different buttons (page not using WP Show Posts Pro):
https://www.reachingmyworld.com/author/michelleandjordan/

[Michelle]

/*Add border around Read More button on Archive, Category, and Author pages to match WP Show Posts Pro styling on Blog page*/

div#comments p.form-submit input[type=”submit”] {
border: 1px solid transparent;
background: #f7f7f7;
border-color: #d6d6d6;
color: #b80000;
}

div#comments p.form-submit input[type=”submit”]:hover {
border: 1px solid #222222;
background: #222222;
color: #FFFFFF;
}

/*Border around the Read More button on author and category pages and #222222 background on hover with white text on hover*/
.archive .read-more-container a:hover {
background: #222;
color: #fff;
border-color: #222;
}
.archive .read-more-container a {
border: 2px solid #d6d6d6;
}

[Ying]

For double buttons, you can disable the ones from WP show posts:
https://www.screencast.com/t/GCWPPpGcqrW

Try this CSS for the button style:

p.read-more-button-container a {
    border: 2px solid #d6d6d6;
}
p.read-more-button-container a:hover {
    background: #222;
    color: #fff;
    border-color: #222;
}

Let me know 🙂

[Michelle]

Ying, should I delete the CSS I sent you before adding your CSS?

[Ying]

It doesn’t matter 🙂

[Michelle]

That worked, except for the Home Page (which uses WP Show Posts Pro). The hover text on the button should be white. 🙂

https://www.reachingmyworld.com

[Michelle]

I am hoping that a tweak in settings or code would make the hover text white on my Read More Button…

[Elvin]

Hi Michelle,

You can try adding this CSS:

.wp-show-posts-entry-summary a:hover, .wp-show-posts-entry-content a:hover{
    color: white;
}

Or if you want it to be WPSP list specific –

#wpsp-3004 .wp-show-posts-entry-summary a:hover, #wpsp-3004 .wp-show-posts-entry-content a:hover{
    color: white;
}

[Michelle]

I tried both, and couldn’t get the text on the home page read more button to turn white. Maybe I have conflicting code somewhere?

[Elvin]

I re-tested it on your site to be sure and it seems to be working as shown here – https://share.getcloudapp.com/ApuE8Obn

Can you try clearing browser cache? Or perhaps check if you’ve copied the whole snippet. (no missing syntax)

[Michelle]

I am glad you see that the button is correct. I re-entered the code, also cleared my website cache, and browser cache. I tried an incognito window. I also tried it on a different computer, and on my phone. I still don’t see white text on the hover of Read More Button. Here’s the two places where I have code regarding the Read More Button:

From months ago:

/*Border around the Read More button on author and category pages and #222222 background on hover with white text on hover*/
.archive .read-more-container a:hover {
background: #222;
color: #fff;
border-color: #222;
}
.archive .read-more-container a {
border: 2px solid #d6d6d6;
}

Today:

/*Styles the native WordPress Read More Button to match the WP Show Posts Pro Read More Button. Note that native WordPress pages are Archive, Category, and Author; WP Show Posts Pro pages are Home and Blog*/

p.read-more-button-container a {
border: 2px solid #d6d6d6;
}
p.read-more-button-container a:hover {
background: #222;
color: #fff;
border-color: #222;
}
.wp-show-posts-entry-summary a:hover, .wp-show-posts-entry-content a:hover{
color: white;
}

[Author]

Posts