[Resolved] Display 'read more' inline?

[Helen]

Hi Tom
Loving GeneratePress – perfect for one with my (very) limited knowledge of css.
Just one thing I have not been able to solve and wondering if you can help.
On my archive pages, I had set up my posts to display the ‘read more’ tag as a run-on from the final sentence of the excerpt, rather than in a separate paragraph.

I prefer this but GP seems to disregard and set it as a new paragraph.

Is there a way for me to over-ride that and display it inline with the paragraph it is part of?
Hope so!
Helen
PS in case this is not clear, I want it to look like Read More…

not like

Read More …

[Tom]

Hi there,

By default, GeneratePress will display the read more right after the last word of the excerpt.

However, if you’re using the “more tag” in your editor to specify a cut off point, it will throw it down to the next paragraph.

Are you using the more tag with your posts?

Let me know 🙂

[Helen]

Yes the ‘more’ tag in posts. In my previous theme (WP 2012), it placed the ‘read more’ link according to how I spaced the more tag in the editor. If I left just a space, it put it right after the last word, on the same line. If I left a line break it put it on the next line.

I always made sure I just left a space as I like it straight after the text on the same line. But GP seems to treat it as a paragraph no matter what I do in the editor?

Thanks for quick reply!
Helen

[Tom]

Give this function a try:

add_filter( 'the_content_more_link', 'generate_custom_content_more', 100 );
function generate_custom_content_more( $more ) {
	return '<a class="read-more content-read-more" href="'. get_permalink( get_the_ID() ) . '">' . __('Read more', 'generate') . '</a>';
}

Adding PHP: http://generatepress.com/knowledgebase/adding-php-functions/

Then add this CSS if you want to force some space to the left of the link:

.content-read-more:before {
  display: inline;
  margin-left: 10px;
}

Adding CSS: http://generatepress.com/knowledgebase/adding-css/

Let me know if that works or not 🙂

• This reply was modified 7 years, 7 months ago by Tom.

[Helen]

Hi Tom
Sorry that took me a while to get round to.
But I have now tried it and can confirm – no it doesn’t work!
I can see it adds the 10px left margin but it is still on the line below the entry, not on the last line of the entry.

Playing around, I found the selector p.read-more-container and set that to inline – but all that did was reduce the space after the Read More, still leaving it in its own paragraph.

Actually that is not too bad – I can live with it now it creates less empty space on the page.

If you can think of a better way to do it with css that would be great; otherwise I will just leave it as is.
I’d rather not mess around with php, as it means creating a child theme. I know I should have done that before but I didn’t and now have quite a bit of css invested in the main theme.

Cheers
Helen

[Helen]

PS I have now read the similar issue at
http://generatepress.com/forums/topic/reduce-padding-between-excerpt-and-read-more/

Amit seemed to find you solution worked, but it did not for me, even when I made a new child theme, and added the php and css as you described.

Did I make a mistake?
/*
Theme Name: GeneratePress Child
Theme URI: http://generatepress.com
Description: Default GeneratePress child theme
Author: Thomas Usborne
Author URI: http://edge22.com
Template: generatepress
Version: 0.1
Tags: two-columns, three-columns, one-column, right-sidebar, left-sidebar, fluid-layout, responsive-layout, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, featured-images, theme-options, light, white, dark, black, blue, brown, gray, green, orange, pink, purple, red, silver, tan, yellow
*/
add_filter( ‘the_content_more_link’, ‘generate_custom_content_more’, 100 );
function generate_custom_content_more( $more ) {
return ‘‘ . __(‘Read more’, ‘generate’) . ‘‘;
}

[Tom]

Ah, seems you added the PHP in the area for the CSS.

PHP should be adding using one of these methods: http://generatepress.com/knowledgebase/adding-php-functions/

CSS should be added using one of these methods: http://generatepress.com/knowledgebase/adding-css/

Let me know 🙂

[Helen]

Haha yes you are right!

I did read the info you gave. But when I clicked Appearance > Editor and saw functions.php, I thought I was already in the right place and copied your php code there.

I didn’t realise clicking Editor put me into a css editor (I use the jetpack css editor which is separate) and I needed to actually click on where it says Theme Functions over at the right to get the functions.php editor to open.

I’m explaining that in case anyone else might make the same mistake as I did.

The good news is it all works perfectly now.

Thanks Tom!
Helen

[Tom]

Hi Helen,

Thank you! I’m sure some will find it helpful.

Glad it’s working as it should now 🙂

[Chris]

This worked perfectly! Thank you Tom!

[Tom]

No problem!

[Brett]

I wonder if I have a similar problem? I’ve got the following test content:

To ensure a quality product, this chair is hand-made in our original workshop by hand. These aren't mass produced so there is a limited availability.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A lot of our customers comment on how much they love the quality and look.

<!--more-->
Our design includes the following:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. A lot of our customers comment on how much they love the quality and look.

When I view the page, I don’t see a “read more” tag at all. It just goes ahead and displays everything.

Should the code mentioned earlier fix that for me or is this a different issue?

[Leo]

Hi Brett,

The code Tom provided above should work if you are trying to achieve the same thing.

Can you make sure the codes were added with the correct method?
The first part is PHP and the second part in CSS.

[Tom]

It doesn’t cut the text off at your more tag at all?

Is this a page or a post? I believe the more tag only works on posts.

[Brett]

I have the php and css installed. The code is a POST. If I go to the blog page, it shows the post as an excerpt, because I have the blog page defined that way. When I click on the “read me” there, the full post shows.

I was expecting to just see the top part with the “read me” link.

[Author]

Posts