Step-by-step written instructions plus video tutorial on how to create a WordPress video gallery using the Posts Table Pro plugin.

It’s so easy to embed video in WordPress these days, but it’s not so easy to create a video gallery listing all your videos in a grid. This article will teach you how to create a responsive WordPress video gallery using the Posts Table Pro plugin.

While Posts Table Pro isn’t just for videos, it’s one of the best WordPress video plugins around. It lets you add a WordPress video grid or video portfolio to your website.

You’ll learn how to add videos to your gallery using 2 different methods:

• Embedding a video that is hosted elsewhere into WordPress, for example YouTube or Vimeo.
• Directly uploading video to your WordPress website.

We’ll look at the different options for setting up your WordPress video gallery. You can choose which columns display, the column width, how many videos to display in each page of the gallery and much more.

The video gallery will be fully responsive and will resize to fit different screen sizes and mobile devices.

At the end of this tutorial, you’ll know how to create a professional-looking video gallery for your WordPress website. Your visitors will be able to watch videos directly within the video gallery. They’ll be able to search and filter to find the videos they want more easily.

#1 – Get ready to create your responsive WordPress video gallery

#1a – Install the Posts Table Pro plugin

You can add a video gallery to any WordPress website with any theme. The only essential video plugin is Posts Table Pro, which you need to create the video grid online.

#1b – Plan how to store the videos for your gallery

You also need to think about where you’re going to store the videos that will appear in your gallery. You’ll be using Posts Table Pro to create a searchable, sortable video table but first you need to add your videos and video playlists.

The Posts Table Pro plugin works by displaying posts from your WordPress website – this can be standard posts, pages or custom posts. This means that you need to add your videos within posts, pages or a custom post type.

If you want each video to appear in its own row of your WordPress gallery then you need to add each one as a separate post. If you’re planning to create video playlists then you need a separate post for each playlist (not each video).

In the screenshots and video for this tutorial, I’m using a ‘Video’ custom post type. This is the easiest way to organise your videos as you will have a dedicated area for storing videos in the WordPress admin.

If you’re a WordPress developer then you can create your custom post type programmatically. If not, I recommend the Custom Post Types UI plugin. This makes it really easy to create custom post types in WordPress without any technical know-how.

#2 – Add your videos to the gallery

Once you’ve installed Posts Table Pro and planned the structure for your video gallery behind the scenes, the next step is to add your videos to the website.

1. Go to Video > Add New (if your custom post type is called ‘Video’. If not, add a new post using your chosen method).
2. Add a title for the video.
3. Embed your video in the main content area using one of the following methods.

Method 1 – Embed a video from YouTube or Vimeo

The most reliable way to store video in your WordPress gallery is to host it on a specialist video website. YouTube or Vimeo are the most popular, but you can embed from any of the files in this list.

This is a great way to store videos because:

• It will save space on your web hosting account.
• Dedicated video hosts automatically create multiple versions of your videos behind the scenes. This means that your videos will play for more people, whatever technology or device they’re using to access your website. You don’t have to worry about writing any fancy code to check the user’s device or serve alternate versions of your videos – it all happens automatically.
• You get lots of extra features from specialist video hosts such as view counters, social sharing, annotations, mobile-friendly cards, monetisation through advertising, etc.
• If you use a public video website such as YouTube then people can also find your videos directly via YouTube. This will help to increase your traffic. (If your video gallery will not be publicly available then I’d recommend Vimeo, which has more privacy settings. You can protect Vimeo videos so they can only be viewed on your domain.)

If you’re embedding videos from one of the files in this list then you just need to embed the URL of your video directly into the post. View your video on YouTube, Vimeo or whichever site you’re using, and copy the URL from the address bar at the top of your browser. To help you find the video URL, I’ve circled it in the screenshot below:

Simply paste the URL into the content area for your WordPress post. WordPress will instantly convert it into an embedded video player.

Method 2 – Upload the video directly to the media library

You can also host videos directly on your WordPress website:

1. Click the ‘Add Media’ button above the WordPress toolbar and upload your video file (e.g. MP4 or MOV).
2. Select the video in the media library.
3. Make sure the ‘Attachment Display Settings’ section is set to ‘Embedded Media Player’ and click ‘Insert into post’.

Again, WordPress will automatically embed a watchable video into your post.

Method 3 – Create a video playlist

Finally, you can add entire video playlists to your WordPress gallery.

1. Click ‘Add Media’ above the WordPress toolbar.
2. Click the ‘Create Video Playlist’ option on the left. (This will only appear if you have video files in your media library.)
3. Tick all the videos you want to include in the playlist.
4. Click the ‘Create a new video playlist’ on the right.
5. On the next screen, add the caption that should appear for each video. Tick the boxes to indicate whether to show the video list and images in the playlist. Then click ‘Insert video playlist’.

WordPress will embed the playlist directly into your page or post.

#4 – Add any further information about your videos

Next, add any further information that you want to display in your video gallery. For best results, I recommend adding the same fields of information to each of your video posts.

Examples of further information for a video gallery might include:

• Categories
• Tags
• Description
• Video length
• ‘Buy now’ button

Set up any categories or tags using the standard WordPress functions.

The most obvious place to add any further information (e.g. text or buttons) is before or after the embedded video in the main post content. However this isn’t ideal because it will appear in the same column of the video grid as the media player. For most WordPress video galleries, it’s neater to add other information as separate columns. To do this, you can add it as an excerpt or custom field.

