[Support request] How to create a popular posts widget?

[Anonymous]

Ok, but where I add it? Do I add it on a Code Block or where exactly? Because I dont understand where I can place this code.

[David]

add an empty text block, and paste it into there, the editor will convert it to the blocks.

[Anonymous]

Hi,

I try to do as you recommend me David but, I get error on block, I placed code on paragraph block as html and gives me error as you can see on screenshot below. What I am doing wrong?

Thanks,

Sara

[Anonymous]

I clicked on to recover block and it seems it got worst design as you can see on url below.

[David]

How weird.
I wonder what changed there.

OK:

1. create a new draft page
2. from the top bar 3 dot menu, switch Editor to: Code Editor
3. paste the code straight into the code view
4. switch Editor back to visual editor.

Do you see the layout now ?
If so you can then copy the Query Loop block and paste it into your sidebar widget group block.

[Anonymous]

It seems that after following steps on draft page I manage to do make it work on widget by adding code to a Code Block right after heading and before query loop as you can see on URL bellow but, still styles are not coming correctly because image is showing smaller than it should and title and category are showing in a weird style. Also it seems its repeating itself should I delete grid with query loop?

I am also adding you screenshot URL so, you can see how I added.

[David]

When you added it to the Draft page – did it display correctly ?
As after step 4, you can then simply select the Query Loop block and copy the block.

[Anonymous]

When added to page the styles don’t display correctly since image is too small and area for category and title is too width and styles are wrong title should be h3 not h2 and text should be font size of 18px and roboto font family with 700 of font weight and text color of #2c2c2c and on hover should be #1e73be and on the categories should be background red #ce0000 with a font family of roboto, font size of 12 px and font weight 700.

You can see how it looks in page in URL below and for you to compare the second URL below on features sidebar section is how it should look.

Also it is weird because when I try to edit page content on code block dissapears. I dont understand why this happens

[David]

Try this:

1. Create a draft page.
2. Switch the editor to the Code editor
3. Paste this code into the editor:

<!-- wp:generateblocks/query-loop {"uniqueId":"234136be","query":{"post_type":"post","per_page":10}} -->
<!-- wp:generateblocks/grid {"uniqueId":"26487bda","columns":1,"horizontalGap":20,"verticalGap":20,"isDynamic":true,"blockVersion":2,"isQueryLoop":true,"lock":{"remove":true}} -->
<!-- wp:generateblocks/container {"uniqueId":"e2870018","isGrid":true,"isQueryLoopItem":true,"gridId":"26487bda","width":100,"widthMobile":100,"paddingTop":"0","paddingRight":"0","paddingBottom":"0","paddingLeft":"0","backgroundColor":"#fafafa","isDynamic":true,"blockVersion":2,"lock":{"remove":true,"move":true}} -->
<!-- wp:generateblocks/grid {"uniqueId":"3086d94a","columns":2,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/container {"uniqueId":"7219fd39","isGrid":true,"gridId":"3086d94a","width":50,"widthMobile":100,"flexBasis":"100","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/image {"uniqueId":"b0b4d672","sizeSlug":"full","width":"100px","height":"100px","objectFit":"cover","useDynamicData":true,"dynamicContentType":"featured-image"} /-->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"e49f0564","isGrid":true,"gridId":"3086d94a","width":50,"flexGrow":1,"paddingRight":"6","paddingBottom":"6","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"dea7eb24","element":"p","backgroundColor":"#ff0000","textColor":"var(\u002d\u002dbase-3)","linkColor":"","linkColorHover":"","borderColor":"","fontWeight":"600","fontSize":12,"textTransform":"uppercase","marginBottom":"6","paddingTop":"2","paddingRight":"2","paddingBottom":"2","paddingLeft":"2","paddingSyncUnits":true,"inlineWidth":true,"useDynamicData":true,"dynamicContentType":"terms","termTaxonomy":"category"} -->
<p class="gb-headline gb-headline-dea7eb24 gb-headline-text"></p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"c70731b9","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","fontSize":20,"marginBottom":"0","paddingLeft":"6","iconColor":"","useDynamicData":true,"dynamicContentType":"post-title","dynamicLinkType":"single-post"} -->
<h2 class="gb-headline gb-headline-c70731b9 gb-headline-text"></h2>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/query-loop -->

4. Switch the view back to the Visual Editor
Ignore the width of the query loop, as it will become contained by the sidebar width.

5. Select the Query Loop block, and Copy it.

6. Paste that into your Sidebar widget group block.

You may need to adjust font sizes of image height to make it work as you need it.

[Anonymous]

Hello David,

I followed your steps and it seems to worked pretty good is showing on the bottom of sidebar on widget title “Most Read 2” just need some last few tweaks which are the following:

1. Is this widget counting views? Because I don’t see that the class we made before the “order_by_views” is placed anywhere

2. Categories should have the following styles:

background-color: #CE0000
color: #FFFFFF;
font-family: Roboto, sans-serif;
font-size: 14px;
padding: 10px;
font-weight: 700;

and for hover:

color: #FFFFFF;
background-color: #2c2c2c;

3. Categories should be placed in same column as post title so, it looks straight

4. Post title should have the following styles_

background-color: #F8F8F8
color: #2c2c2c;
font-family: Roboto, sans-serif;
font-size: 16px;
padding: 10px;
font-weight: 700;

and for hover:

color: #1e73be;

How I can manage to do this changes on the code you provided?

[David]

All of those edits can be made in the block editor for those blocks styles, if you’re editing the widget area directly then do it from Appearance > Widgets as that provides the full block editor options.

For the order_by_views you will need to select the Grid block immediately inside the Query Loop block and add that class.

[Anonymous]

Hello David,

You are absolutly right and I make all those edits on the block editor options and I added the class “order_by_views” on grid block that is inside the Query Loop Block as you recommend. You can see it on the URL below on the sidebar widget named “Most Read”

There is only one last thing how I can make images to show a bit more bigger something like width 174px and height 115px? Because all my featured images are going to be rectangular.

[David]

Awesome – looking good.
Ok so:

1. select the Image Block and follow this:

https://www.screencast.com/t/BNaHYXw0Tgvp

2. Then select the Container block that the image block is inside of and set its Flex > Basis to match the Width:

https://www.screencast.com/t/bfbc2Iyi8rfp

[Anonymous]

Hello David,

I just wanted to thank you since I manage to do it thanks to your great support 🙂 you can see it how it looks now on the URL below.

Also, about child theme I would like to ask you one thing since you recommend them if they are really child themes secure? Because since they dont get often update as parent themes I am wondering if they are secure to use since most hacking issues in wordpress come from themes and plugins that dont get updated. Since I am interested to use them so, I can use the less plugins as possible.

[David]

That looks great 🙂 Glad to be of help with that!

Child Themes are effectively a blank repository. It itself poses no security issues.
You should of course be cautious when adding code to the Child Themes functions.php. Making sure it comes from a reliable and reputable source. And this is no different to when using a Code Snippets plugin.

[Author]

Posts