Hi @wpblogger369,
When you say you’re using “cards”, you mean the Cards theme for the widget?
Yes Hector and thank you for making this widget!
I’m trying to get it to look more like the Latest Comments on my home page.
And to clarify on my homepage I’m not currently using WPP for the Popular Posts section but instead created a category for the most popular posts and using that. Your widget will show the actual most popular posts which will be terrific.
I don’t see a “Latest Comments” section on your homepage though 😛 Did you mean “Latest Posts” instead?
Yes, sorry meant latest blog posts. 🙂
I’ll do you one better:
1. Set Theme back to None.
2. Set Post HTML Markup: to:
<article class="elementor-post elementor-grid-item post-{pid} post type-post status-publish format-standard has-post-thumbnail hentry">
<a class="elementor-post__thumbnail__link" href="{url}">
<div class="elementor-post__thumbnail elementor-fit-height">
{thumb_img}
</div>
</a>
<div class="elementor-post__text">
<h3 class="elementor-post__title">
<a href="{url}">{text_title}</a>
</h3>
<div class="elementor-post__excerpt">
<p>{summary}</p>
</div>
</div>
</article>
3. Set Before / after Popular Posts: to:
<div class="elementor-posts-container elementor-posts elementor-posts--skin-classic elementor-grid elementor-has-item-ratio">
and
</div>
respectively.
4. Under “Posts settings”, make sure that the Display post excerpt checkbox is enabled, then set the Excerpt Length field to 15 characters (feel free to tweak this value to your liking though), and select the words option below.
5. Under “Posts settings”, make sure that the Display post thumbnail checkbox is enabled, select the Set size manually, and set width and height to 130 and 73 (respectively.)
6. Scroll down and click on Save to apply changes.
With this -if everything went well- your popular posts list will look identical to your Latest Posts section. Give that a try and report back 🙂
Thank you so much! But I think I did something wrong because the HTML markup showed up on the page. I took screenshots of what I did but you can’t post photos here and can’t reply to the email. I copied and pasted what you had sent. Any idea what I may have done wrong??
Wait!! Got it I copied from the email not from here. Give me a second to redo it!
Don’t know why but that didn’t seem to work. There aren’t any thumbnails, and the font is still bold. Also the list is sort of cascading and indenting in and out.
Maybe it’s the first line it says has post-thumbnail hentry? Could that be it? Should it be entry?
Upload the screenshots to prnt.sc or postimages.org, then share the links here so I can see them.
You can also create a temporary page on your website with the WPP widget in it and share the link here so I can see the code directly.
Here I made a temporary page and here is the image of the widget settings.
Alright, so:
- Review step #4 to make sure the excerpt is as long as the ones shown under the Latest Posts section 😛
- Go to Settings > WordPress Popular Posts > Tools > Thumbnails, set Lazy load to No and click on the Apply button below to save changes.
- It seems you need to assign the font face of the post titles via Elementor. I’d tell you how but unfortunately I’m not familiar with it as I don’t really use it. Alternatively you can also just use regular CSS to set the font-family and the font-size of the post titles.
Give those a try and report back.
Thank you again for your help. Unfortunately the thumbnails are still not showing up and it’s still doing that odd indenting thing. Maybe I’ll just go back to the manual way of inserting the popular blog posts and I’ll use WPP stats to help with that.
