Using shortcode for sidebar widget

Hi @alexisms,

The closest thing to a tutorial would be this but aside from reading the shortcode’s documentation to learn how it works that’s as far as it goes.

The shortcode is not as intuitive as the widget for that reason and that’s why I’m suggesting people to switch to the WordPress Popular Posts block instead which works exactly the same way as the widget but I get it that sometimes it’s just not possible. That’s why I’ve been helping people who can’t or won’t use the block to migrate to the shortcode instead.

Anyways, try this:

#1 Add a Text widget right below your WordPress Popular Posts one.

#2 Set your Text widget’s title to “(Deutsch) Meist gelesene Artikel”

#3 Paste this shortcode into the Text widget:

[wpp range='last30days' stats_views=1 stats_category=1 post_type='post,page' thumbnail_width=75 thumbnail_height=75 wpp_start='<ul class="wpp-list wpp-list-with-thumbnails">' wpp_end='</ul>']

#4 Save changes.

If everything went well you should see the shortcode being properly formatted this time.

Hi,

thanks for your help. Unfortunately, the new shortcode looks still the same as my try. I’m trying to attach a screenshot to show what I mean. There are dots (=an unsorted list?) in front of the post titles that don’t belong there. And instead of “views per day”, some other numbers of views are displayed for the posts, which are significantly higher (for the most popular post, for example, “1800 views” instead of “62 views per day”).

Regards,
Alex

Cannot post an image here, so I’ve uploaded it here: https://ibb.co/5r5GJXs

Can you please add back that “Test Widget” to your sidebar so I can have a look at the code?

Regarding the views stuff, change your shortcode to this so it sorts posts by average views count:

[wpp range='last30days' order_by='avg' stats_views=1 stats_category=1 post_type='post,page' thumbnail_width=75 thumbnail_height=75 wpp_start='<ul class="wpp-list wpp-list-with-thumbnails">' wpp_end='</ul>']

Hi,

I’ve put the text widget below the old widget for you to have a look at it on the frontend.

Regards,
Alex

• This reply was modified 1 year, 3 months ago by AlexisMS.

Thanks!

Alright so the bullet list styling and the extra spacing is actually coming from Text widget’s CSS rules. The CSS rules below will fix that:

.widget .textwidget .wpp-list-with-thumbnails {
    padding: 0;
    list-style: none;
}

.widget .textwidget .wpp-list-with-thumbnails li a {
    margin-bottom: 0;
}

Add these either to your theme’s style.css file or via Appearance > Customize > Additional CSS.

It’s working perfectly! Thank you so much! ??

That’s great! Glad to know I was able to help ??

If you have any other comments / questions please let me know.

Have a nice week!