Filterable YouTube Video Grid For Genesis

The templates in this tutorial enable you to display YouTube videos in a grid which can then be filtered using any criteria you setup. In this case its by custom taxonomy for each country.

Before you view the demo video, let’s take a look at the functionality coded into this template :

List of Features

Running through the code in the template, line by line, this is what the functions produce on the front end :

• Displays filtering by Portfolio CPT taxonomy type. Any criteria can be used to filter entries.
• If filtering not active, template loads all entries and default pagination is used other custom pagination is added. See screenshot below.
• Pulls YouTube thumbnail is YouTube id is added otherwise the featured image is displayed, if added, otherwise a placeholder image is pulled from by its id from your WordPress Media Library.
• Displays entries is grid of 2, 3, 4 or 6 columns.
• Adds 3 icons which are easily changeable along with links. The demo links the 1st icon to the comments section for that specific single entry. The 2nd icon links to the single YouTube video on the YouTube website. The 3rd icon links to the single post/page permalink.
• Displays hand coded view count pulled from YouTube data using the Google API which you can easily setup here.
• If no YouTube video added, displays a link to the single entry edit screen so you can add the YouTube video URL & ID.
• Optional – Also works with the Genesis Portfolio Pro plugin by StudioPress

You can use this template without adding filtering which will look like this :

Demo Video

Shows the sorting of portfolio and custom taxonomy entries, the mobile responsiveness of the entries in the grid, the placeholder featured images and how to add a YouTube video to a single entry so the YouTube thumbnail image displays in the grid.

Tested using the Genesis Sample child theme by StudioPress. Code may need tweaking for use on other Genesis child themes.

Template Installation

There’s 4 steps after you download the folder for members below :

Step 1 : From the download folder, copy the PHP code from the functions.php file and paste it at the end of your child themes functions file. Re-save permalink settings.

Step 2 : From the download folder, copy the CSS from the style.css file and paste it at the end of your child themes style.css file.

Step 3 : From the download folder, upload the archive-portfolio.php file to your child themes root directory.