Read more buttons not showing on home page

I am using the default “latest posts” home page with the Perth theme (not a static home page). I read the documentation and searched the forums but didn’t find any help for this.

I use the <!–more–> tag in all my posts to designate the excerpt for each post. The only problem is that using the Perth theme, it doesn’t output a “Read more” button for each post on the home page.

While Customizing my site, under “Blog Options,” my site is set to:

  • Blog layout: Classic
  • Content/Excerpt: neither box is checked

Let me know if you need any further information from me.

Hello there,

Try to enable Content/excerpt options. Then edit your posts and insert a more text to cut the visible text in the posts archive.

Cloudup

Regards,
Kharis

Thanks for the reply.

If I check the “Check this box to display the full content of your posts on the home page” box, leave the other checkbox unchecked, and leave the “Excerpt Length” box empty, there is then only a small “more…” link at the end of the excerpt text:

I already use the “Insert Read More tag” for all my posts.

I am used to seeing “Read More” buttons like this on blogs:

Does the Perth theme not include those, or is something not working right on my blog?

Hello there,

By default, the theme doesn’t have a specific styling for the read more button. To achieve your objective, please follow these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {

   'use strict'

  if( $('.more-link').length ) { 

    $('.more-link').text('Read More');

    $('.more-link').wrap('<div class="more-link-wrapper"></div>');
    
  }

})(jQuery);

  1. Update
  2. Apply the following CSS code into Appearance > Customize > Additional CSS.

.more-link-wrapper{
   padding: 20px 0 0 0;
   text-align: right;
}

a.more-link {
   display: inline-block;
   padding: 5px 10px;
   background: #d65050;
   border-radius: 5px;
   color: #fff;
   text-transform: uppercase;
}

a.more-link:hover {
   background-color: #ea5858;
   text-decoration: none;
}

You would do CSS adjustment to meet your design requirement.

Regards,
Kharis

Wow, that worked perfectly, thank you! That looks great now! I appreciate your time.

You’re most welcome here!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis