Site logo

Archived topic

Position of Read More button

11 replies · Started by Björn on November 7, 2018

Viewing posts 1–12 of 12

Hi.

I am struggling getting the "Read more" button to the bottom.

The max. word count setting does not necessarily lead to a unified height in the post execerpt so the "Read more" buttons do not share the same vertical position. I'd like to position every button - independently from the excerpt word count - 10px from the bottom of the post preview container.

And how do I get rid of the ellipsis? I am using the function to show formatting in the excerpt provided on this page: https://wordpress.stackexchange.com/questions/141125/allow-html-in-excerpt

Thank you in advance!

Something like this should do it:

.generate-columns .inside-article {
    display: flex;
    flex-direction: column;
}

.generate-columns .inside-article .entry-summary {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.read-more-container {
    margin-top: auto;
}

Depending on browser support needed, you might want to run that code through this tool: https://autoprefixer.github.io/

As for ellipses, try this:

add_filter( 'generate_excerpt_more_output', function( $more ) {
    if ( ! function_exists( 'generate_blog_get_defaults' ) ) {
        return $more;
    }

    $settings = wp_parse_args(
        get_option( 'generate_blog_settings', array() ),
        generate_blog_get_defaults()
    );

    return sprintf( '<p class="read-more-container"><a title="%1$s" class="read-more button" href="%2$s">%3$s%4$s</a></p>',
        the_title_attribute( 'echo=0' ),
        esc_url( get_permalink( get_the_ID() ) . apply_filters( 'generate_more_jump','#more-' . get_the_ID() ) ),
        wp_kses_post( $settings['read_more'] ),
        '<span class="screen-reader-text">' . get_the_title() . '</span>'
	);
}, 20 );

Tom, you are the greatest! Thank you!

No problem! :)

Posted as a new question as suggested.

Hi vast,

As this is resolved for the topic starter, can you open up a new topic?

So you could use the Private information text field to provide details if needed(site url, site credentials, etc).

Thank you. :)

Thanks Elvin. Posted it as a new question.

No problem.

Yeah, I saw & replied to your question.

We'll make sure to address it there. Thank you.

Hello,

Thanks for your theme.

I'v tried the CSS to position the read more button at the bottom, for the category pages, regardless of the excerpt length, but it's not working.

I would be looking at this myself, I'm just starting out, and haven't grasped yet all concepts, so i would appreciate your help to speed up the workflow.

Here is the website: https://staging.funeralcircle.com/category/saying-goodbye/obituaries/

I'm sorry for the website topic, i was a bit unfortunate and got this website to work on.

Thanks :)

Hi Mohammed,

Do you have any PHP snippets related to excerpts? Your site's blog posts seems to have been filtered and it moved the read more button outside of excerpt container. That's why Tom's provided CSS wasn't working.

The default structure is like this - https://share.getcloudapp.com/RBuL87AE - which Tom's CSS will work.

Your site's structure is like this - https://share.getcloudapp.com/qGuJkynl - which is why Tom's CSS didn't work.

Hi there,

with that kind of layout it will be complicated to force the read-more button to the bottom of the container because of the floated left image.

If you can raise a new topic we can look at some other methods.

This archived topic is closed to new replies.