Genesis YouTube Video Grid For Widget Area

The code in this tutorial enables you to display a grid of YouTube videos in a widget area like you see in the following screenshot :

It’s a very simple grid for YouTube videos which includes the following features :

• Displays the WordPress featured image if added otherwise pulls the YouTube thumbnail from YouTube. Both are linked to the YouTube video on YouTube. ( Can easily be changed ).
• Includes the entry title linked to the single post.
• Can be displayed in 2, 3, 4 or 6 columns. Coded for 4 columns by default.
• Display any number of video’s per page.
• Includes pagination.
• Can be used with any post type, category or custom taxonomy.
• Mobile responsive as seen in the following video demo.

You can display the grid just like a widget area in any hook position before the loop, in replace of the loop or after the loop just like you would using the Genesis featured posts widget.

Video Demo

The video demo shows how the YouTube thumbnail image is displayed for the first 4 entries on the first row of the grid and the default WordPress featured image displayed on the second row of the grid.

Demonstrates usage of the pagination and shows the mobile responsiveness of the columns on smaller screens.

Tested using the Infinity Pro child theme by StudioPress.

Note : Works perfectly with YouTube but not tested with other file types or video hosting platforms.

Code Installation

There’s 4 steps to install the code after you download the files below :

Step 1 – Copy the code from the functions.php file in the download folder to the end of your child themes functions.php file.

Step 2 – Copy & paste the CSS from the style.css in the download folder to the end of your child themes style.css file. The CSS has been written to work with the Infinity Pro theme so will need tweaking for use in other Genesis child themes.

Related Tutorials

• YouTube Video Grid In Genesis