[Resolved] Display 'read more' inline?

Home Forums Support Display 'read more' inline?

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #117541
    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 …

    #117555
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #117559
    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

    #117561
    Tom
    Lead Developer
    Lead Developer

    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 4 years, 9 months ago by Tom.
    #119388
    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

    #119389
    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’) . ‘‘;
    }

    #119395
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #119411
    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

    #119497
    Tom
    Lead Developer
    Lead Developer

    Hi Helen,

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

    Glad it’s working as it should now 🙂

    #172966
    Chris

    This worked perfectly! Thank you Tom!

    #172972
    Tom
    Lead Developer
    Lead Developer
    #264549
    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?

    #264610
    Leo
    Staff
    Customer Support

    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.

    #264624
    Tom
    Lead Developer
    Lead Developer

    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.

    #264631
    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.

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