Make your own free posts table pro to increase pageviews | FuSusu

Make your own free posts table pro to increase pageviews...

1388 views

Sometimes you lose your readers, just because they couldn’t find your most precious posts hidden somewhere. That’s why you need to make a posts table and enable your visitors to see all the posts in an organized way. Here is how I made my own free posts table pro with search & sort to increase pageviews, without a plugin!

how to create your own free posts table pro to increase pageviews

You can see my free posts table pro with search & sort in action by clicking the buttons below.

See my top En blogs See my top VN blogs

Warning: This blog is full of useful codes that help you build a wordpress sites with as less plugin as possible, but if you are not a fan of coding and still want a posts table pro with just a few clicks. Try the wordpress plugin below, that’s best one I’ve found.

best posts table pro pluginsbest posts table pro plugins

So… you are a fan of coding or want to use wordpress with as less plugin as possible like me? Let’s begin!

Make your own free posts table pro – Step 1 – Create a template page to query your posts from database in a table form

The posts table needs lots of space, you should put it on a full-width page. That’s why we need create a new page template in your wordpress theme. Just create a new file, name as you like. Eg. poststable.php and fill it with this code.

<?php // Template Name: Posts Table with Search & Sort 
    // Author: Fususu.com 
    // Version: v1.0 
get_header(); ?>
<!-- the table section, we will create a posts table here later -->
<?php get_footer(); ?>

Now create a new page in your wordpress admin dashboard, you will notice it in the page attribute section. Of course, we need to add content to this template.

how to create your own free posts table pro

Come back to the file, now we will query all of your posts and put them all in a table. Put these codes below in the table section I commented above. I’ll explain later.

<div class="title-header"><h1>< ?php the_title(); ?>...
<div id="poststable">
 <table id="my-top-blogs" class="sortable">
    <thead style="font-weight:bold;">
        <tr>
            <th><i class="fa fa-calendar"></i><br />Date</th>
            <th><i class="fa fa-pencil"></i><br />Title</th>
            <th><i class="fa fa-eye"></i><br />Views</th>
            <th class="hide-on-mobile"><i class="fa fa-comments"></i><br />Comments</th>
            <th><i class="fa fa-align-left"></i><br />Summary</th>
         </tr>
    </thead>
    <tbody>
   <?php $top_query = new WP_Query( 'posts_per_page=-1&post_type=post' ); 
    while($top_query->have_posts()) : $top_query->the_post(); ?>
        <tr> 
            <td class="top_date"><?php echo get_the_date('Y/m/d'); ?>
                 <a target="_self" href="<?php the_permalink(); ?>">
                 <?php $thumb_url = get_the_post_thumbnail_url(get_the_ID(),'small'); ?>
                  <img alt="<?php the_excerpt(); ?/>" src="<?php echo echo get_site_url(); ?>/awesome.gif" onload="lzld(this)" data-src="<?php echo $thumb_url; ?>" ></a>
                     </td>
            <td class="top_title">
           <a href="<?php the_permalink(); ?>">
             <?php the_title(); ?> <i class="fa fa-caret-right"></i>
                </a>
            </td>
            <td class="top_views"><?php if( function_exists('getPostViews') ) { echo getPostViews(get_the_ID(),''); } ?></td>
            <td class="top_comments"><?php comments_number( '0', '1', '%' ); ?></td>
             <td class="top_summary hide-on-mobile">
                <?php $category = get_the_category(); ?>
                <i class="fa fa-tags"></i> 
                <a target="_self" href="<?php echo echo get_site_url(); ?>/category/<?php echo $category[0]->slug;?>"><?php echo $category[0]->cat_name;?></a>
                 <?php the_excerpt(); ?>      
            </td>
        </tr> 
    <?php endwhile;  wp_reset_postdata(); ?>  			
    </tbody>
    </table>
</div>

Then add a little css and font awesome to make your posts table more awesome. Put it in the head tags, in your header.php theme file.

