• Skip to main content
  • Skip to primary sidebar

WordPress, Genesis Framework and Storefront customization tutorials

  • Archive
    • Free
    • Premium
  • Blog
  • About
  • Contact
  • Newsletter
  • Membership
  • Login
Home » Isotope

Isotope

Isotope Gallery from WordPress Featured Images

View DemoYoutube Video

In this project I created a WordPress gallery from Custom Post Type’s featured images using Isotope filter combined with lightGallery.

With Isotope You can filter items like portfolio, gallery images or any kind of HTML elements.

lightGallery displays images in Lightbox in a very fancy way with captions and paginations. During WordPress development, I strive to use as few plugins as possible. So I implemented these features directly in my child theme. I prefer Genesis Framework, but it can be used in any WordPress Theme.

Step #1 - Create a Custom Post Type

Create a Custom Post Type called Gallery and upload some images from Pixabay. 



Step #2 - Upload Images

You can upload your own images, but if You want to use that pictures that I used, click here to download the demo file.

Every post has a featured image we’re going to sort them by category and display the title dynamically in the gallery.

Step #3 - Build the filter

To Loop through the categories and echo out as buttons create a file named templates/filter.php and paste the following code in it:

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

 
 
Forgot Password

Filed Under: Featured, Premium Tagged With: Isotope

Isotope Filter with Multiple Dropdown for WordPress Categories

View DemoYoutube Video

In this tutorial we are going to build an Isotope Filter for WordPress Categories with multiple dropdown select options. The following project is actually a fictive job listing website with Bootstrap grid for responsive layout and Genesis Framework. But it works with any kind of WordPress theme.

Recommendations:

  • Please don't experiment on a live website, but if You do make sure that You have access to FTP
  • I suggest to use LocalWP by Flywheel to setup easily a localhost with WordPress

Step #1 - Create the Custom Post Type named Jobs

Add this to functions.php



Create Taxonomy for Stack of the Job

Add this to functions.php



Create Taxonomy for City of the Job

Add this to functions.php



Step #2 - Add some dummy content

Let' go ahead and upload your own content with different taxonomies, or You can import the demo that I used in the example above.

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Featured, Premium Tagged With: Isotope

Isotope Filter with Single Dropdown for WordPress Categories

View DemoYoutube Video

In this tutorial we are going to build an Isotope Filter for WordPress Categories with single dropdown select options. The following project is actually a fictive job listing website with Bootstrap grid for responsive layout and Genesis Framework. But it works with any kind of WordPress theme.

Recommendations:

  • Please don't experiment on a live website, but if You do make sure that You have access to FTP
  • I suggest to use LocalWP by Flywheel to setup easily a localhost with WordPress

Step #1 - Create the Custom Post Type named Jobs

Add this to functions.php



Create Taxonomy for Stack of the Job

Add this to functions.php



Step #2 - Add some dummy content

Let' go ahead and upload your own content with different taxonomies, or You can import the demo that I used in the example above.

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Featured, Premium Tagged With: Isotope

Isotope Filter in Genesis with Buttons for WordPress Categories

View DemoYoutube Video

In this tutorial we are going to build an Isotope Filter for WordPress Categories with buttons. The following project is actually a fictive job listing website with Bootstrap grid for responsive layout and Genesis Framework, but it works with any kind of WordPress theme.

Recommendations:

  • Please don't experiment on a live website, but if You do make sure that You have access to FTP
  • I suggest to use LocalWP by Flywheel to setup easily a localhost with WordPress

Step #1 - Create the Custom Post Type named Jobs

Add this to functions.php



Create Taxonomy for Stack of the Job

Add this to functions.php



Create Taxonomy for City of the Job

Add this to functions.php



Step #2 - Add some dummy content

Let' go ahead and upload your own content with different taxonomies, or You can import the demo that I used in the example above.

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Featured, Premium Tagged With: Isotope

Isotope Filter with Search Field for WordPress Categories

View DemoYoutube Video

In this tutorial we are going to build an Isotope Filter for WordPress Categories using Search Filed and live reload without refresh the browser. The following project is actually a fictive job listing website with Bootstrap grid for responsive layout and Genesis Framework, but it works with any kind of WordPress theme.

Recommendations:

  • Please don't experiment on a live website, but if You do make sure that You have access to FTP
  • I suggest to use LocalWP by Flywheel to setup easily a localhost with WordPress

Step #1 - Create the Custom Post Type named Jobs

Add this to functions.php



Create Taxonomy for Stack of the Job

Add this to functions.php



Create Taxonomy for City of the Job

Add this to functions.php



Step #2 - Add some dummy content

Let' go ahead and upload your own content with different taxonomies, or You can import the demo that I used in the example above.

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Featured, Premium Tagged With: Isotope

Primary Sidebar

Gabor Flamich

Hi! I'm Gabor.
I write tutorials on WordPress and WooCommerce.

MacBook

12 Essential Snippets for Genesis Developers

Subscribe to my Newsletter to view my basic collection of Genesis snippets that I use for my projects!

Sign Up for Free
  • Facebook
  • GitHub
  • Instagram
  • LinkedIn
  • Twitter
  • YouTube
UpdraftPlus Premium

Tags

ACF Ajax Analytics API Bootstrap Breadcrumb category CPT CSS fetch Genesis Google Maps Gutenberg HTML Isotope JavaScript jQuery loop Map Menu Parallax PHP SASS SEO SQL Storefront SVG tab tag manager tags Taxonomy Tool upsell Webpack Wholesale WooCommerce WordPress WPML

Disclosure: Some of the links in this site are affiliate links. I will be paid a commission if you use this link to make a purchase.

  • Privacy Policy / Terms of Service
© 2023 WP Flames - All Right Reserved