Hi @giorgos93,
Is it even possible to duplicate the same styles with the help of your shortcode?
Yes, it is possible and we’re going to do just that right now:
#1 Go to Appearance > Widgets > [Your Sidebar] and place a Custom HTML widget right below your popular posts one.
#2 Set the title of your Custom HTML widget.
#3 Paste the following shortcode into the Custom HTML widget:
[wpp range="last24hours" limit=5 post_type="post" thumbnail_width=75 thumbnail_height=75 stats_views=0 wpp_start="<ul class="wpp-list wpp-cards-compact">" post_html="<li class="{current_class}">{thumb_img}<div class="wpp-item-data"><div class="taxonomies"></div>{title}</div></li>" wpp_end='</ul>']The only parameter you may want to adjust here is range. Accepted values are last24hours, last7days, last30days, all, and custom (see Parameters for more details.)
#4 Add these CSS rules to your site, either by adding the to your theme’s style.css file or via Appearance > Customize > Additional CSS.
Some of these CSS rules might conflict with CSS rules coming from your theme so you may need to do some tweaking.
#5 Add this line of PHP code to your site, either via your theme’s functions.php or by using a plugin such as Code Snippets for example:
add_filter( 'widget_text', 'do_shortcode' );It’ll allow the Custom HTML widget to parse shortcodes.
If everything went well your shortcode should look just like the Cards Compact theme.
Thanks for advices! I’ve just did all the steps. But I have several questions now:
1 – The popular posts for some reason are displayed even without add_filter( ‘widget_text’, ‘do_shortcode’ ); . If I put it, nothing is changed. I didn’t add this code before in my functions.php file. So, I can delete it?
2 – I had before “wordpress-popular-posts” – “themes” – “cards-compact” folders in my theme’s path. There was a config.json file and style.css file. Since I’ve replaced everything with a shortcode, then I don’t need this folders and files anymore, right? I can delete them?
3 – In WPP classic widget I used this code to hide popular posts from a certain screen width: @media (max-width: 991px) {.widget.popular-posts {display: none;}} . However, it doesn’t work for a shortcode. What css class/id do I need to use now?
4 – I want to put links not only in text, but in thumbnails as well. I’ve already asked you before about this, and you told me to change {thumb_img} to {thumb} ). I’ve just tried to do the same with the code for custom html widget, but it broke the styles for some reason –
5 – I used all the styles from my own cards-compact style.css file, and I’ve added them in WordPress theme’s style.css file. Almost everything now looks, as it was before. However, there is one difference. Under the thumbnails, there is less space now. I checked the styles in code, and I don’t see any of them being ovewrritten by something else. Here is classic widget – . And here is a shortcode: . As you can see the old one didn’t fully fit on my screen’s height. But the new one does. I don’t understand, what causes different height for them.
1 – Ok, then I remove it.
2 – Yes, I made some changes there, so I’ve just copied my own styles
3, 4, 5 – I’ve just added HTML-widget with my own styles ABOVE classic WPP widget in sidebar. Here is a link: https://litfan.ru/testy/test-na-pisatelskie-sposobnosti/
This is what I’m seeing:
Looks as expected here.
About #3, you could try using #sidebar .widget_custom_html instead (assuming you don’t have more than one Custom HTML widget on your sidebar).
About #3: Yes, I don’t have other Custom HTML widget in my sidebar. The code worked, thanks!
What about #4 and #5? The links are not in thumnails atm, and the spacing below thumnails is a bit less, than in classic wpp widget.
I’ve just changed {thumb_img} to {thumb}, so you can see broken styles
This should fix it:
.wpp-item-data {
width: calc(100% - 80px);
}80px here is the sum of the width of the thumbnail + some spacing. Adjust if needed.
.wpp-item-data { width: calc(100% – 90px); } works for me, thanks!
However, the total height of WPP classic widget is still bigger, than shortcode widget height (675px against 650px). I use Lightshot space selection for measurements 😀 . That’s because of that margin below thumnails – it’s less, than in classical widget for some reason.
Well… add some margin then 😛 What’s stopping you (since it seems that you’re at least somewhat familiar with CSS)?
Yeah, kind of 😀 . I thought, that you’ll give me some magic trick 😀
margin-bottom: 5px for .wpp-cards-compact li .wpp-thumbnail worked perfectly.
Thanks for helping me out! Tbh, I decided to explore these fixes not to be implemented right now. I do it for future, so I can return here and implement this changes, when you’ll fully stop supporting classic widget.
But I still hope, that you’ll change your mind somehow 😀