How to Create a WordPress Plugin: YouTube WP Feeder

In this tutorial, you’ll learn how to build a basic WordPress plugin named YouTube WP Feeder. This plugin will fetch the latest videos from your YouTube channel and display them on your WordPress site using a shortcode. Here is an example page I made after inserting the short code on to the page and saving it.

Warning

If this is your first time installing a plugin directly into your WordPress Files please start with a test website. It is easy to make mistakes and be prepared to make some.

Step 1: Prepare Your Development Environment

1. Access Your WordPress Directory:
   • Connect to your WordPress installation via FTP or access it through the file manager on your hosting control panel.
   • Navigate to the wp-content/plugins/ directory.
2. Create a Folder for Your Plugin:
   • Inside the wp-content/plugins/ directory, create a new folder and name it youtube-wp-feeder.
   • This folder will contain all the files needed for your plugin.

Step 2: Create the Main PHP Plugin File

1. Create the Plugin File:
   • Inside your youtube-wp-feeder folder, create a new file named youtube-wp-feeder.php.
2. Add the Plugin Header Information:
   • Open youtube-wp-feeder.php and add the following code:
   <?php /* Plugin Name: YouTube WP Feeder Plugin URI: https://yourbrand.com/plugins/youtube-wp-feeder Description: A simple plugin to display your latest YouTube videos on your WordPress site. Version: 1.0 Author: Your Name Author URI: https://yourbrand.com License: GPL2 License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: youtube-wp-feeder */ // Hook to add a shortcode add_shortcode('youtube_feed', 'display_youtube_videos'); // Function to fetch and display YouTube videos function display_youtube_videos($atts) { $atts = shortcode_atts( array( 'channel_id' => '', // YouTube channel ID 'api_key' => '', // YouTube API key 'max_results' => 6 // Number of non-Shorts videos to display ), $atts, 'youtube_feed' ); // Fetch YouTube videos $channel_id = $atts['channel_id']; $api_key = $atts['api_key']; $max_results = $atts['max_results']; $request_limit = $max_results * 2; // Request more to filter out shorts $api_url = "https://www.googleapis.com/youtube/v3/search?order=date&part=snippet&channelId=$channel_id&maxResults=$request_limit&type=video&key=$api_key"; $response = wp_remote_get($api_url); if (is_wp_error($response)) { return 'Unable to retrieve videos.'; } $videos = json_decode(wp_remote_retrieve_body($response)); if (empty($videos->items)) { return 'No videos found.'; } // Generate HTML to display videos $output = '<div class="youtube-video-grid" style="display: flex; flex-wrap: wrap; justify-content: space-between;">'; $video_count = 0; foreach ($videos->items as $video) { if (isset($video->id->videoId)) { $video_id = $video->id->videoId; $title = esc_html($video->snippet->title); // Fetch video details $video_details_url = "https://www.googleapis.com/youtube/v3/videos?part=contentDetails&id=$video_id&key=$api_key"; $video_details_response = wp_remote_get($video_details_url); $video_details = json_decode(wp_remote_retrieve_body($video_details_response)); if (!empty($video_details->items[0]->contentDetails)) { $duration = new DateInterval($video_details->items[0]->contentDetails->duration); if ($duration->i >= 1 || $duration->h >= 1) { $output .= " <div style='flex-basis: 48%; margin-bottom: 20px;'> <iframe width='100%' height='315' src='https://www.youtube.com/embed/$video_id' frameborder='0' allowfullscreen></iframe> </div>"; $video_count++; } } } if ($video_count >= $max_results) break; } $output .= '</div>'; return $output; }

Step 3: Activate the Plugin

1. Go to Your WordPress Admin Dashboard:
   • Navigate to Plugins > Installed Plugins.
2. Locate the YouTube WP Feeder Plugin:
   • You should see YouTube WP Feeder in the list of plugins.
3. Activate the Plugin:
   • Click Activate to enable the plugin.

Step 4: Use the Plugin Shortcode

1. Add the Shortcode to a Page or Post:
   • Use the following shortcode to display videos on any page or post:
   No videos found.
2. Parameters Explained:
   • channel_id: Your YouTube Channel ID. Learn how to find your YouTube Channel ID.
   • api_key: Your YouTube Data API Key. Learn how to get a YouTube Google API Key.
   • max_results: Number of videos to display (default is 6).

Step 5: Add Custom CSS (Optional)

To customize the appearance of your video feed, you can add the following CSS to your theme’s stylesheet or inside a custom CSS plugin:

.youtube-video-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.youtube-video-grid div {
    flex-basis: 48%;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.youtube-video-grid div:hover {
    transform: scale(1.05);
}

.youtube-video-grid iframe {
    width: 100%;
    height: 315px;
}

Step 6: Test and Adjust Your Plugin

1. Visit the Page or Post with the Shortcode:
   • Ensure that the videos are displayed correctly and that there are no Shorts.
2. Adjust the Settings as Needed:
   • Modify the channel ID or API key directly in the shortcode to test different setups.

Feel free to use this plugin on your own site and modify it anyway you like.

This is a basic plugin but if you want to develop a professional WordPress Plugin there are many more files and details to include. See How to Create and Sell a Professional WordPress Plugin.

Conclusion

You have successfully created and installed your own YouTube WP Feeder plugin for WordPress. You can now easily display the latest YouTube videos on your site, exclude Shorts, and customize the appearance with a little bit of CSS.

You also might like How to create a Google Chrome Extension.