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

[Anonymous]

Hello,

How I can create a popular posts widget with GeneratePress and GenerateBlocks?

Thanks and Happy New Year,

Sara

[David]

Hi there,

1. Add the following snippet to your site to recored the number of views each post has received in the post meta: post_views_count

add_action('generate_after_do_template_part', function(){
    setPostViews(get_the_ID());
} );

function setPostViews($postID) {
    if ( !is_single() ) {
        return; // abort if not a single post
    }
    $count_key = 'post_views_count';
    $count = get_post_meta(get_the_id(), $count_key, true);
    if($count==''){
        $count = 0;
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, '0');
    }else{
        $count++;
        update_post_meta($postID, $count_key, $count);
    }
}

2. Then add this snippet to create the necessary parameters to include the post views for sorting:

function gb_query_by_views( $query_args, $attributes ) {
    if ( ! empty( $attributes['className'] ) && strpos( $attributes['className'], 'order_by_views' ) !== false ) {
        
        $query_args['post_type'] = 'post';
        
        $custom_args = array(
          'meta_key' => 'post_views_count',
          'orderby' => 'meta_value_num',
          'order' => 'DESC',
        );
    } else {
        return $query_args;
    }
    return array_merge( $query_args, $custom_args );
}
add_filter( 'generateblocks_query_loop_args', 'gb_query_by_views', 10, 2  );

3. Final step is to add a GB Query Loop block, within that block there is a Grid Block, give it an Advanced > Additional CSS Class of: order_by_views

Set the rest of the Query parameters to suit your needs.

[Anonymous]

Hello David,

Thanks a lot for this solution just got 2 questions:

1) When you say to add snippet you mean to create php snippet with this plugin (https://wordpress.org/plugins/code-snippets/), correct? Or this can be do as an element?

2) I create 2 snippets one per code, correct?

3) Is it possible to add on code to order by views per week? so is order for the most popular posts per week?

[David]

1. This article explains about adding PHP:

https://docs.generatepress.com/article/adding-php/

TLDR: Are you using a Child Theme ?
If Yes, then add the snippets to the Child Theme functions.php
If No, then use the Code snippets plugin https://wordpress.org/plugins/code-snippets/

For this code, you cannot use a GP Element

2. If using Code Snippets you can add them together in one snippet if you wish.

3. That unfortunately i do not have a solution for. There are analytics and insight plugins that do that kind of stat tracking.

[Anonymous]

Ok I will try and let you know just one thing can you recommend any good plugin so, I can try too.

Thanks!

[David]

I can’t recommend one, as i haven’t personally had need for it.
This one ha the most active installs and good reviews:

https://en-gb.wordpress.org/plugins/wordpress-popular-posts/

But i have read that they do add a lot of data to a database, which is kind of expected for this kind of thing.

[Anonymous]

Hello David,

I had created both snippets and created query loop to create popular posts as you can see on sidebar widget called “Most Read” on first URL below but, I just got 1 problem which is the following:

How I can make design to so it looks like the one the sidebar widget called Features on the second URL below. So image is on left then shows category and then title on the right.

Also just for curiosity should I use a child theme? Is it recommended? or what you guys recommend and why?

Thank you for the great support!

[David]

Edit your Query Loop, and in the Post Template block add a GB Grid Block with 2 columns, you can then add the image to one column and the text content in the other.

Child Themes, 90% of what needs to be done to a site can be done without one. The other 10% are things like creating custom PHP templates which is not something the average site requires. So with GP and a Code Snippets plugin you can do the majority of things without one.

Personally, i always install one whether i plan to create custom templates or not, as i prefer keeping PHP in the functions.php and CSS in a styles.css, it also means i have a place to store assets such as Fonts, and if I need to add some custom templates in the future its there ready and waiting 🙂

[Anonymous]

Hello David,

Ok, I will try the 2 columns you recommend.

So, in your opinion is better using a child theme since with it is easier to customize theme and avoiding using extra templates, right?

But even if child theme is not updated wont affect website security?

Thanks!

[Anonymous]

Hello David,

I just did the 2 columns like you recommend me but, I dont seems to algin correctly, how I can I align it correctly so it looks like the one on Features on the second URL below, thanks!

[David]

Regarding the Child theme, correct that is my opinion 🙂

Ok, so wires a little crossed there 🙂
In your last layout you were using a Query Loop ? Right ?

[Anonymous]

Yes, is a bit mess up 🙂 But, basically what I did is create a new grid with 2 columns and duplicate query look (and delete feature image of one and delete terms and title from other one then place one query loop on each column.

What should I do to align it like on that website I mention before?

Thanks!

[David]

Try pasting this in to the block editor, it will give you a Query Loop with that basic layout:

<!-- wp:generateblocks/query-loop {"uniqueId":"04256f73","query":{"post_type":"post","per_page":10}} -->
<!-- wp:generateblocks/grid {"uniqueId":"79d4e7e3","columns":1,"horizontalGap":20,"verticalGap":20,"isDynamic":true,"blockVersion":2,"isQueryLoop":true,"lock":{"remove":true}} -->
<!-- wp:generateblocks/container {"uniqueId":"84829a88","isGrid":true,"isQueryLoopItem":true,"gridId":"79d4e7e3","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":"63462461","columns":2,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/container {"uniqueId":"230af23e","isGrid":true,"gridId":"63462461","width":50,"widthMobile":100,"flexBasis":"100","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/image {"uniqueId":"0563ca71","sizeSlug":"full","width":"100px","useDynamicData":true,"dynamicContentType":"featured-image","marginBottom":"30"} /-->
<!-- /wp:generateblocks/container -->

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

<!-- wp:generateblocks/headline {"uniqueId":"5cefdb06","backgroundColor":"","textColor":"","linkColor":"","fontSize":"24","marginBottom":"0","useDynamicData":true,"dynamicContentType":"post-title","dynamicLinkType":"single-post"} -->
<h2 class="gb-headline gb-headline-5cefdb06 gb-headline-text"></h2>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/query-loop -->

[Anonymous]

Hello David,

Sorry I dont really understand where to place this code. Where exactly I should paste this code? Inside the group I created for widget or inside query loop? and in which block I am supposed to paste this code?

Thanks!

Sara

[David]

Inside the Group you added for the Widget.

[Author]

Posts