{"id":139680,"date":"2016-03-21T11:00:21","date_gmt":"2016-03-21T16:00:21","guid":{"rendered":"https:\/\/getflywheel.com\/?p=16133"},"modified":"2023-02-24T14:15:47","modified_gmt":"2023-02-24T20:15:47","slug":"how-to-add-filters-to-your-wordpress-portfolio","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-filters-to-your-wordpress-portfolio\/","title":{"rendered":"How to Add Filters to your WordPress Portfolio"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">We&#8217;ve already showed you how to <a href=\"https:\/\/wpengine.com\/resources\/how-to-create-a-portfolio-for-your-wordpress-site\/\" target=\"_blank\" rel=\"noreferrer noopener\">create a portfolio site on WordPress<\/a> using a custom post type, a new \u201cprojects\u201d query, and a few new templates.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this post, we&#8217;ll show you how to add filters to your portfolio page using the <a href=\"http:\/\/isotope.metafizzy.co\/\" target=\"_blank\" rel=\"noopener noreferrer\">Isotope.js library<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/03\/add-filters-wordpress-portfolio-all.png\" alt=\"A portfolio site for a construction company on WordPress\" class=\"wp-image-16163\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If you haven\u2019t already, go into your WordPress site, create a few categories, and assign them to the items in your portfolio. If you read the <a href=\"https:\/\/wpengine.com\/resources\/how-to-create-a-portfolio-for-your-wordpress-site\/\" target=\"_blank\" rel=\"noreferrer noopener\">first article<\/a>, we are using a CPT called \u2018Projects\u2019 again, so for each project added to the WordPress site, we will need to make sure that a category gets assigned. On the site, the projects are going to be categorized as either \u201cNew Construction\u201d or \u201cRenovations.\u201d<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once you have assigned a category to each of your projects, it is time to add the JavaScript that will do the fancy filtering work for you.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"http:\/\/isotope.metafizzy.co\/\" target=\"_blank\" rel=\"noopener noreferrer\">Isotope.js<\/a> is a layout library developed by David DeSandro. It is free for open source and personal use, however, for commercial use, you must purchase a license. Please <a href=\"http:\/\/isotope.metafizzy.co\/license.html\" target=\"_blank\" rel=\"noopener noreferrer\">review the license page<\/a> for more information and pricing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So, let&#8217;s add the isotope.js file to your site. Ideally, you would add this to a directory called <code>\/js\/<\/code> in your child theme to ensure that updates never delete it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You also need to create one more file and add it to your <code>\/js\/<\/code> directory. This file will contain the jQuery needed to target your projects. In this example, we named this file <code>projects.js<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Paste the following code into that file and save it. The key things to note in this file are the <code>#projects<\/code>, <code>.project-item<\/code>, and <code>#filters<\/code>. This is the file where you could also change <code>layoutMode:<\/code> to masonry, packery, cellsByColumn, and more.\u00a0In this tutorial, we&#8217;re using the grid mode.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>jQuery(function ($) {\n\n\/\/ initialize Isotope after all images have loaded\n\nvar $container = $('#projects').imagesLoaded( function() { \/\/The ID for the list with all the blog posts\n\n$container.isotope({ \/\/Isotope options, 'item' matches the class in the PHP\n\nitemSelector : '.project-item',\n\ngrid: {\n\ncolumnWidth: 200\n\n}\n\n});\n\n});\n\n&amp;amp;amp;amp;nbsp;\n\/\/Add the class selected to the item that is clicked, and remove from the others\n\nvar $optionSets = $('#filters'),\n\n$optionLinks = $optionSets.find('a');\n$optionLinks.click(function(){\n\nvar $this = $(this);\n\n\/\/ don't proceed if already selected\n\nif ( $this.hasClass('selected') ) {\n\nreturn false;\n\n}\n\nvar $optionSet = $this.parents('#filters');\n\n$optionSets.find('.selected').removeClass('selected');\n\n$this.addClass('selected');\n\/\/When an item is clicked, sort the items.\n\nvar selector = $(this).attr('data-filter');\n\n$container.isotope({ filter: selector });\nreturn false;\n\n});\n\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Once you have added this code to your site, it is time to enqueue the files. If your child theme\u2019s <code>functions.php<\/code> already has a function declared to do this, you will just need to add a line of code to it like the one below.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>wp_enqueue_script('isotope', get_stylesheet_directory_uri() . '\/js\/isotope.pkgd.min.js', array(), '1.0.0', true );\n\nwp_enqueue_script('projects', get_stylesheet_directory_uri() . '\/js\/projects.js', array(), '1.0.0', true );<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Note, <code>get_stylesheet_directory_uri()<\/code> always refers to the current active theme.<br>In the case of a custom theme, or the scenario where you are altering a theme without a child theme, you would likely use <code>get_template_directory_uri()<\/code> in place of <code>get_stylesheet_directory_uri()<\/code><br>If your child theme doesn\u2019t already have a function for enqueuing your script, you will need to add one. Use the following to enqueue your <code>isotope.js<\/code> file.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_action( 'wp_enqueue_scripts', 'child_scripts');\n\nfunction child_scripts(){\n\nwp_enqueue_script('isotope', get_stylesheet_directory_uri() . '\/js\/isotope.pkgd.min.js', array(), '1.0.0', true );\n\nwp_enqueue_script('projects', get_stylesheet_directory_uri() . '\/js\/projects.js', array(), '1.0.0', true );\n\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">One last note here, you should make sure that your theme has already enqueued jQuery. If it hasn\u2019t, you will need to add <code>wp_enqueue_script('jquery');<\/code> but as of WordPress 3.8, jQuery is packaged with the WordPress core in <code>\/wp-includes\/js\/jquery\/jquery.js<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Finally, save your <code>functions.php<\/code> file.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now, go back to your <code>projects-page.php<\/code> file and add the code that will display your filters, as well as get the number of categories and the category name of each project.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Paste the following code in just above where your portfolio starts. Like the last tutorial, we are using <a href=\"http:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Bootstrap<\/a> and in the HTML below, we are setting the filter row to be full width of the container. By default, the filters will align to the left of the column. If you aren\u2019t using Bootstrap, you may want to start and end with the <code>&lt;ul&gt;<\/code> tags.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&amp;amp;amp;lt;div id=&amp;quot;filter-row&amp;quot; class=&amp;quot;row&amp;quot;&amp;amp;amp;gt;\n&amp;amp;amp;lt;div id=&amp;quot;project-page&amp;quot; class=&amp;quot;col-lg-12&amp;quot;&amp;amp;amp;gt;\n\t\t&amp;amp;amp;lt;ul class=&amp;quot;nav navbar-nav navbar-left&amp;quot; id=&amp;quot;filters&amp;quot;&amp;amp;amp;gt;\n\t\t\t&amp;amp;amp;lt;?php\n\t\t\t\t$terms2 = get_terms(&amp;quot;project_categories&amp;quot;); \/\/ This will go get all the categories\n\t\t\t\t$count = count($terms2); \/\/This counts the number of categories\n\t\t\t\techo '&amp;amp;amp;lt;li&amp;amp;amp;gt;&amp;amp;amp;lt;a href=&amp;quot;javascript:void(0)&amp;quot; title=&amp;quot;&amp;quot; data-filter=&amp;quot;.all&amp;quot; class=&amp;quot;active&amp;quot;&amp;amp;amp;gt;Show All&amp;amp;amp;lt;\/a&amp;amp;amp;gt;&amp;amp;amp;lt;\/li&amp;amp;amp;gt;';\n\t\t\t\tif ( $count &amp;amp;amp;gt; 0 ){\n\t\t\t\tforeach ( $terms2 as $term ) {\n\t\t\t\t\t\t\t\t\t\t\t\t$termname = strtolower($term-&amp;amp;amp;gt;name);\t\t\t\t\t\t\t\t$termname = str_replace(' ', '-', $termname);\n\techo '&amp;amp;amp;lt;li style=&amp;quot;list-style:inline;&amp;quot;&amp;amp;amp;gt;&amp;amp;amp;lt;a href=&amp;quot;javascript:void(0)&amp;quot; title=&amp;quot;&amp;quot; class=&amp;quot;&amp;quot; data-filter=&amp;quot;.'.$termname.'&amp;quot;&amp;amp;amp;gt;'.$term-&amp;amp;amp;gt;name.'&amp;amp;amp;lt;\/a&amp;amp;amp;gt;&amp;amp;amp;lt;\/li&amp;amp;amp;gt;';\n\t}\n}\n\/\/ in the above foreach loop, the code will return all the values stored in $terms2 array.\n\n ?&amp;amp;amp;gt;\n\t\t&amp;amp;amp;lt;\/ul&amp;amp;amp;gt;\n\t&amp;amp;amp;lt;\/div&amp;amp;amp;gt;\n&amp;amp;amp;lt;\/div&amp;amp;amp;gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The next step is to get the category for each project and place it into the project container as a class.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&amp;amp;amp;lt;?php\n\/*\nGet the category for each unique post using the post ID\n*\/\n$terms = get_the_terms( $post-&amp;amp;amp;gt;ID, 'project_categories' );\nif ( $terms &amp;amp;amp;amp;&amp;amp;amp;amp; ! is_wp_error( $terms ) ) :\n$links = array();\n\tforeach ( $terms as $term ) {\n\t$links&#091;] = $term-&amp;amp;amp;gt;name;\n\t}\n\t$tax_links = join( &amp;quot; &amp;quot;, str_replace(' ', '-', $links));\n\t$tax = strtolower($tax_links);\n\telse :\n\t$tax = '';\n\tendif;\n\n\t$terms = get_the_terms( $post-&amp;amp;amp;gt;ID, 'project_categories' );\n?&amp;amp;amp;gt;\n\n&amp;amp;amp;lt;?php echo '&amp;amp;amp;lt;div class=&amp;quot;project col-sm-6 col-md-4 all project-item '. $tax .'&amp;quot;&amp;amp;amp;gt;';?&amp;amp;amp;gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In the code above, <code>all<\/code>, <code>project-item<\/code>, and <code>$tax<\/code> get added to each project container. <code>$tax<\/code> will be the category that you assigned to it in the <code>wp-admin<\/code>. Adding \u201call\u201d allows you to reset the portfolio page any time a user clicks the \u201call\u201d filter.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the end, each project should have a class called \u201call\u201d and in this case, each project will also have either \u201cnew-construction\u201d or \u201crenovations.\u201d \u00a0Now, when a user clicks on one of the categories, the page will elegantly reformat to display only the category that has been selected, all while maintaining the portfolio\u2019s grid layout.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/03\/add-filters-wordpress-portfolio-filtered.png\" alt=\"A portfolio site for a construction company on WordPress\" class=\"wp-image-16164\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">In conclusion, Isotope.js is a very powerful jQuery plugin that can be implemented on any WordPress site. Once installed, it can be used to sort and filter catalogue, gallery, or portfolio layouts. In addition, there are multiple layout options that you can use. Check out <a href=\"http:\/\/isotope.metafizzy.co\/layout-modes.html\" target=\"_blank\" rel=\"noopener noreferrer\">all the options here<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the end, here is what the <code>projects-page.php<\/code> looks like when finished:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&amp;amp;amp;lt;?php\n\/* This is my Projects Portfolio page *\/\n\nget_header(); \n\n?&amp;amp;amp;gt;\n&amp;amp;amp;lt;div id=&amp;quot;content-full-width&amp;quot; class=&amp;quot;page-wrap&amp;quot;&amp;amp;amp;gt;\n    &amp;amp;amp;lt;div class=&amp;quot;container content-wrapper&amp;quot;&amp;amp;amp;gt;\n        &amp;amp;amp;lt;div class=&amp;quot;row&amp;quot;&amp;amp;amp;gt;\n            &amp;amp;amp;lt;div id=&amp;quot;content-projects&amp;quot; class=&amp;quot;page-wrap2&amp;quot;&amp;amp;amp;gt;\n\t    &amp;amp;amp;lt;div class=&amp;quot;container content-wrapper&amp;quot;&amp;amp;amp;gt;\n\t&amp;amp;amp;lt;!-- ============ CONTENT START ============ --&amp;amp;amp;gt;\n\t        &amp;amp;amp;lt;section id=&amp;quot;project-content&amp;quot;&amp;amp;amp;gt;\n\t\t&amp;amp;amp;lt;div id=&amp;quot;intro&amp;quot; class=&amp;quot;row&amp;quot;&amp;amp;amp;gt;\n\t\t    &amp;amp;amp;lt;div class=&amp;quot;col-sm-12 text-center&amp;quot;&amp;amp;amp;gt;\n\t\t\t&amp;amp;amp;lt;?php while ( have_posts() ) : the_post(); ?&amp;amp;amp;gt;\n\t\t\t&amp;amp;amp;lt;?php the_content() ?&amp;amp;amp;gt;\n\t\t\t&amp;amp;amp;lt;?php endwhile; \/\/ end of the loop. ?&amp;amp;amp;gt;\n\t\t    &amp;amp;amp;lt;\/div&amp;amp;amp;gt;\n\t\t&amp;amp;amp;lt;\/div&amp;amp;amp;gt;\n\t            &amp;amp;amp;lt;div id=&amp;quot;filters-row&amp;quot; class=&amp;quot;row&amp;quot;&amp;amp;amp;gt;\n\t\t    &amp;amp;amp;lt;div id=&amp;quot;project-page&amp;quot; class=&amp;quot;col-lg-12&amp;quot;&amp;amp;amp;gt;\n\t\t        &amp;amp;amp;lt;ul class=&amp;quot;nav navbar-nav navbar-left&amp;quot; id=&amp;quot;filters&amp;quot;&amp;amp;amp;gt;\n\t\t\t&amp;amp;amp;lt;?php\n\t\t\t$terms2 = get_terms(&amp;quot;project_categories&amp;quot;);\n\t\t\t$count = count($terms2);\n\t\t\techo '&amp;amp;amp;lt;li&amp;amp;amp;gt;&amp;amp;amp;lt;a href=&amp;quot;javascript:void(0)&amp;quot; title=&amp;quot;&amp;quot; data-filter=&amp;quot;.all&amp;quot; class=&amp;quot;active&amp;quot;&amp;amp;amp;gt;All&amp;amp;amp;lt;\/a&amp;amp;amp;gt;&amp;amp;amp;lt;\/li&amp;amp;amp;gt;';\n\t\t\tif ( $count &amp;amp;amp;gt; 0 ){\n\t\t\t    foreach ( $terms2 as $term ) {\t\t\t\t\t\t\t\t\t    $termname = strtolower($term-&amp;amp;amp;gt;name);\n\t\t\t    $termname = str_replace(' ', '-', $termname);\n\t\t\techo '&amp;amp;amp;lt;li style=&amp;quot;list-style:inline;&amp;quot;&amp;amp;amp;gt;&amp;amp;amp;lt;a href=&amp;quot;javascript:void(0)&amp;quot; title=&amp;quot;&amp;quot; class=&amp;quot;&amp;quot; data-filter=&amp;quot;.'.$termname.'&amp;quot;&amp;amp;amp;gt;'.$term-&amp;amp;amp;gt;name.'&amp;amp;amp;lt;\/a&amp;amp;amp;gt;&amp;amp;amp;lt;\/li&amp;amp;amp;gt;';\n\t\t\t}\n\t\t} ?&amp;amp;amp;gt;\n\t\t    &amp;amp;amp;lt;\/ul&amp;amp;amp;gt;\n\t\t&amp;amp;amp;lt;\/div&amp;amp;amp;gt;\n\t        &amp;amp;amp;lt;\/div&amp;amp;amp;gt;\n\t    &amp;amp;amp;lt;div id=&amp;quot;projects&amp;quot; class=&amp;quot;row&amp;quot;&amp;amp;amp;gt;\n\t&amp;amp;amp;lt;!-- Start projects Loop --&amp;amp;amp;gt;\n\t\t&amp;amp;amp;lt;?php  \/* Query the post   *\/\n\t$args = array( 'post_type' =&amp;amp;amp;gt; 'projects', 'posts_per_page' =&amp;amp;amp;gt; -1, 'orderby'=&amp;amp;amp;gt;'menu_order','order'=&amp;amp;amp;gt;'ASC' );\n\t$loop = new WP_Query( $args );\n\twhile ( $loop-&amp;amp;amp;gt;have_posts() ) : $loop-&amp;amp;amp;gt;the_post();\n\/* Pull category for each unique post using the ID *\/\n\t$terms = get_the_terms( $post-&amp;amp;amp;gt;ID, 'project_categories' );\n\tif ( $terms &amp;amp;amp;amp;&amp;amp;amp;amp; ! is_wp_error( $terms ) ) :\n\t   $links = array();\n\t       foreach ( $terms as $term ) {\n\t       $links&#091;] = $term-&amp;amp;amp;gt;name;\n\t\t}\n\t       $tax_links = join( &amp;quot; &amp;quot;, str_replace(' ', '-', $links));\n\t       $tax = strtolower($tax_links);\n\t\telse :\n\t\t$tax = '';\n\tendif;\n\t&amp;amp;amp;lt;?php echo '&amp;amp;amp;lt;div class=&amp;quot;project col-sm-6 col-md-4 all project-item '. $tax .'&amp;quot;&amp;amp;amp;gt;';?&amp;amp;amp;gt;\n            &amp;amp;amp;lt;a href=&amp;quot;&amp;amp;amp;lt;?php print get_permalink($post-&amp;amp;amp;gt;ID) ?&amp;amp;amp;gt;&amp;quot;&amp;amp;amp;gt;\n              &amp;amp;amp;lt;?php echo the_post_thumbnail(); ?&amp;amp;amp;gt;&amp;amp;amp;lt;\/a&amp;amp;amp;gt;\n              &amp;amp;amp;lt;h4&amp;amp;amp;gt;&amp;amp;amp;lt;?php print get_the_title(); ?&amp;amp;amp;gt;&amp;amp;amp;lt;\/h4&amp;amp;amp;gt;\n              &amp;amp;amp;lt;?php print get_the_excerpt(); ?&amp;amp;amp;gt;&amp;amp;amp;lt;br \/&amp;amp;amp;gt;\n              &amp;amp;amp;lt;a class=&amp;quot;btn btn-default&amp;quot; href=&amp;quot;&amp;amp;amp;lt;?php print get_permalink($post-&amp;amp;amp;gt;ID) ?&amp;amp;amp;gt;&amp;quot;&amp;amp;amp;gt;Details&amp;amp;amp;lt;\/a&amp;amp;amp;gt;\n        &amp;amp;amp;lt;\/div&amp;amp;amp;gt; &amp;amp;amp;lt;!-- End individual project col --&amp;amp;amp;gt;\n        &amp;amp;amp;lt;?php endwhile; ?&amp;amp;amp;gt;\n    &amp;amp;amp;lt;\/div&amp;amp;amp;gt;&amp;amp;amp;lt;!-- End Projects Row --&amp;amp;amp;gt;\n&amp;amp;amp;lt;\/div&amp;amp;amp;gt;&amp;amp;amp;lt;!-- End Container --&amp;amp;amp;gt;\n&amp;amp;amp;lt;!-- ============ CONTENT END ============ --&amp;amp;amp;gt;\n\n&amp;amp;amp;lt;?php get_footer(); ?&amp;amp;amp;gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">And with that, you\u2019ll have a fully functioning, content filtering portfolio page!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve already showed you how to create a portfolio site on WordPress using a custom post type, a new \u201cprojects\u201d query, and a few new templates. In this post, we&#8217;ll show you how to add filters to your portfolio page using the Isotope.js library. If you haven\u2019t already, go into your WordPress site, create a<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":1,"featured_media":140768,"template":"","resource-topic":[1396],"resource-role":[1397],"resource-type":[916],"class_list":["post-139680","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Add Filters to your WordPress Portfolio<\/title>\n<meta name=\"description\" content=\"In this post, we&#039;ll show you how to spruce up your portfolio site by adding filters using the Isotope.js library.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Filters to your WordPress Portfolio\" \/>\n<meta property=\"og:description\" content=\"In this post, we&#039;ll show you how to spruce up your portfolio site by adding filters using the Isotope.js library.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-filters-to-your-wordpress-portfolio\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-24T20:15:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/03\/portfolio-site-header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-filters-to-your-wordpress-portfolio\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-filters-to-your-wordpress-portfolio\/\",\"name\":\"How to Add Filters to your WordPress Portfolio\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2016-03-21T16:00:21+00:00\",\"dateModified\":\"2023-02-24T20:15:47+00:00\",\"description\":\"In this post, we'll show you how to spruce up your portfolio site by adding filters using the Isotope.js library.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-filters-to-your-wordpress-portfolio\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-filters-to-your-wordpress-portfolio\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-filters-to-your-wordpress-portfolio\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add Filters to your WordPress Portfolio\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Filters to your WordPress Portfolio","description":"In this post, we'll show you how to spruce up your portfolio site by adding filters using the Isotope.js library.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"How to Add Filters to your WordPress Portfolio","og_description":"In this post, we'll show you how to spruce up your portfolio site by adding filters using the Isotope.js library.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-filters-to-your-wordpress-portfolio\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2023-02-24T20:15:47+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/03\/portfolio-site-header.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-filters-to-your-wordpress-portfolio\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-filters-to-your-wordpress-portfolio\/","name":"How to Add Filters to your WordPress Portfolio","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2016-03-21T16:00:21+00:00","dateModified":"2023-02-24T20:15:47+00:00","description":"In this post, we'll show you how to spruce up your portfolio site by adding filters using the Isotope.js library.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-filters-to-your-wordpress-portfolio\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-filters-to-your-wordpress-portfolio\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-filters-to-your-wordpress-portfolio\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Add Filters to your WordPress Portfolio"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/03\/portfolio-site-grid.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Designer","topic":"<strong>Topics:<\/strong> Design","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/139680","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/140768"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=139680"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=139680"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=139680"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=139680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}