Adding a custom video to the overview page

Welcome to the first in a series of articles exploring Admin 2020 and delving into what it can do and customisations.

Today we are looking at how you can easily add a video or any custom content to your dashboard!

Before we begin, make sure you have version 1.3 or above of Admin 2020 installed and it is always good practice to make a backup of your site! If you want to skip the tutorial and download the sample plugin to generate a video on your overview page, you can do so here.

For this tutorial we will be working with object orientated PHP using the following Admin2020 filter:

add_filter('admin2020_register_dash_card',array($this,$function_name));

This filter is applied on the overview page, and collects all the information about registered dash cards and outputs them on the overview page.

Create The PHP file / plugin

Create a new file in your plugins folder and call it whatever you like. Open that file and add the following code:

<?php
/*
Plugin Name: Add card (Object Based)
Plugin URI: https://admintwentytwenty.com
Description: A simple example for adding cards to the admin 2020 overview page;
Version: 1
Author: ADMIN 2020
Author URI: https://admintwentytwenty.com
*/

if ( ! defined( 'ABSPATH' ) ) exit;

You can change the name, description etc to suite your needs.

Add the PHP object

Add the following code after the existing code to start setting up your object.

class Admin2020_card_example{

  ////HOOK INTO ADMIN 2020 FILTER
  public function build(){
    add_filter('admin2020_register_dash_card', array($this,'register_the_cards'));
  }

}

The above code calls the Admin 2020 filter and passes back details about your new card.

Register the card

After the build function, you need to add a function to actually register your new dash card.

  ///HERE WE REGISTER THE NEW CARD AND PASS THE REQUIRED FIELDS TO THE FILTER
  public function register_the_cards($dashitems){

    $function_name = 'add_video';
    $name = 'Add Video To Overview';
    $category = 'Test';
    
    $newcard = array($this,$function_name,$name,$category);
    array_push($dashitems,$newcard);
    return $dashitems;
  }

We have three options here, the name you want to give to your card. The category can be any category you like, we went with test. Then finally it’s the function name, this is the name of the function we will use to output the card to the overview page.

Define the Card

Next we need to add the function that controls the content of the card. Add the following code after the ‘register_the_cards’ function.

  ///THIS IS THE FUNCTION THAT WILL OUTPUT THE CARD
  public function add_video($startdate = null, $enddate = null){


    ?>
    <div class="uk-width-1-3@m uk-width-1-1@s" id="add_video" card-type='test'>

        <div class="uk-card uk-card-default uk-card-body">
          
          <h4 >My Awesome Video</h4>
          
          <! -- REPLACE THE SRC WITH YOUR VIDEO -->
          <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" controls playsinline uk-video></video>

        </div>
    </div>


    <?php
  }

This is quite a simple function, and you can change the content to be whatever you like. Some important things to note here, the ID attribute needs to be the same as the function name and the card-type attribute will need to be the same as the category you want it to be under.

If you wish to get more in depth, this function will receive the start and end date selected by the user on the front end, so if you want you card to be dynamic and change on date changes you can use $startdate and $enddate variables which are both in ‘Y-m-d’ format.

Call the object

Once you have followed the previous steps you will just need to call the object and run it with the following:

$card_example = new Admin2020_card_example();
$card_example->build();

Your final code should like this:

<?php
/*
Plugin Name: Add card (Object Based)
Plugin URI: https://admintwentytwenty.com
Description: A simple example for adding cards to the admin 2020 overview page;
Version: 1
Author: ADMIN 2020
Author URI: https://admintwentytwenty.com
*/

if ( ! defined( 'ABSPATH' ) ) exit;

$card_example = new Admin2020_card_example();
$card_example->build();

class Admin2020_card_example{

  ////HOOK INTO ADMIN 2020 FILTER
  public function build(){
    add_filter('admin2020_register_dash_card', array($this,'register_the_cards'));
  }

  ///HERE WE REGISTER THE NEW CARD AND PASS THE REQUIRED FIELDS TO THE FILTER
  public function register_the_cards($dashitems){

    $function_name = 'add_video';
    $name = 'Add Video To Overview';
    $category = 'Test';
    
    $newcard = array($this,$function_name,$name,$category);
    array_push($dashitems,$newcard);
    return $dashitems;
  }
  
  ///THIS IS THE FUNCTION THAT WILL OUTPUT THE CARD
  public function add_video($startdate = null, $enddate = null){


    ?>
    <div class="uk-width-1-3@m uk-width-1-1@s" id="add_video" card-type='test'>

        <div class="uk-card uk-card-default uk-card-body">
          
          <h4 >My Awesome Video</h4>
          
          <! -- REPLACE THE SRC WITH YOUR VIDEO -->
          <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" controls playsinline uk-video></video>

        </div>
    </div>


    <?php
  }

  
}

Once you are ready, go to your plugins page in wp admin, activate your new plugin and navigate to the overview page and you will see your new card at the bottom. If you defined a new category then you will have a new category to filter by too!

Recent News

What’s new in v1.3.2

October 12, 2020
Welcome back to another Admin 2020 update run down. This update has focussed on UI and Updates. N...

Activating Google Analytics

September 29, 2020
This covers the (very quick) process of activating google analytics in Admin 2020 version 1.3 and...

Version 1.3 is now live!

September 29, 2020
A lot has been changing with Admin 2020 recently, and while we said version 1.2.8 was a big one, ...
Recent News

Company

Featured On