Site logo

Archived topic

WP Show Posts - Align date at the bottom, Add additional meta data

7 replies · Started by Reed on June 16, 2020

Viewing posts 1–8 of 8

Couple things..

1. I am looking to do something similar to https://wordpress.org/support/topic/align-date-at-the-bottom/, however, that solution doesn’t seem to work for my site: https://frugalflyer.ca.

2. I would like to add an estimated reading time to the blog cards on the home page, aligned right, vertically in line with the date. If I had a plugin to estimate the times (eg. Reading Time WP), could I use the shortcode to add to WP Show Posts meta?

Thanks,
Reed

Hi there,

1. Try this CSS:

.wpsp-content-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}

2. You could hook the shortcode into wpsp_after_content
If you want to filter the post date - you would use this hook wpsp_date_output

Perfect. I've got everything now except how would I align and float:right the reading time with the date?

Does this work?

.rt-reading-time {
    text-align: right;
}

No, the RT is still below the date. (the site is public so you can see it).

Let me know if there is a way to align with CSS, or I should just remove the native WP Show Posts date and make my own shortcode to add to the hook that shows the RT.

Edit: I've now done the latter - hopefully this is an appropriate solution.

Try this as your combined CSS - this will put space between date and reading time and force them to align to the bottom:

.wpsp-content-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.custom-post-meta {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
}

Thank you!

Glad we could be of help

This archived topic is closed to new replies.