Hey @mjongsma,
First of all, I like your popular posts section. Pretty nice design!
Alright, I’m not really familiar with tagDiv Composer but I’m guessing it allows you to add regular widgets to it since you’re able to use WPP’s classic widget with it. So, try this:
#1 Add a Custom HTML widget right below your WordPress Popular Posts widget.
#2 Insert the following shortcode to the Custom HTML widget:
[wpp range="last7days" limit=3 stats_views=1 stats_author=1 stats_category=1 wpp_start="<div class="popular-section">" post_html="<div class="post-item"><div class="overlay"></div><div class="post-thumb">{thumb}</div><div class="entry-content">{title} <span class="wpp-meta post-stats">{stats}</span></div></div>" wpp_end='</div>']#3 Save changes.
If everything went well you should be seeing two popular posts sections on your homepage, the widget one and the one we just recreated via shortcode.
Please give that a try and report back.
Thanks for the quick response, Hector! I think I followed your instructions correctly, but the result is that the code appears below the popular posts on the home page.
Hmm, maybe the Custom HTML widget doesn’t parse shortcodes? I was sure it did (can’t test now, I’m not near my PC at the moment).
Try following the same instructions but instead of the Custom HTML widget use the Text one instead, then report back please.
Same result. I added the Text widget in position 2 of that sidebar and left the HTML widget in but in position 3. Now I have code appearing twice under the popular posts.
I tried using the <code> tag too, but that didn’t work.
No, the <code> tag won’t help here.
So what you’re saying is that you’re seeing the actual shortcode on the homepage instead of the popular post list? If so then it might be a good idea to reach out to the developers of the Newspaper theme and ask them what’s the best way to add a shortcode to your homepage with the tagDiv Composer editor (I would try myself but I think I’d have to buy the theme first?)
Yes, the actual code is showing on my home page. I’ll visit the Newspaper forum and see what I can learn there. Knowing exactly what to ask for is a big help, so thank you for that! I’ll let you know what I find out.
Great, please keep me posted. It might even help someone else reading this in the future.
I searched the Newspaper forum and found this answer to someone’s question about inserting shortcode with Composer: “A shortcode can be inserted by using the element called “Column text” or “Text with title”.
“Column text” and “text with title” elements have a button called “edit content” and if you click on that button, the WP Editor will open, and you can add some text/code/shortcode there. Close the WP Editor from X, save the changes from Composer and view the page to see the changes.” ) So I followed those steps. Now I have the proper text of my three popular posts, but not the design. That is, I now have this text in a single column in my Top Posts section: Construction begins on Torrence Taco Bell 2.2k views | by Josh Bootsma | under Business and work Fireworks light up Lansing on Independence Day Eve 2.1k views | by Josh Bootsma | under Community From horses to motorcycles – Schroeder-Lauer Funeral Home prioritizes personalization 1.9k views | by Josh Bootsma | under Business and work, Obituaries
But I don’t have the featured image, or the hover effect, or even any text styles for the headlines and other elements.
So we’re making progress! I don’t know much about coding, but I think the settings in the HTML Markup section of the WPP widget are what determined those design features, right?
Yep, that’s progress!
Alright, since I’m still away from my PC let’s try this:
- Remove the shortcode from the homepage for the time being as we don’t want to be showing visitors this unstyled popular posts list (keep the widget though!)
- Create a test page (you can call it just “Test” so I can find it on
when I’m back on my PC). - Add the shortcode there using either of the suggested Elements.
Let me know when that’s done and I’ll have a look ASAP.
I think the settings in the HTML Markup section of the WPP widget are what determined those design features, right?
Mostly, yes. If you take a closer look at the shortcode you’ll see that it has some parameters. These parameters are the shortcode version of the fields you see on the widget. I tried to match it as close as I could seeing what you have on your homepage 😛
Ok, I made a duplicate of my home page and named it Test ). It still has the same element where I placed the code. That code appears above the styled popular posts that the widget is generating.
If you need Editor access to the site, let me know.
Ah, just realized I missed two important parameters, thumbnail_width and thumbnail_height. That’s why the shortcode isn’t showing thumbnails!
For example, let’s say that your thumbnail size is 100×75 and so the shortcode would look like this:
[wpp range="last7days" limit=3 thumbnail_width=100 thumbnail_height=75 ...]Please check the actual size on the widget and adjust accordingly.
Edit: also note that I truncated the shortcode for brevity 😛
Ok, that got the thumbnails in there (they are 400×400) on the test page, but the text is not styled, and it is not overlaid on the thumbnails, which is also messing up the side-by-side arrangement of the three posts. It looks like there is an overlay command in the HTML code of the original widget. Somewhere (I don’t remember where), I think the headline style was inherited from my other theme settings, so that might be something I can use the Composer to set.
Good, we’re almost there then. Let’s take a quick break for now since I’m typing from the phone and I can only do so much from here. I should be back in around 30-60 minutes and will help you figure out the last bit of the puzzle 🙂
I’ll leave a comment here with next steps when I’m back.