How to change to WordPress Popular Posts Block (Flatsome)

Hi @nicole0155,

Well, unless your site is using a very old version of WordPress you should be able to use the WordPress Popular Posts block regardless of what theme is installed on your website so I don’t think your theme is the problem.

Do you have the Classic Widgets plugin installed on your website by any chance?

Also, that notice is only visible to administrators so don’t worry about it too much. Visitors won’t see it at all, it’s just a notice to let you know that you need to migrate to either the WordPress Popular Posts block or the [wpp] shortcode.

Hi Hector,

Thanks for your fast reply.

Our website is fully updated with the most recent software versions (WordPress and plugins).

We would like to continue using the WPP, however until now we did not found a way to replace the existing wpp sidebar widget based on theme normal options for the blog sidebar.

Is there any critical issue we may have, if we maintain the current sidebar widget for some time?

Regarding your query, we do not use the Classic Widgets plugin.

Thank you

Nicol

No, there won’t be any issues if you keep using the “classic” WordPress Popular Posts widget on your site for the time being. I don’t plan to remove the widget just yet. I wanted to give people some time to prepare, hence the notice.

Do take some time to find out why you can’t use blocks on your site’ sidebar (maybe the Flatsome theme disables block support for some reason? Something else is?) so you can fix that and then migrate to the WordPress Popular Posts block afterwards.

Since you -and others- may ask, there’s no date yet for the removal of the classic widget. Maybe a month from now but definitely sometime this year soon(ish).

If you have any other questions don’t hesitate to ask, alright?

• This reply was modified 1 year, 9 months ago by Hector Cabrera.

Hi @hcabrera

We’ve been checking and contacting theme support.

There is the possibility of using blocks, but there is no way of implementing it that is obvious or simple.

In the theme there are widgets that allow you to include a UX block, but there is no WPP block.

Everything indicates that we would have to create a block and then integrate it somehow. We added a new block, but we couldn’t find a way to include WPP.

So far we have not been able to do this. Given the greater complexity there should be a detailed manual, otherwise many users will not be able to use the plugin in the future.

Hey @nicole0155,

If using blocks isn’t an option at this time you can try using the [wpp] shortcode instead, you’ll find proper documentation on how to use it on that link as well (and I’m always here if you have questions.)

Again, as a reminder, the “classic” widget isn’t going away just yet. I plan to wait for a bit (could be weeks or months) to give people plenty of time to figure out what’s the best way to replace the widget for them.

The classic widget will be removed from the plugin with version 7.0. Current version is 6.1.3, and I will release at least version 6.2 to introduce some new features and a couple of (minor) improvements. There may be some more 6.x releases after that.

If it’s of any consolation, I also have to replace the classic widget on my own website which means making some major changes to my 8 years old WordPress theme ??

Hi @hcabrera,

For testing I have made a UX Block with the following

[wpp range='last7days' limit=3 stats_views=0 order_by='views' wpp cat='-340239'? wpp pid='1493047,1662795,647592']

However the page only shows the post titles. I’m using with the WPP widget the model “Cardview Conpact” and a few small custom HTML Markup, but not sure how to include them using the shortcode.

Please provide me some additional guidance.

Thanks.

Alright, this would be the shortcode version of a Cardview Compact themed popular post list (using the params you shared above):

[wpp range='last7days' limit=3 cat='-340239' pid='1493047,1662795,647592' thumbnail_width=320 thumbnail_height=165 stats_views=0 stats_category=1 wpp_start='<ul class="wpp-list wpp-cardview-compact">' post_html='<li class="{current_class}"><div class="wpp-thumbnail-container">{thumb}<div class="taxonomies">{taxonomy}</div></div> <div class="wpp-item-data">{title}</div></li>' wpp_end='</ul>']

Update the HTML related parameters (wpp_start, post_html, and wpp_end) with your customizations and you should be good to go.

Hopefully this helps, and feel free to ask any additional questions you may have @nicole0155.

Oh, do note that it might not look exactly the same way as the widget version of the Cardview Compact theme (here’s why) so you may need to tweak some CSS rules due to interference from your theme’s CSS.

Hi @hcabrera

No problem. It is not very user friendly but I have manage a change to blocks. Just a small doubt. At the following code the command style=”font-size:12px;” is not changing the title size.

Any suggestion?

[wpp range='last7days' limit=3 cat='-340239' pid='1493047,1662795,647592' thumbnail_width=360 thumbnail_height=190 stats_views=0 stats_category=0 wpp_start=''post_html='<p>{thumb} <a href="{url} style="font-size:12px;" >{title}</a></p><br>' '']

Many thanks

The shortcode is stripping out the style attribute out of your custom HTML code, that’s why the font size isn’t changing. Try changing it via Appearance > Customize > Additional CSS or via your theme’s style.css file.

Also, your shortcode was a bit broken after your changes. I cleaned it up for you:

[wpp range='last7days' limit=3 cat='-340239' pid='1493047,1662795,647592' thumbnail_width=360 thumbnail_height=190 stats_views=0 stats_category=0 wpp_start='' post_html='<p>{thumb} <a href="{url}">{title}</a></p><br>']

Also noticed that you basically removed everything related to the Cardview Compact theme from the HTML code. I guess you changed your mind?

Sorry for a new query. I have been using WPP with ajax because of caching. Is it possible to use it with this block?

Nope, but it will be possible in version 6.2.

Yes, I changed a bit the short code just because I’m making a few adaptations to look like other small windows.

[wpp range='last7days' limit=3 cat='-340239' pid='1493047,1662795,647592' thumbnail_width=600 thumbnail_height=400 stats_views=0 stats_category=0 wpp_start='post_html='<p>{thumb} <a href="{url} aria-label={title} class="wpp-meta post-stats-title" style="font-size:12px;" >{title}</a></p><br>']

But I have 2 small dificulties.

1. After including a class=”wpp-meta post-stats-title” it does not appear and so I can not use the additional CSS.
2. Also the line aria-label={title} is not appearing. I have checked it on the view-source.

Is there any error?

After including a class=”wpp-meta post-stats-title” it does not appear and so I can not use the additional CSS.

Not sure what you mean by this.

Also the line aria-label={title} is not appearing. I have checked it on the view-source.

In this particular instance you don’t need to use the aria-label attribute. You use it only when the element doesn’t have any text (or “accessible name”) to identify it. Your popular post link does have text (the post title).

From MDN:

The aria-label attribute defines a string value that labels an interactive element.

Sometimes the default accessible name of an element is missing, or does not accurately describe its contents, and there is no content visible in the DOM that can be associated with the object to give it meaning. A common example is a button containing an SVG or icon font (which you shouldn’t be using) without any text.

I will update the plugin in the future to allow for aria-* attributes to be present as I see that would be useful in some cases though. No need, the plugin already supports this.

• This reply was modified 1 year, 8 months ago by Hector Cabrera.

Update: you broke the shortcode again ?? Please be mindful of opening and closing quotes/double quotes correctly.

Here’s the fixed version:

[wpp range='last7days' limit=3 cat='-340239' pid='1493047,1662795,647592' thumbnail_width=600 thumbnail_height=400 stats_views=0 stats_category=0 wpp_start='' post_html='<p>{thumb} <a href="{url}" aria-label="{title}" class="wpp-meta post-stats-title">{title}</a></p><br>']