How to Install the Video Gallery Drop-in to Your MD Child Theme
Thanks for purchasing the Video Gallery Drop-in! This quick guide will show you how to install the Video Gallery into your Child Theme and how to use the features on your own site.
NOTE: This Drop-in requires the minimum version of Marketers Delight 4.6.4 to function properly. Before you install this Drop-in, ensure you are running the latest versions of WordPress + MD.
[toc]
To install the Video Gallery Drop-in to your child theme, follow the video and written instructions below.
Since the Video Gallery Drop-in is located in your child theme you have complete control over every aspect of the video features and can make adjustments to make it more powerful, or strip away what you don’t need.
You have full control using the MDAPI to build admin options, and can change how any of the video features added to the frontend of your site look.
You’ll need to have coding experience to customize these files of course, and the Video Gallery has been built to “just work” once installed so you won’t need to touch these files to get the full benefits of this Drop-in.
Ready to get started?
Let’s install the Video Gallery to your site!
Install: Text Instructions
Step 1: Initialize the MD Library in your Child Theme (skip if already done)
Since Drop-ins reuse tools that already come with Marketers Delight, we need to ensure the MD library is properly loading in our Child Theme.
Due to the order in which WordPress loads files (child theme loads before the main MD theme) we need to load the MD library into the child theme ourselves with this simple line of code in the functions.php file:
require_once( get_template_directory() . '/lib/marketers-delight.php' );
If you use the Starter MD Child Theme (download from your account), this line has already been added and your child theme is Drop-in ready.
Step 2: Upload The Video Gallery Files
After you download the md-videos.zip file from your account, unzip it and upload the entire videos folder to your child theme directory.
To keep your child theme organized, I recommend you create a new folder called ‘dropins’ and put those files in there. It’s important you remember where you uploaded the Drop-in file to for your next step.
Step 3: Load The Videos File to Your Site
With the MD library initialized and MD Videos folder uploaded, there’s only one more step: load the drop-in!
Back in your child theme’s functions.php file, paste this simple include statement AFTER the MD library call:
include_once( get_stylesheet_directory() . '/dropins/videos/videos.php' );
IMPORTANT: Depending on where you uploaded the videos folder, you may need to change the path above so your site knows where the file is. If you created a “dropins” folder in your child theme, the above code will work as-is.
Save and upload the file, and there’s only one last *simple* step to go!
Step 4: Copy the Video Gallery CSS to your style.css file
The Video Gallery needs some extra styling that doesn’t come with Marketers Delight, so you can now open up (not upload) the second file that came with the Videos download, videos.css and paste the CSS code into your Child Theme’s style.css file.
For simplicity sake you can paste it at the end of the file, or anywhere that makes sense if you like to keep this file organized.
Step 5: Resave Your Permalinks to Flush Your Site’s Cache
Since the Video Gallery adds a new custom post type, in order to show the new gallery page we have to flush our site’s permalinks. Luckily this is the easiest step!
Login to your Dashboard and go to Settings > Permalinks and simply click the “Save Changes” button at the bottom of the page.
Once you start adding videos to the new Videos manager, you’ll be able to see your gallery page. Keep in mind if you change the gallery URL from the Video Settings panel, you’ll need to come back and re-save your Permalinks again.
After Step 5, the Video Gallery has been successfully installed to your site. To connect your site to YouTube and enable advanced features, follow the steps below to get the needed YouTube account keys:
Setup: Get YouTube API Key
To show the view counts of your YouTube videos and activate the YouTube importer you’ll need to connect your site to YouTube’s API.
We can do this by grabbing the YouTube API key that is connected to our Google Account and then plug it into the Video Settings in your admin panel.
To get your YouTube API key, follow these simple steps:
Step 1: Go to the Google Developers Console and login to your Google account.
Step 2: Create a new project and name it anything you want
Step 3: Select the “YouTube Data API” link from the list of Google APIs
Step 4: Click the “Enable” button to enable the YouTube API
Step 5: Click the “Create Credentials” button with the following credentials set:
Step 6: Click the “What credentials do I need?” button and copy your newly generated YouTube API key.
Step 7: Finally! Plug your YouTube API key into Dashboard > Videos > Settings
…and just like magic, your YouTube videos will show the total view counts below them! You can also begin using the YouTube Importer to quickly publish new videos to your site.
Setup: Get YouTube Channel ID Key
To add a complete integration of YouTube to your site and enable the YouTube Bar and Subscribe button, you need to add your YouTube Channel ID to the Video Settings as well.
Luckily, this key is much easier to obtain and is already made for you.
Click this link to go to your YouTube account and grab your Channel ID like so:
Note: Your Channel ID is publicly available so you don’t need to worry about keeping it a secret like your YouTube API key.
Once you’ve copied your Channel ID, go to Dashboard > Videos > Settings and paste your ID into the Channel ID field to the right side of the screen:
Now the YouTube Bar that adds a Subscribe button and link back to your YouTube channel will show on your video gallery page as well as a subscribe button below each video.
How to Add Videos
From the new Videos post type in the side of your admin menu you can click “Add New” to publish a video just like if you were adding a new blog post to your site.
Once you get to the Edit screen you can use the Featured Video meta box to add your video to the top of the video page.
You can embed videos from YouTube, Vimeo, or your own custom embed code from this meta box, and once plugged in, MD will format the video to display full-width across your page.
Once you plug in your video, you can write up a quick description and configure any of the other WordPress and MD settings to complete your page. Upload a Featured Image to show on the video teaser on the Gallery page, and publish your video when ready.
A cool tip: You can also use the Featured Video meta box to attach videos on posts, pages, and custom post type entries, they just won’t show in your Video Gallery.
If you use YouTube, you can quickly publish videos from your channel to your site using the YouTube Importer, as shown below:
Using the YouTube Importer
Once you connect your YouTube API key to your site you can begin importing and publishing videos to your site in a very fast way.
You can go to Dashboard > Videos > Settings at any time to run the importer and all you need to do is enter the video ID from the video’s YouTube URL into the importer’s text field as shown below.
You can import multiple videos at a time by clicking the “Add New” button and adding a new video ID to the new field.
To get the video ID, go to the video’s page on YouTube and grab the ID out of the URL like so:
Once you’ve enter the ID’s of videos, click the “Import Videos” button and wait a few seconds as the Importer pulls data from YouTube and configures it into new posts in your Video library.
Once the Importer is completed you should see a string of success messages and links to view and edit your new videos:
Using the YouTube Bar
Once you’ve connected your API Key and Channel ID to your site, the features of the MD Video Gallery are now fully functional.
One of the features that gets enabled is the YouTube Bar which shows your YouTube photo, name, and links back to your channel at the top of your Video Gallery page. You can also feature upto 3 videos in this bar as well.
Using the Video Gallery Settings
By going to Dashboard > Videos > Settings (the same place you connected your keys to) you can check out the extra settings the Video Gallery comes with.
The following settings control the Video Archive page, which lists all of your latest videos:
The settings are fairly straightforward, but here’s a quick explanation of each:
Disable YouTube Bar: once you connect your channel ID to your site, the YouTube bar will automatically be added to the top of your gallery page. To remove it, simply check this setting.
Page Title + Subtitle: These text options allow you to add a headline with description text to the top of your Video Gallery page. To see what that looks like, check out MDTV.
Page URL Slug: By default you can access your videos page from http://domain.com/videos/ but if you wish to change the slug to something else, enter it in this text field. For MDTV I changed the slug to “tv”.
Note: Once you change the slug URL, you’ll need to go back to Settings > Permalinks and click the “save” button to refresh your permalinks settings and avoid a 404 error on your new URL.
Need Help? Have Any Questions?
If you are confused by any step, feel free to reach out to Alex at the Kolakube support forums for help and answers to any of your questions.