Here’s your problem:
The text widget you’re using is adding some empty <p> tags to your popular posts list, breaking the grid in the process (hence the “2x1x2x1 grid” you’re seeing).
Remove these empty <p> tags from the list (on the screenshot below I removed them using code inspector) and the grid will render as expected:
Word of warning though, once more the posts are way out of sync with what’s trending.
You should review this comment to understand why this is happening.
Hang on, I’m experimenting with the template tag…
Yes, the template tag is working well – just dumped the lot into ‘code snippets’.
I’ve now got to find a way to get the trending posts working.
I’ve reverted back to the last24hours bit in the code, ie:
$args = array(
'range' => 'last24hours',
'post_type' => 'post,page,portfolio,staff',
'limit' => 6,
'thumbnail_width' => 225,
'thumbnail_height' => 135,
'wpp_start' => '<ul class="wpp-grid">',
'post_html' => '<li>{thumb}{title}</li>'
);
wpp_get_mostpopular( $args );
…which is keeping the images static, rather than trending.
How can I amend the template tag to read [wpp range='custom' time_quantity=1 time_unit='hour'] like in your example?
…which is keeping the images static, rather than trending
You forgot to use the Time Range parameters with your PHP code. It uses the same parameters as the shortcode you were using before. It should look like this if you want it to list the most viewed posts from the last hour:
$args = array(
'range' => 'custom',
'time_quantity' => 1,
'time_unit' => 'hour',
'post_type' => 'post,page,portfolio,staff',
'limit' => 6,
'thumbnail_width' => 225,
'thumbnail_height' => 135,
'wpp_start' => '<ul class="wpp-grid">',
'post_html' => '<li>{thumb}{title}</li>'
);
wpp_get_mostpopular( $args );
Note though that the wpp_get_mostpopular() function won’t render the list via AJAX -as mentioned here– so you’ll need to find a way to keep WP Rocket from caching your popular posts list.
Nah, I didn’t forget about the time range parameters, I just didn’t know where to add them 🙂
I’ll try adding a few selectors into WP Rocket before pushing it live.
Ok, so I’ve sent a support ticket to WP Rocket, to see what they can come up with, and I pushed it live for now.
The grid looks good on all browsers except Firefox, where the grid just shows as a list – is there any way to turn the list into a grid?
If you’re talking about the popular posts list on your homepage then it seems that the CSS rules from the tutorial to convert the list into a grid are missing from your site. You’ll want to check that first.
Dunno what to say then, the same grid is used on chrome, Edge and Firefox, but only firefox has this problem.
Nope – I re-added the custom CSS (just to make sure) and the grid on firefox remains as a list.
It’s not really a Firefox issue. This screenshot was taken while using that browser 😛
Try clearing WP Rocket’s cache and check again.
Right then, a really strange one here.
Thought I’d go the whole hog and login on Firefox to perform a website full cache flush.
First I cleared the unused CSS, and then set the whole site on preload whilst I went to grab a coffee.
Then I just hit the clear cache button.
The grid looked flawless, so I thought that did it, and logged off on Firefox – checked again and the grid had changed into a list once more.
Logged back in on Firefox and the grid returned.
Tried viewing on a Firefox private window and the list version returned.
This is really weird!
The grid looked flawless, so I thought that did it, and logged off on Firefox – checked again and the grid had changed into a list once more.
Logged back in on Firefox and the grid returned.
All this says to me that this is a caching issue:
- When you log in you see the non-cached version of the website (caching plugins as WP Rocket won’t show the cached version of the site to administrators by default, unless you configured it to do otherwise) hence the list looks as expected;
- When you’re logged out (or when a visitor checks your site, like me) they see the cached version of your website which for some reason doesn’t have the CSS rules that convert the list into a grid.
You’ll need to do more debugging 😛
If you have another developer in your team have them look into this for you. A fresh pair of eyes may help you find out what’s going on.
I’ll wait until Rocket Support gets back to me and see what they say.
It’s looking like the trending grid will have to go though, which is the limit of my debugging skills.
Right then, Rocket Support got back to me.
They say:
Unfortunately, we can’t update only a specific section of your homepage. That technology is called fragment caching and WP Rocket doesn’t work with it, see Does WP Rocket Support Fragment Caching?.
However, we have two options:
Set a cron job in your hosting panel to update the homepage cache every couple of hours. See Clear and Preload a Specific Page(s).
Ask the WordPress Popular Posts support team if they can give you a snippet to programmatically hook WP Rocket’s rocket_clean_home() function, and have the homepage’s cache cleared when WordPress Popular Posts own internal functions are updated.
Let me know!
I already have a cron-job running on the website, set at * for each minute, hour, day, month and weekday.
Should the cron-job be amended?
Should a NEW cron-job be added?
Otherwise the ‘snippet to hook up WP Rocket’s rocket_clean_home() function would seem to be the other option.