<link rel="stylesheet" href="https://cdn.fususu.com/cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
        #my-top-blogs { width:100%; font-size:0.9em;line-height: 1.2em;}
        #my-top-blogs td {padding:5px; vertical-align: middle;}
        #my-top-blogs thead tr th {font-size:0.9em!important;}
        #my-top-blogs .top_date { width:10%; text-align: center;font-size:0.8em;font-weight: bold;}
        #my-top-blogs .top_title { width:35%; font-size:0.9em; }
        #my-top-blogs .top_summary { width:35%;font-size:0.9em; line-height: 1.3em; }
        #my-top-blogs .top_views { width:10%; text-align: center;font-size: 1em;font-weight: bold;}
        #my-top-blogs .top_comments {width:10%; text-align: center; font-size: 1em;font-weight: bold;}
        /* make your posts table look nicer on mobile device */}
        #poststable { overflow-x: scroll; }
        @media screen and (max-width:500px) { 
            .hide-on-mobile {display:none;}
            #my-top-blogs .top_title {font-size:1em;line-height: 1.1em;}
        }
        
</style>

If everything is okay, now you can see all the posts in a table on your newly created page. As you can see, there is a view columns without any data, also the thumbnails won’t show. I’ll discuss about it later. We’ll move to the next step to make the sortable and searchable.

Make your own free posts table pro – Step 2 – Make this free posts table pro really pro, with search & sort functions, even with pagination!

Thanks to datatables.net – They helped us to make this step very simple when provide a free JS library that transfrom any table to pros with search, sort and pagination functions in seconds.

Just add these codes below in your footer.php before the end of body tag.

<link rel="stylesheet" href="https://cdn.fususu.com/cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"/>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/preview/scrollToTop/dataTables.scrollToTop.min.js"></script>
<script>
jQuery(document).ready( function () {
   jQuery('#my-top-blogs').dataTable( {
    "order": [[ 3, 'desc' ]],
    scrollToTop: true
 } );
});
</script>

Now check your posts table again, you will see the miracle! And please note that the line “order”: [[3, ‘desc’]] means the default sorting will put on the forth column, the number of comments by descending order (in array, the first column’order is 0). You can change it to the views columm, third column. E.g. [[2, ‘desc’]].

Make your own free posts table pro – Step 3 – Show your postviews in the posts table

As I said earlier, your own free posts table pro is a tool to show up your best posts. So how to let your readers know they are the best? The number of comments is a good ideas. But nowadays, people are very lazy to leave comments, that’s why you needs to show postviews.

To set postview for your blogs posts, just add this code to the theme functions.php

// function to count views.
function setPostViews($postID) {
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    if($count==''){
        $count = 1;
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, '1');
    }else{
        $count++;
        update_post_meta($postID, $count_key, $count);
    }
}

// function to display number of posts.

function getPostViews($postID, $views){
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    if(!empty($views)) {
        if($count=='' || $count < 100 ){ // if postview is zero or below 100, then show "new" instead
            return '<span style="color:red;">New!';
        } else {
            return $count.' '.$views; 
        }
    } else {
        return $count;
    }
}

Then put this code somewhere in single.php in your theme folder to start counting post views. E.g. I put it right below <php the_content() ?>.

<?php setPostViews(get_the_ID()); ?>

Note: If you want to show the post view in the posts, just call the function.

<?php getPostViews(get_the_ID(),'views'); 
 // you can change "views" to readed or something you like to intrigue your readers
?>

Finally, let’s talk about the thumbnails in posts table.

As you know, this table will query all your posts, that’s big job if you have hundreds of blogs. To avoid server overload, you should use some cache plugins like W3 Total Cache, and your visitor won’t have to wait long, too.

Note: That’s why I use a VPS to host my wordpress blog, just $5 a month, but faster, and better than most hosting providers out there.

Along with the big query, show hundreds of images will increase page load time, you should use a lazyload plugin as well. Of course, you can remove the thumbnails from the posts table, but according to my experience, they will intrigue your readers and make the table look nicer.

