Show Posts as a Table with Filters (WordPress Archive)

This post will show you how to show your WordPress Blog Posts and a Table with a filter without using jQuery.

I originally found the code at this link here and I adapted it to meet my needs.

VIDEO Tutorial

Shortcode

<?php 
add_shortcode('wpirate_posts_table', 'do_wpirate_posts_table');
function do_wpirate_posts_table(){

    if ( have_posts() ):
        $content  = '<label class="table-filter-label">Filter / Search the items below:</label><span class="table-filter-desc">Search by Plugin name, specific thing like "Disable header", "Bricks Builder" etc</span><input type="text" class="table-filter" data-table="order-table" placeholder="Search here..." />';
        $content .= '<table class="order-table table styled-table">';
            $content .= '<thead>';
                $content .= '<tr>';
                    $content .= '<th>Content Title</th>';
                    //$content .= '<th>Software</th>';
                    $content .= '<th>Date</th>';
                $content .= '</tr>';
            $content .= '</thead>';
            $content .= '<tbody>';
        while ( have_posts() ) : the_post();
            $content .= '<tr>';
                $content .= '<td>';
                    $content .= '<a href="'.get_permalink().'">'.get_the_title().'</a>';
                $content .= '</td>';
                /*$content .= '<td>';
                    $terms = get_the_terms( $post->ID , array( 'software' ) );
                    // init counter
                    $i = 1;
                    foreach ( $terms as $term ) {
                            $content .= $term->name;
                            //  Add comma (except after the last term)
                            $content .= ($i < count($terms))? ", " : "";
                            // Increment counter
                            $i++;
                    }
                $content .= '</td>';*/
                $content .= '<td>';
                    $content .= get_the_date("d M, Y");
                $content .= '</td>';
            $content .= '</tr>';
        endwhile;
            $content .= '</tbody>';
            $content .= '</table>';
    endif;

    return $content;
}
Code language: PHP (php)

CSS

.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 1.8rem;
    font-family: sans-serif;
    box-shadow: 0 0 30px 0 #e0e0e0;
    border-radius: 8px;
    line-height:1.4;
}
.styled-table thead{
    position:sticky;
    top:0;
}
.styled-table thead tr {
    background-color: #000;
    text-align: left;
    color:#fff;
}
.styled-table th,
.styled-table td {
    padding: 14px 18px;
}
.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

/*.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}*/

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #e8d4ff;
}
label.table-filter-label, input.table-filter{font-weight:700;color:var(--bricks-color-rwiath);}
input.table-filter{
    padding: 0.4em 15px; border-radius: 5px; border: 2px solid #e8d4ff; background: #f4efff;margin-top:5px;
}
input.table-filter::placeholder{color:#cca0de;}
.table-filter-desc{line-height:1.1;color:#666;font-style:italic;font-family: Georgia,Times,Times New Roman,serif; }

label.table-filter-label{margin-bottom:0;}

@media only screen and (max-width: 767px) {
    .styled-table{
        font-size:1.6rem;
    }
}
Code language: PHP (php)

JS

(function() {
	'use strict';

var TableFilter = (function() {
 var Arr = Array.prototype;
		var input;
  
		function onInputEvent(e) {
			input = e.target;
			var table1 = document.getElementsByClassName(input.getAttribute('data-table'));
			Arr.forEach.call(table1, function(table) {
				Arr.forEach.call(table.tBodies, function(tbody) {
					Arr.forEach.call(tbody.rows, filter);
				});
			});
		}

		function filter(row) {
			var text = row.textContent.toLowerCase();
       //console.log(text);
      var val = input.value.toLowerCase();
      //console.log(val);
			row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
		}

		return {
			init: function() {
				var inputs = document.getElementsByClassName('table-filter');
				Arr.forEach.call(inputs, function(input) {
					input.oninput = onInputEvent;
				});
			}
		};
 
	})();

  /*console.log(document.readyState);
	document.addEventListener('readystatechange', function() {
		if (document.readyState === 'complete') {
      console.log(document.readyState);
			TableFilter.init();
		}
	}); */
  
 TableFilter.init(); 
})();
Code language: PHP (php)

PHP: Posts per page

<?php 

/**
 * Change posts per page by post type
 */
add_filter( 'pre_get_posts', 'bb_change_posts_per_page' );
function bb_change_posts_per_page( $query ) {
    if ( is_admin() || !$query->is_main_query() ) {
       return;
    }
    if ( is_home() ) {
       $query->set( 'posts_per_page', -1 );
    }
}
Code language: PHP (php)