Hi @bergsmapaul,
The themeing feature is exclusive to the widget, can’t be used directly with the shortcode. That’s the reason why you can’t find any related parameters under the Parameters page. (This might change in the future though, it’s just how it is now.)
You can mimic the result though if you copy the CSS and HTML structure from a given theme. Every widget theme has a corresponding stylesheet in wordpress-popular-posts/assets/themes, and the HTML structure can be copied over from the widget.
Note though that the shortcode popular posts list may not look exactly the same as a themed widget because CSS rules coming from your WordPress theme and other plugins might affect it.
Hello Héctor,
Thanks very much. I found the css file on the server and I placed in within the css editor. I was able to find the html via the Chrome inspect tool, but I’m not able to copy the full html of the plugin. Where can I copy the full html of the plugin?
Thanks very much in advance!
Best,
Paul
This is the page btw:
https://www.jamhoreca.nl/nieuws/
I really need the full html of the widget sidebar plugin.
Thanks!
Easy: go to Appearance > Widgets, place a WordPress Popular Posts widget on any of your sidebars, then save.
Next, select the theme you want to use, save again and you’ll see the exact HTML config you need to replicate the theme with your shortcode. Copy & paste every field into their shortcode parameter counterpart (wpp_start, wpp_end, etc) and you’re good to go.
Be careful with quotes though. For example, this won’t work:
wpp_start="<ol class="wpp-list">"
Notice how there are double quotes inside double quotes? You want to avoid that. Don’t mix double quotes like that as WordPress won’t know how to handle this, use a combination of single quotes and double quotes instead:
wpp_start='<ol class="wpp-list">'
or:
wpp_start="<ol class='wpp-list'>"
-
This reply was modified 3 years, 6 months ago by
Hector Cabrera. Reason: Added note on mixing quotes in shortcode parameters
Hi Héctor,
Thanks for your effort. I don’t think my knowledge is sufficient enough.
Next, select the theme you want to use, save again and you’ll see the exact HTML config you need to replicate the theme with your shortcode.
Where do I see the HTML config? I already use a theme and I also already placed the widget into my website.
I would like exactly the same as on this page. Could you please help.
Again, thanks very much in advance!
Greets,
Paul
This is what I mean:
What you see there is the actual HTML markup of the Cardview theme. That’s what you need (ignore the Before/after title fields as you don’t need those, I placed an arrow there without thinking haha.)
Hello Héctor,
This is the code that I have to copy from the widget area:
<li>{thumb}<div class="wpp-post-data">{taxonomy} {title}</div></li>
When I paste this code into my custom HTML box, this is the result:
This screenshot
I used the following css for the ’tile’ template:
/* Trending artikelen */
.wpp-tiles {
margin-left: 0;
margin-right: 0;
padding: 0;
}
.wpp-tiles li {
position: relative;
list-style: none;
margin: 0 0 1.2em 0;
padding: 0;
}
.wpp-tiles li:last-of-type {
margin: 0;
}
.wpp-tiles li .wpp-thumbnail {
overflow: hidden;
display: block;
margin: 0;
width: 100%;
height: auto;
font-size: 0.8em;
line-height: 1;
background: #f0f0f0;
border: none;
}
.wpp-tiles li a {
text-decoration: none;
}
.wpp-tiles li a:hover {
text-decoration: underline;
}
.wpp-tiles li .wpp-post-data {
position: absolute;
left: 0;
bottom: 0;
padding: .75em 1em 1em;
width: 100%;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.5);
}
.wpp-tiles li .wpp-post-data .category,
.wpp-tiles li .wpp-post-data .wpp-post-title {
color: #fff;
font-weight: bold;
}
.wpp-tiles li .wpp-post-data .category {
margin: 0;
font-size: 0.7em;
line-height: 1;
}
.wpp-tiles li .wpp-post-data .wpp-post-title {
display: block;
margin: 0 0 0;
font-size: 1em;
line-height: 1.2;
}
Is this the correct ccs code?
Thanks again.
Something went wrong there 😛 Share your shortcode here so I can have a look.
Edit: Also, that’s the CSS code for the Tiles theme. I thought you wanted to use the Cardview one?
Hi Héctor,
I don’t know what you mean by shortcode. I wasn’t suppose to use the shortcode, right? I thought I only had to use the html from the widget and the css from the template file?
Maybe a cheeky question: can’t you just generate the html code for me? haha 😉
About the theme: yes, I’m sorry, I switched to the tiles, so this is correct.
Thank you.
Ps. If you need a shortcode, where can I get it?
Hey @bergsmapaul,
I don’t know what you mean by shortcode.
I’m going to quote the official documentation here since it explains it better than I can:
A shortcode lets you do nifty things with very little effort. Think of a shortcode as a shortcut to add features to your website that would normally require lots of complicated computer code and technical ability.
A shortcode is written inside two square brackets. For example, the [gallery] shortcode can be used to add a photo gallery of images to any page or post.
In WPP’s case, it’s [wpp].
I assumed you knew what a shortcode is since you’ve been talking about it from the start 😛
Maybe a cheeky question: can’t you just generate the html code for me? haha
Since you do seem to be struggling a bit with this, sure, no problem:
[wpp wpp_start='<ul class="wpp-list wpp-tiles">' wpp_end='</ul>' post_html='<li>{thumb}<div class="wpp-post-data">{taxonomy} {title}</div></li>']
Hi Héctor,
You’ve been a great help to me. It almost did the trick, but the visuals are not correct unfortunately. Check this test page in the right column. It seems that all articles are pasted over each other and not underneath each other. I’m really sorry, but I can’t explain why this happens. Do you know why?
Thanks very much!
Paul
Ah, yes, you need to tell WPP which size should thumbnails be. Otherwise it won’t display them and you’ll get what you’re seeing now.
To set thumbnail sizes you need to use the thumbnail_width and thumbnail_height parameters, like so for example:
[wpp thumbnail_width=427 thumbnail_height=213 wpp_start='<ul class="wpp-list wpp-tiles">' wpp_end='</ul>' post_html='<li>{thumb}<div class="wpp-post-data">{taxonomy} {title}</div></li>']
Not sure if that will fix the weird overlapping issue though -I think this is being caused either by your theme or by the page builder plugin you’re using- but give it a shot and report back.
Héctor,
You did it! Ik works like a charm!
Check it out here.
Thanks very much for you help! Have a great week!
Bye,
Paul