Tip: I recommend the Advanced Custom Fields WordPress plugin to create extra fields for storing data about your videos. For example you could create custom fields to add a description, video length and ‘Buy now’ button and display these as separate columns in the video gallery.

Later in this tutorial, I’ll show you how to create a WordPress video gallery with columns for title, content and excerpt. If you want to copy the exact shortcodes that I use in this tutorial then you need to add the video within the main content, a description in the ‘Excerpt’ field and also structure your videos into categories. You can use the documentation to add other types of column, for example custom fields – if you do this then your shortcode should be different from my examples below.

Finally, click ‘Publish’ for all your video posts. Now you’re ready to set up your video gallery!

#5 – Create your WordPress video gallery

Step 1 – Basic usage

You can add your video gallery to any post or page on your WordPress website, or even within a text widget.

Go to the page/post/widget where you want to add the gallery. In the main content area, add the following shortcode:

[posts_table post_type=”video” shortcodes=”true”]

Replace the ‘video’ in post_type=”video” with the slug for your custom post type, or ‘page’ if your videos are on pages. If your videos are on standard WordPress posts then you can ignore the post_type element of the shortcode as posts are displayed by default.

Adding shortcodes=”true” tells Posts Table Pro to display the watchable video player that WordPress created when you added your videos.

Now, view the page/post where you added the shortcode to see the first draft of your WordPress video gallery.

You’ll see that the video grid has 4 columns – the title of each video page/post, the content where you added the embedded videos, the author and the date. It looks professional but probably isn’t the information that you’d want to include in a video gallery. So keep going…

Step 2 – Change the column headings

Go back to the shortcode that you added in step 1. We want to tell it which columns to display in the video gallery. Extend the shortcode as follows to display the video player in the left hand column, with further columns for title, description and categories:

[posts_table post_type=”video” shortcodes=”true” columns=”content:Watch Now,title,excerpt:Description,category]

In this shortcode, I’ve adde a colon after the content and title columns followed by the text that I want to use as my column headers. This will rename the content column to ‘Watch Now’, and the excerpt column to ‘Description’ – while keeping the default names for the title and category columns. You can do this for any column to change the title that appears in the header row.

Now update your page and see how your WordPress video gallery looks now. You’ll see that the categories are now much more relevant and user-friendly. You can click on a category to filter by the videos in that category. You can also type a keyword into the search box, or click on a column header to sort the grid.

Step 3 – Change the column widths

You might also want to change the width of the columns. Posts Table Pro will set this automatically based on the content of each column. For a WordPress video gallery, you might want to make the video player column wider so that people can see your videos more easily.

To customise the column widths in the video grid, you need to add width=”” to the shortcode. Between the quotation marks, you should add numbers that add up to 100. Each number represents a column and the percentage of the table’s widths that it should occupy. For example:

[posts_table post_type=”video” shortcodes=”true” columns=”content:Watch Now,title,excerpt:Description,category widths=”40,15,30,15″]

There are 4 numbers in the width setting to represent the 4 columns in the video gallery. These 4 numbers add up to 100. The first column (content) has 40% and is the biggest to give more space to the embedded video player. The second column (title) has 15% as the video titles don’t need much space. The third column (excerpt) is slightly longer to allow for more text. The final column (category) is also quite small.

Play around with the widths in your own video gallery to get the column sizes working as you want them.

Step 3 – Change the gallery link settings

By default, the title column in your WordPress video gallery is clickable. Clicking on it takes you to the single post page for each video. You can also click on categories to filter the video grid by that category.

You can disable some or all of these links if you like. For example, a lot of video libraries display a grid of videos and don’t wish to provide separate pages for each video. If this applies to you then you’ll want to disable the links.

To do this, add one of the following to the Posts Table Pro shortcode:

• links=”none” – this disables all the links in the video gallery so that you can’t click on the title or category.
• links=”category” – this disables the links on the video titles, while leaving the category links as they are. This is a good option if you like being able to click on a category to filter the video grid, but don’t want people to access the individual video pages by clicking the title.

#6 – Other video grid options

If you like, you can set up your WordPress video gallery by following the instructions in this tutorial exactly. However the Posts Table Pro WordPress video plugin is very flexible and you can configure it to your exact requirements. For example, you can:

• Change the default sort order for your videos.
• Choose which columns are displayed and what to call them.
• Choose how many videos appear on each page.
• Add dropdown search filters above your gallery so that people can filter by category or tag.
• Change or hide the search and pagination links at the top and bottom of the gallery.
• Add your videos in different ways – for example if you want to use the main content area for something else then you can embed the videos as custom posts instead.
• Display other types of content as well as videos. For example you can use it as a WordPress image and video gallery plugin, or as a video and audio gallery with music playlists.
• And much more…

Use the plugin documentation to find out what’s possible with Posts Table Pro and choose how you will use it for your own WordPress video gallery. With so much flexibility, it’s easily the best video gallery plugin for WordPress.

Getting started

Now you know how to create a fully featured, fully responsive video grid in WordPress. To get started, download the Posts Table Pro plugin and follow the steps in this tutorial to set up your video gallery online.

Source: Tutorial: How to Create a WordPress Video Gallery | Barn2 Media