Create a WordPress Admin Video Tutorials Section with Advanced Custom Fields (ACF)

A nice little finishing touch to each of my development projects is providing the client with some video tutorials. These videos show the end user how to edit different sections of the site; primarily custom areas that have some sort of special functionality. Users can use these as a quick reference guide when they want to make changes to their site, which saves them the time and money of contacting me or another developer to update their site. This tutorial will show you how to create a simple back end interface to display tutorial videos using Advanced Custom Fields PRO (ACF PRO).

For the sake of this tutorial we’ll assume you have already created the videos. I use a Screencast-O-Matic to create mine.

Create the ACF Options Page

The first thing we’ll want to do is create a tab on the dashboard where we’ll house all of the tutorial videos. Per the ACF documentation we’ll go ahead and create our options tab using the code below. Note that you’ll need the PRO version of ACF to use Options Pages. Also note that in this example we use a position of 58.998 which will place the section directly below the ‘Genesis’ tab.

This code can be placed in your functions.php file. I typically place it in my core functionality plugin to ensure it stays in place should someone change themes.

<?php
//* ACF -- Add options page
if( function_exists('acf_add_options_page') ) {
     acf_add_options_page(array(
          'page_title' 	=> 'Admin Tutorials',
          'menu_title'	=> 'Admin Tutorials',
          'menu_slug' 	=> 'admin-tutorials',
          'capability'	=> 'edit_posts',
          'position'    => '58.998',
          'icon_url'    => 'dashicons-info',
          'redirect'	=> false
     ));
}

Create the ACF Admin Video Tutorials Field Set

Next, we’ll create a Field Group called Admin Tutorial Videos and assign it to show only on the Admin Tutorials Options page as pictured below:

The last step is adding a Message Field for each video you’d like to display. The reason we use a Message Field is because we don’t want the user to be able to edit this area, it is simply to display the video. I like to put each video on it’s own tab so it isn’t a long page of videos. As shown in the screenshot below you’ll see a tab with a Message Field in it. You can use basic HTML5 video tag or you could use a YouTube embed. Be sure to make sure you make your videos responsive.

Wrapping Things Up

To sum up, here is what we’ve done:

1. Create an options page using ACF PRO as an area to display our tutorial videos
2. Create an Admin Tutorials Fieldset to display on the new Options Tab
3. Create fields to embed each of our admin tutorial videos

This simple technique will create a polished finish to your site. Users will have easy access to these videos that will empower them to self-manage their site and have easy reference to simple edits moving forward.