How to add "Most Recent Posts" widget with excerpt and custom styling?

Support
#1

Hello,

I’m trying to set up a “Most Recent Posts” widget in a section of my homepage. There’s actually one already on my homepage, but I’m trying to customize it further. See https://ontradeandtravel.com to view the Most Recent Posts widget as it stands today.

However, it seems the standard “Recent Posts” plugin with X Theme is fairly limited in terms of customizability. Below are the requirements I’m trying to fulfill right now. Can someone explain how it might be possible to set up the following?

  • If possible, I’d like to show the 4 most recent posts in a 2x2 grid (2 posts in one row, 2 posts in another row below)

  • I’d like each post to show a ~100-character excerpt

  • At the end of the excerpt, I’d like to add a direct link to “Read More”

  • I’d like to change the font and font sized used to better match my theme

  • I want to add some kind of color highlighting so that when a recent post is hovered over, a small box around it will have a hover color of light blue in the background, or something like that.

Does anyone know how it would be possible to do this? I’m pretty stumped right now, so any input you all might have would be much appreciated!

Best,
Jonathan

#2

Hi Jonathan,

1.) Add 1 section > with 2 row on top of each other. On each ROW > COLUMN > add RECENT POST element. On the 2 second recent post element on the 2nd ROW use offset parameter to display the next 2 recent post.

2.) Check this thread: https://theme.co/apex/forum/t/recent-posts-shortcode-change-image-size-add-excerpt/1517/3. Since the code will not work on Cornerstone recent post element, use the recent post shortcode instead.

3.) Read more is not available by default because content is already link. Feel free to edit the code to achieve that.

4.) We can always inspect element to achieve custom styling. See this: https://screencast-o-matic.com/watch/cbQi2YIQqp

.page-id-1 .x-recent-posts .h-recent-posts {
    font-size: 25px;
    font-family: Lato;
}

You can see I have added .page-id-1 on the CSS. Change 1 to your page specific ID. This is so that CSS will work on recent post element on that specific page only and not sitewide. Feel free to remove that part if you want this change sitewide instead.

See this: https://screencast-o-matic.com/watch/cbQi2OIQq9

.x-recent-posts a:hover {
    border: 1px solid green; /*Change to your preferred color*/
}

See this guide too: https://www.youtube.com/watch?v=nV9PLPFTnkE
Hope this helps.