If you already use some lazyload images plugin, you can change this line in my code:

<img alt="<?php the_excerpt(); ?/>" src="<?php echo echo get_site_url(); ?>/awesome.gif" onload="lzld(this)" data-src="<?php echo $thumb_url; ?>" >

To this:

<img class="lazy lazyload" alt="<?php the_excerpt(); ?/>" src="<?php echo $thumb_url; ?>" >

Then test if your lazyload plugin works. If you are like me, don’t like plugins because they will slow down your website, then you can just leave my code, then add this super light weight lazyload js library. It’s free and can lazyload almost everything.

You can follow the instruction on the website to install it. Or just put the whole script below to your footer.php. It looks a bit messy, but works well and save you a lot of bandwidth, and also a query.


<script>//lazyload
(function(u){var l;"undefined"!==typeof window?l=window:"undefined"!==typeof self&&(l=self);l.lazyload=u()})(function(){return function l(n,k,e){function r(g,m){if(!k[g]){if(!n[g]){var f="function"==typeof require&&require;if(!m&&f)return f(g,!0);if(t)return t(g,!0);f=Error("Cannot find module '"+g+"'");throw f.code="MODULE_NOT_FOUND",f;}f=k[g]={exports:{}};n[g][0].call(f.exports,function(e){var c=n[g][1][e];return r(c?c:e)},f,f.exports,l,n,k,e)}return k[g].exports}for(var t="function"==typeof require&&
require,m=0;m<e .length;m++)r(e[m]);return r}({1:[function(l,n,k){(function(e){function r(c){-1===k.call(p,c)&&p.push(c)}function t(c){function b(b){var d;d="function"===typeof c.src?c.src(b):b.getAttribute(c.src);d&&(b.src=d);b.setAttribute("data-lzled",!0);a[k.call(a,b)]=null}c=g({offset:333,src:"data-src",container:!1},c||{});"string"===typeof c.src&&r(c.src);var a=[];return function(h){h.onload=null;h.removeAttribute("onload");h.onerror=null;h.removeAttribute("onerror");-1===k.call(a,h)&&f(h,c,
b)}}function m(c){c="HTML"+c+"Element";if(!1!==c in e){var b=e[c].prototype.getAttribute;e[c].prototype.getAttribute=function(a){if("src"===a){for(var h,d=0,c=p.length;d<c&&!(h=b.call(this,p[d]));d++);return h||b.call(this,a)}return b.call(this,a)}}}function g(c,b){for(var a in c)void 0===b[a]&&(b[a]=c[a]);return b}function k(c){for(var b=this.length;b--&&this[b]!==c;);return b}n.exports=t;var f=l("in-viewport"),p=["data-src"];e.lzld=t();m("Image");m("IFrame")}).call(this,"undefined"!==typeof global?
global:"undefined"!==typeof self?self:"undefined"!==typeof window?window:{})},{"in-viewport":2}],2:[function(l,n,k){(function(e){function k(b,a,h){b.attachEvent?b.attachEvent("on"+a,h):b.addEventListener(a,h,!1)}function l(b,a,h){var d;return function(){var c=this,e=arguments,w=h&&!d;clearTimeout(d);d=setTimeout(function(){d=null;h||b.apply(c,e)},a);w&&b.apply(c,e)}}function m(b){function a(b,a,c){return{watch:function(){d.add(b,a,c)},dispose:function(){d.remove(b)}}}function h(a,d){if(!(c(e.document.documentElement,
a)&&c(e.document.documentElement,b)&&a.offsetWidth&&a.offsetHeight))return!1;var h=a.getBoundingClientRect(),f,q,k,g;b===e.document.body?(f=-d,q=-d,k=e.document.documentElement.clientWidth+d,g=e.document.documentElement.clientHeight+d):(g=b.getBoundingClientRect(),f=g.top-d,q=g.left-d,k=g.right+d,g=g.bottom+d);return h.right>=q&&h.left< =k&&h.bottom>=f&&h.top< =g}var d=g(),q=b===e.document.body?e:b,f=l(d.checkAll(function(b,a,c){h(b,a)&&(d.remove(b),c(b))}),15);k(q,"scroll",f);q===e&&k(e,"resize",f);
p&&v(d,b,f);setInterval(f,150);return{container:b,isInViewport:function(b,d,c){if(!c)return h(b,d);b=a(b,d,c);b.watch();return b}}}function g(){function b(b){for(var a=c.length-1;0<=a;a--)if(c[a][0]===b)return a;return-1}function a(a){return-1!==b(a)}var c=[];return{add:function(b,e,f){a(b)||c.push([b,e,f])},remove:function(a){a=b(a);-1!==a&&c.splice(a,1)},isWatched:a,checkAll:function(b){return function(){for(var a=c.length-1;0<=a;a--)b.apply(this,c[a])}}}}function v(b,a,c){function d(a){a=g.call([],
Array.prototype.slice.call(a.addedNodes),a.target);return 0<f.call(a,b.isWatched).length}var e=new MutationObserver(function(a){!0===a.some(d)&&setTimeout(c,0)}),f=Array.prototype.filter,g=Array.prototype.concat;e.observe(a,{childList:!0,subtree:!0,attributes:!0})}n.exports=function(b,a,c){var d=e.document.body;if(void 0===a||"function"===typeof a)c=a,a={};d=a.container||d;a=a.offset||0;for(var g=0;g<f.length;g++)if(f[g].container===d)return f[g].isInViewport(b,a,c);return f[f.push(m(d))-1].isInViewport(b,
a,c)};var f=[],p="function"===typeof e.MutationObserver,c=e.document.documentElement.compareDocumentPosition?function(b,a){return!!(b.compareDocumentPosition(a)&16)}:e.document.documentElement.contains?function(b,a){return b!==a&&(b.contains?b.contains(a):!1)}:function(b,a){for(;a=a.parentNode;)if(a===b)return!0;return!1}}).call(this,"undefined"!==typeof global?global:"undefined"!==typeof self?self:"undefined"!==typeof window?window:{})},{}]},{},[1])(1)});
</script>

