Adding Themes To Shortcode?

Hi @deansaliba,

Yes it’s possible but it’s not as straightforward as using the classic widget (the WordPress Popular Posts block is a direct replacement to the classic widget as it’s as easy to use, but if using blocks isn’t an option for you then yeah you’ll need to use the shortcode instead).

To replicate the Tiles theme with the [wpp] shortcode use this configuration:

[wpp range='last24hours' limit=5 stats_views=0 stats_category=1 thumbnail_width=320 thumbnail_height=160 wpp_start='<ul class="wpp-list wpp-tiles">' post_html='<li class="{current_class}">{thumb}<div class="wpp-post-data">{taxonomy} {title}</div></li>' wpp_end='</ul>']

The only parameter that you may want to adjust in there is the range parameter. It’s the equivalent to the Time Range dropdown from the classic widget. Possible values are: last24hours, last7days, last30days, all, custom (see Parameters for more details).

You will also need to add these CSS rules to your site (eg. via WP Dashboard > Appearance > Customize > Additional CSS) in order for the shortcode to be styled as the Tiles theme.

You may need to tweak some things here and there. If you need help with anything else please don’t hesitate to reach out again.

Hmm, your popular posts list seems a bit broken for some reason. Could you please take a screenshot of your Text widget (Appearance > Widgets > [Your Sidebar]) and share it here?

Ah, my old friend Visual tab and its tendency to mangle shortcodes with HTML code. Had completely forgotten about that…

Alright, here’s an alternative that seems to work fine. Follow the same steps as before but instead of using the Text widget switch to the Custom HTML widget, then please add the following line of code to your site either via your theme’s functions.php file or via the Code Snippets plugin for example:

add_filter( 'widget_text', 'do_shortcode');

If everything went well your popular posts list should render now as expected (not broken haha). Once you’ve confirmed that please let me know if you’re still seeing those bullets and I’ll have another look.

Yep, that is coming from your theme and it’s easy to fix. Remember the CSS rules from before? Find this:

    .wpp-tiles li {
        position: relative;
        list-style: none;
        margin: 0 0 1.2em 0;
        padding: 0;
    }

and change it to:

    .wpp-tiles li {
        position: relative;
        list-style: none;
        margin: 0 0 1.2em 0;
        padding: 0 !important;
    }

and to remove that >> symbol, add this:

    .wpp-tiles li::before {
        display: none !important;
    }