[Resolved] Add image with month and day left of post title

[mikeb82]

I’m prototyping a new client website and have run into an issue with incorporating WP ShowPosts into the website while meeting one of the client’s requirements. As the WP ShowPosts forum doesn’t have much traffic, I thought I’d start here.

The existing website is built with DNN (yes, there are still some DotNetNuke websites around) and has an image incorporating the client’s logo along with the month and date left of the title for each post. I have replicated this with the code below. Actually, I improved on it.

This formatting is shown in NEWS/RESOURCES > NEWS & EVENTS, which is set as the “Posts” page.

The page, NEWS/RESOURCES > ARTICLES is a WP ShowPosts feed. It loses the formatting adding the image (along with month and day) left of the post title. I welcome suggestions on how to do this with WP ShowPosts. Rather than spending many hours trying to figure out what to target in WP ShowPosts I came to the source.

THANKS!

The CSS added to style.css of the GeneratePress child theme:

/* Calendar icon for posts     */

.calendaricon {
    float: left;
    background: #fff;
    margin-right: .75em;
    margin-left: -1em;
    height: 90px;
    width: 143px;
}

.month {
    color: #b44401;
    font-family: Georgia,serif;
    font-size: 26px;
    font-weight: bold;
    text-shadow: 1px 1px #000;
    text-align: center;
    margin-top: -3.9em;
    text-transform: uppercase;
}

.day {
    padding-top: 14px;
    width: 35px;
    color: #fff !important;
    font-family: Arial, sans-serif;
    font-weight: 500;
    text-shadow: 1px 2px #000065;
    font-size: 24px;
    text-align: center;
    padding-left:17px;
}

.inside-article .entry-header .entry-title  {
    font-size: 26px !important;
    line-height: 1;
    color: #b44401;
    font-weight: 500;
    text-shadow: 1px 1px #000065;
}

Added to functions.php:

/* CALENDAR DATE ICON */
function calendar (){ ?>
<div class="calendaricon">
<? echo '<img src="https://myimage_url.com/wp-content/uploads/2020/05/cal_w_logo_starfleet.png" />'; ?>
<div class="month"><? the_time('M') ?></div>
<div class="day"><? the_time('j') ?></div>
</div>
<?
}
add_action('generate_before_entry_title', 'calendar');

[Tom]

Hi there,

I’m quite active in our WP Show Posts forum during the week. This question is best asked there.

The first thing I would do is add your hooked content into WPSP, as it’s only added in GP right now. Try the wpsp_before_title hook.

[mikeb82]

Thanks Tom!

Adding the wpsp_before_title hook works perfectly. I knew it was probably something simple but I’m not familiar with the WP ShowPosts hooks. I’ll start posting related questions to the WP ShowPosts forum

WP ShowPosts is a great plugin, especially when used in GeneratePress (a great theme).

Thanks again,
Mike

[Tom]

Awesome! Glad I could help 🙂

[Author]

Posts