Simple Portfolio Gallery Shortcode for WordPress

functions.php

//The CSS & JS part is completely based on this W3S article: https://www.w3schools.com/howto/howto_js_portfolio_filter.asp

function shortcode_posts_showcase() {
	$args = array( 
        'posts_per_page' => -1,
		'post_type' => 'post'
    );

    $query = new WP_Query($args);
	$posts_result = $query->posts;
	$data = array();
	$navigation[0] = '<button class="btn active" onclick="filterSelection('.'\'all\''.')">Show all</button>';
	$posts = '';
	foreach($posts_result as $post) {
		$post_categories = get_the_category($post->ID);
		if(!empty($post_categories)) {
			foreach($post_categories as $category) {
				$navigation[$category->term_id] = '<button class="btn" onclick="filterSelection('.'\''.$category->slug.'\''.')">'.$category->name.'</button>';
				$posts .= '<div class="column '.$category->slug.'">
							<div class="content">
							<img src="'.wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' )[0].'" alt="'.$post->post_title.'" style="width:100%">
							<h4>'.$post->post_title.'</h4>
							<p>'.get_the_excerpt($post).'</p>
							</div>
						</div>';
			}
		}
	}
	$navigation = implode('', $navigation);
	$html = '<div id="myBtnContainer">'.$navigation.'</div><div class="row">'.$posts.'</div>';
	$script = '<script>filterSelection("all") // Execute the function and show all columns
	function filterSelection(c) {
	  var x, i;
	  x = document.getElementsByClassName("column");
	  if (c == "all") c = "";
	  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
	  for (i = 0; i < x.length; i++) {
		w3RemoveClass(x[i], "show");
		if(i <=1) {
			if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show featured");
		} else {
			if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
		}
		
	  }
	}
	
	// Show filtered elements
	function w3AddClass(element, name) {
	  var i, arr1, arr2;
	  arr1 = element.className.split(" ");
	  arr2 = name.split(" ");
	  for (i = 0; i < arr2.length; i++) {
		if (arr1.indexOf(arr2[i]) == -1) {
		  element.className += " " + arr2[i];
		}
	  }
	}
	
	// Hide elements that are not selected
	function w3RemoveClass(element, name) {
	  var i, arr1, arr2;
	  arr1 = element.className.split(" ");
	  arr2 = name.split(" ");
	  for (i = 0; i < arr2.length; i++) {
		while (arr1.indexOf(arr2[i]) > -1) {
		  arr1.splice(arr1.indexOf(arr2[i]), 1);
		}
	  }
	  element.className = arr1.join(" ");
	}
	
	// Add active class to the current button (highlight it)
	var btnContainer = document.getElementById("myBtnContainer");
	var btns = btnContainer.getElementsByClassName("btn");
	for (var i = 0; i < btns.length; i++) {
	  btns[i].addEventListener("click", function(){
		var current = document.getElementsByClassName("active");
		current[0].className = current[0].className.replace(" active", "");
		this.className += " active";
	  });
	}</script>';
	$css = '<style>* {
		box-sizing: border-box;
	  }
	  
	  body {
		background-color: #f1f1f1;
		padding: 20px;
		font-family: Arial;
	  }
	  
	  /* Center website */
	  .main {
		max-width: 1000px;
		margin: auto;
	  }
	  
	  h1 {
		font-size: 50px;
		word-break: break-all;
	  }
	  
	  .row {
		margin: 8px -16px;
	  }
	  
	  /* Add padding BETWEEN each column (if you want) */
	  .row,
	  .row > .column {
		padding: 8px;
	  }
	  
	  /* Create three equal columns that floats next to each other */
	  .column {
		float: left;
		width: 33.33%;
		display: none; /* Hide columns by default */
	  }
	  
	  /* Clear floats after rows */
	  .row:after {
		content: "";
		display: table;
		clear: both;
	  }
	  
	  /* Content */
	  .content {
		background-color: white;
		padding: 10px;
	  }
	  
	  /* The "show" class is added to the filtered elements */
	  .show {
		display: block;
	  }
	  
	  /* Style the buttons */
	  .btn {
		border: none;
		outline: none;
		padding: 12px 16px;
		background-color: white;
		cursor: pointer;
	  }
	  
	  /* Add a grey background color on mouse-over */
	  .btn:hover {
		background-color: #ddd;
	  }
	  
	  /* Add a dark background color to the active button */
	  .btn.active {
		background-color: #666;
		 color: white;
	  }</style>';
	return $css.$html.$script;
}

add_shortcode('posts_showcase', 'shortcode_posts_showcase');