widget not display correctly or at all on frontend – is correct when editing

Hi @robhills1985,

Love the plugin and all you do for the community.

Thanks for the kind words!

After clearing all these caches, the widget is now appearing on the frontend, but with no thumbnails showing (figured that could be because the thumbnail cache needs to rebuild) but more confusingly the widget wasn’t displaying properly – was as if all the HTML markup had been deleted / Use custom HTML Markup option checked off. Again, when I go to edit it shows correctly (except thumbnails).

That’s odd. If you share your site’s URL (and tell me where I can find your Popular Posts list) then I may be able to pinpoint the issue and hopefully provide some suggestions.

Thanks for the quick reply @hcabrera!

It’s in the sidebar on all our posts pages under the “most loved” heading such as this page.

Even stranger is I am building a template in Elementor which shows the sidebar and when I am editing it shows perfectly – including thumbnails! – there too.

Thanks again!

• This reply was modified 4 years, 7 months ago by robhills1985.

I checked the source code of the widget and for some reason the <style> tag WPP injects into the page that contains the CSS rules for the Tiles theme is missing. Might be an issue caused by Elementor but can’t say for sure without testing first (and I’m flooded with work right now haha).

Potential workaround:

1. Grab the contents of the Tiles theme stylesheet (you might want to click on the Raw button to make sure you get its contents without any weird formatting from Github.)
2. Add these CSS rules to your website (eg. via Appearance > Customize > Additional CSS, or paste them directly into your theme’s style.css file.)
3. Edit the widget and set Theme back to None but leave everything else as is. Save changes.
4. You may need to clear W3TC’s cache (and your browser’s cache) after this for changes to take effect.

Hopefully your Most Loved section should display as intended now (however, there’s a chance that CSS rules coming from your theme and/or other plugins might partially affect how your popular posts look since we’re no longer using the built-in widget themeing engine.)

Also, I noticed that you may not be using the latest version of the WordPress Popular Posts plugin. You really should consider upgrading at some point to get the latest features/changes/fixes.

• This reply was modified 4 years, 7 months ago by Hector Cabrera. Reason: Fixed link to stylesheet

Really appreciate you taking the time to look and provide a suggestion – and absolutely understand the time limitations of providing free help haha!

Unfortunately, the suggestion didn’t work – I will keep playing around with it and will check back in if I find a solution or more info.

FYI it seems like I am using the latest WPP version – 5.2.2? However, I did update to the latest version of WordPress when it was released last night – sadly I can’t remember if
this issue came up before or after this update (which I would guess could be helpful!).

Thanks again.

Scratch what I said before. Out of curiosity I rechecked your website again and found out what’s going on. Remember when I said that the theme’s style tag was missing from the source code? It’s Autoptimize‘s doing. Easy fix:

1. Go to Autoptimize’s Settings page.
2. Under CSS Options, disable the Also Aggregate Inline CSS option.
3. Save changes.
4. Clear Autoptimize’s cache (although I think that by saving changes Autoptimize does this already, don’t remember now.)

I believe Autoptimize doesn’t remove said style tag when viewing the page in Edit mode (hence why the WPP widget loads normally there) but it does when viewing the page rendered on a regular browser tab.

Oh, also please remember to clear WT3C’s cache afterwards.

Hector, you’re a real one pal! Sincerely appreciate your help. That fixed the stylings (weird that it broke it considering that was in place when it was working previously) – however, the thumbnails are still not showing on the frontend (but showing when I edit), even after clearing caches.

Again, will keep messing around (which is probably what got me in the trouble in the first place, as I am on a steep noob learning curve right now!).

That’s likely another compatibility issue with another plugin (Autoptimize? W3TC?) Check here for yet another workaround ??

Again, will keep messing around (which is probably what got me in the trouble in the first place, as I am on a steep noob learning curve right now!).

That’s how we all learn so don’t sweat it, it’s OK to mess things up (as long as you’re willing to learn how to fix them afterwards haha)

Resolved!

W3TC, Autoptimize, WPP all had lazy loading off… but Smush was on! Deactivated that and it worked instantly – I still wanted some lazy loading, so turned W3TC lazyloading on and it’s still working!

Thank you so much for all your help!