Then don’t forget to put this one pixel gif image on your site. To use this lazyload js library, just see the examples below.

Lazyload an image:

<img src="link_to_a_one_pixel_img" onload="lzld(this)" data-src="your_real_url_to_image" />

Lazyload an iframe (for embeding youtube, vimeo video, v.v…)

<iframe src="" onload="lzld(this)" data-src="your_real_url_to_image" ><iframe>

So now you know how to make your own free posts table pro with search & sort!

Of course, there are lots of good plugins out there that help you create a posts table like this. So if you like coding like me, you want a blog with less plugin, just try my codes and comment if you’ve succeeded on your site. See you in the next post!

P.s. And in case that you are still not a fan of coding, and just scroll here… I suggest this plugin that save you tons of time. That’s the best one I found on making a posts table for your blog. They also have a good support, too!

best posts table pro pluginsbest posts table pro plugins

TREASURE CHEST

!!!



You can wait for to get the hidden content, or just share to see it now. Sharing is the key to succeed!

UNLOCK NOW!

Have a good day!
Fususu wrote 12/10/2019. Updated 14/10/2019.


P.s. To motivate me, you can google this keyword free posts table pro, find my blog there then comment the position. Thank you so much!

Wow, there are (2) Awesome Comments!
Don't hesitate to leave a comment, I'll reply in... 86400s!



Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Cartier Jewelry Replica

    I really like your blog.. very nice colors & theme. Did you design this website yourself or
    did you hire someone to do it for you? Plz answer back as I’m
    looking to design my own blog and would like to find out
    where u got this from. thanks a lot

    • Mr. Susu

      Thanks for visiting my blog. I just installed a free theme from WordPress, then redesigned it to suit my needs. It’s been a long journey, I had updated the theme so many time, so it’s now totally different from the origin one ^^! Just study a bit about HTML, CSS, then you can re-design any theme you like.