The following is a tutorial on how to make YouTube video post for WordPress compatible with a WordPress video theme (in this example we’ll use theme Wave).
If you’re not familiar with YouTube video post for WordPress, it is a plugin that allows quick and easy video import from YouTube playlists complete with video embed, thumbnail, title, description and categories. If you are a YouTube publisher you will absolutely love this plugin.
The plugin is compatible by default with themes DeTube, Avada, SimpleMag and GoodWork. If you own any of these 4 themes, there’s no need for the extra code listed below.
To make theme Wave (and any other theme actually) compatible with the plugin, we need to use the actions that the plugin has implemented into its functionality. First thing to do is determine our theme name; to do this, we need to open file style.css that is available in any WordPress theme. Once opened, all theme details can be found at the top of the file:
/* Theme Name: Wave Theme URI: http://themeforest.net/user/mattbrett Description: All you need to build your own video-centric site. Version: 1.7.5 Author: <a href="http://mattbrett.com">Matt Brett</a> Author URL: http://mattbrett.com */
This is how the info for theme Wave looks like. The only thing we need from all that info is the Theme Name (in this case Wave).
Next, we need to add some code in theme functions.php file. Theme Wave offers the option of storing the video embed code into a custom field for posts. Basically, we want to tell the plugin to import videos as posts and set on custom field the embed code. To do this, we’ll use filter cbc_youtube_theme_support and pass our theme details.
In file functions.php of theme Wave we’ll add the following:
/**
* Add theme compatibility
* @param array $themes - array of default compatible themes
*/
function wave_theme_compat( $themes ){
$themes['wave'] = array(
'post_type' => 'post',
'taxonomy' => false,
'post_meta' => array(
'embed' => 'video_embed_value'
),
'post_format' => 'video',
'theme_name' => 'Wave'
);
return $themes;
}
add_filter('cbc_youtube_theme_support', 'wave_theme_compat');
A little explaining. We want to add the theme to the existing array of compatible themes. To do this, on $themes array we create a new key having the theme name (all in lowercase). Under this key we store an array that contains all information for this theme:
post_type : store the post type this theme uses for video (in this case regular posts);
taxonomy : the post type taxonomy (for regular posts, leave false);
post_meta : an array containing the custom fields where to store video information. In this case, the theme uses the embed code ( key embed ) but the plugin can also store video url ( instead of embed use key url ) and also the video thumbnail ( you need to create an additional key thumbnail );
post_format : if the theme needs a post format, specify it here;
theme_name : the theme name used for display purposes.
Once functions.php is saved, in plugin import pages (single video, manual bulk or automatic bulk) a new option will appear when trying to import new videos: Import as Wave post? If checked, the plugin won’t import videos as custom post type but as the post type specified in compatibility array.
Next, theme Wave needs a bit more information for videos. This information is also stored in custom fields and consists of a flag variable that tells the theme the post is actually a video and also it needs the video width. To store this extra information, we need to hook to a plugin action that runs whenever a new video post is created ( cbc_post_insert ). The code below also goes in functions.php.
/**
* On bulk post import, set up all extra fields needed by the theme to flag post as video
* @param int $post_id - ID of newly created post
* @param array $video - array of video data returned by YouTube
* @param false/array $theme_import - theme import configuration
*/
function wave_post_fields( $post_id, $video, $theme_import ){
// check if setting is to import as theme post
if( !$theme_import ){
return;
}
// look for the plugin general settings function
if( !function_exists('cbc_get_player_settings') ){
return;
}
$player_settings = cbc_get_player_settings();
// save the width as required by theme
update_post_meta( $post_id, 'video_width_value', $player_settings['width'] );
// flag post as video
update_post_meta($post_id, 'is_video_value', true);
// for short title, if needed, uncomment below
//update_post_meta($post_id, 'post_title_value', $video['title']);
// for short excerpt uncomment below
//update_post_meta($post_id, 'post_type_value', $video['description']);
}
add_action('cbc_post_insert', 'wave_post_fields', 10, 3);
As you can see, the hook has 3 parameters: post id, video details (as retrieved from YouTube) and theme import. Theme import variable is true only if user chooses to import videos as theme post ( remember the option Import video as Wave post? ). If false, the user chose to import videos as custom post type. Basically, in callback function this is the first thing we want to check for and if it’s false, we don’t need to set any custom fields.
// check if setting is to import as theme post
if( !$theme_import ){
return;
}
Next, in order to be able to set the video width, we need the plugin settings for the player. These can be easily retrieved by using the plugin function cbc_get_player_settings.
Having all information available, we can start setting the custom fields for the newly created post to make it fully compatible with theme Wave. The video width is saved in custom field video_width_value and the flagging variable for video under is_video_value.
// save the width as required by theme update_post_meta( $post_id, 'video_width_value', $player_settings['width'] ); // flag post as video update_post_meta($post_id, 'is_video_value', true);
The extra commented code is for custom fields title and small excerpt that can hold information to be used for featured posts in theme and other reasons.
This is all that you need to make Wave theme compatible with the plugin (or any other theme). Please note that in case your theme doesn’t need any extra information set on posts, you won’t need to use hook cbc_post_insert, the filter should do the trick.
Table of contents
Other WordPress themes
Below we’ll list the code needed to import videos as WP theme post type for various themes, as requested by other users. If your theme isn’t listed here please follow the tutorial above.
Theme Sahifa
Add the code below to Sahifa’s functions.php file. This will allow importing as regular posts displayed as video in this theme.
/**
* Add theme compatibility
* @param array $themes - array of default compatible themes
*/
function sahifa_theme_compat( $themes ){
$themes['sahifa'] = array(
'post_type' => 'post',
'taxonomy' => false,
'post_meta' => array(
'embed' => 'tie_embed_code'
),
'post_format' => 'video',
'theme_name' => 'Sahifa'
);
return $themes;
}
add_filter('cbc_youtube_theme_support', 'sahifa_theme_compat');
/**
* On bulk post import, set up all extra fields needed by the theme to flag post as video
* @param int $post_id - ID of newly created post
* @param array $video - array of video data returned by YouTube
* @param false/array $theme_import - theme import configuration
*/
function sahifa_post_fields( $post_id, $video, $theme_import ){
// check if setting is to import as theme post
if( !$theme_import ){
return;
}
update_post_meta($post_id, 'tie_post_head', 'video');
update_post_meta($post_id, 'tie_video_url', 'http://www.youtube.com/watch?v='.$video['video_id']);
}
add_action('cbc_post_insert', 'sahifa_post_fields', 10, 3);
Theme VideoStar
Add the code below to VideoStar’s functions.php file. This will allow importing as regular posts displayed as video in this theme.
/**
* Add theme compatibility
* @param array $themes - array of default compatible themes
*/
function videostar_cbc_theme_compat( $themes ){
$themes['richwp videostar theme'] = array(
'post_type' => post,
'taxonomy' => false,
'post_meta' => array(),
'post_format' => 'video',
'theme_name' => 'RichWP VideoStar Theme'
);
return $themes;
}
add_filter('cbc_youtube_theme_support', 'videostar_cbc_theme_compat');
/**
* Filter the post content on new video insert
*/
function videostar_cbc_video_content( $post_content, $video, $theme_import ){
// check if importing in theme
if( !$theme_import ){
return $post_content;
}
// we want to add the video link to post content at the beginning
$video_url = 'http://www.youtube.com/watch?v='.$video['video_id'];
return $video_url."\n".$post_content;
}
add_filter('cbc_video_post_content', 'videostar_cbc_video_content', 10, 3);
Theme Videozoom
Add the code below to Videozoom’s functions.php file. This will allow importing as regular posts displayed as video in this theme.
/**
* Add theme compatibility
* @param array $themes - array of default compatible themes
*/
function videozoom_theme_compat( $themes ){
$themes['videozoom'] = array(
'post_type' => 'post',
'taxonomy' => false,
'post_meta' => array(
'embed' => 'wpzoom_post_embed_code'
),
'post_format' => 'video',
'theme_name' => 'Videozoom'
);
return $themes;
}
add_filter('cbc_youtube_theme_support', 'videozoom_theme_compat');
/**
* On bulk post import, set up all extra fields needed by the theme to flag post as video
* @param int $post_id - ID of newly created post
* @param array $video - array of video data returned by YouTube
* @param false/array $theme_import - theme import configuration
*/
function videozoom_post_fields( $post_id, $video, $theme_import ){
// check if setting is to import as theme post
if( !$theme_import ){
return;
}
// save the width as required by theme
update_post_meta( $post_id, 'wpzoom_post_embed_location', 'Before everything else' );
// flag post as video
update_post_meta($post_id, 'wpzoom_video_type', 'external');
}
add_action('cbc_post_insert', 'videozoom_post_fields', 10, 3);
Theme Video
Add the code below to WP theme Video’s functions.php file. This will allow importing as video posts compatible with the theme.
/**
* Add theme compatibility
* @param array $themes - array of default compatible themes
*/
function video_theme_compat( $themes ){
$themes['video'] = array(
'post_type' => 'videos',
'taxonomy' => 'videoscategory',
'post_meta' => array(
'embed' => 'video'
),
'post_format' => 'video',
'theme_name' => 'Video'
);
return $themes;
}
add_filter('cbc_youtube_theme_support', 'video_theme_compat');
/**
* On bulk post import, set up all extra fields needed by the theme
* @param int $post_id - ID of newly created post
* @param array $video - array of video data returned by YouTube
* @param false/array $theme_import - theme import configuration
*/
function video_post_fields( $post_id, $video, $theme_import ){
// check if setting is to import as theme post
if( !$theme_import ){
return;
}
// save duration
if( function_exists('cbc_human_time') ){
update_post_meta($post_id, 'time', cbc_human_time( $video['duration'] ) );
}
}
add_action('cbc_post_insert', 'video_post_fields', 10, 3);
Theme Valenti
Add the code below to WP theme Valenti child theme functions.php file. This will allow importing as posts formatted as video compatible with the theme.
// YouTube plugin functionality
/**
* Add theme compatibility
* @param array $themes - array of default compatible themes
*/
function valenti_child_theme_compat( $themes ){
$themes['valenti child'] = array(
'post_type' => 'post',
'taxonomy' => false,
'post_meta' => array(
'embed' => 'cb_video_embed_code_post'
),
'post_format' => 'video',
'theme_name' => 'Valenti'
);
return $themes;
}
add_filter('cbc_youtube_theme_support', 'valenti_child_theme_compat');
Theme Newspaper
Add the code below to WP theme Newspaper child theme functions.php file (as suggested by curocmi). This will allow importing as posts formatted as video compatible with the theme.
// YouTube plugin functionality
/**
* Add theme compatibility
* @param array $themes – array of default compatible themes
*/
function newspaper_child_theme_compat( $themes ){
$themes['newspaper child theme'] = array(
'post_type' => 'post',
'taxonomy' => false,
'post_meta' => array(
'embed' => 'cb_video_embed_code_post'
),
'post_format' => 'video',
'theme_name' => 'Newspaper child theme'
);
return $themes;
}
add_filter('cbc_youtube_theme_support', 'newspaper_child_theme_compat');
/**
* On bulk post import, set up all extra fields needed by the theme to flag post as video
* @param int $post_id – ID of newly created post
* @param array $video – array of video data returned by YouTube
* @param false/array $theme_import – theme import configuration
*/
function newspaper_post_fields( $post_id, $video, $theme_import ){
// check if setting is to import as theme post
if( !$theme_import ){
return;
}
$postarray['td_video'] = 'http://youtu.be/'.$video['video_id'];
update_post_meta($post_id, 'td_post_video', $postarray );
}
add_action('cbc_post_insert', 'newspaper_post_fields', 10, 3);
I’ve a problem implementing this function inside a child theme and I’ve found out the issue is with the method “cbc_check_theme_support” inside the “includes/functions.php” file. This particular lines is the issue:
$parent = $template_data->parent();
if( is_object( $parent ) ){
$template_data = $parent;
}
$template = strtolower( $template_data->Name );
$themes = apply_filters( ‘cbc_youtube_theme_support’, cbc_supported_themes() );
if( !array_key_exists($template, $themes) ){
return false;
}
This is preventing me from using my child’s theme name as a reference key. Is there any reason why this is implemented this way?
The reason is pretty simple: the plugin is compatible by default with a few themes. This means that if you are using deTube, Avada, SimpleMag or GoodWork, you don’t need to add any code into functions.php file. Very helpful if you’re not a coder.
If I may ask, what exactly is the problem you’re having? I might be able to provide a solution to it.
I’m making my theme compatible with this plugin as outlined above so I can import the videos as posts. However, if I add the child theme name into the compatibility list, it will not work. The work around I did was to directly refer to the parent theme (as showed in the example code below). You should probably include that in your documentation if developers will like to implement this code into child themes.
Alternatively, probably you could add in an algorithm to check whether the theme is a child of your default compatible themes, otherwise, refer to the name of the child theme instead.
/**
* Add theme compatibility
* @param array $themes - array of default compatible themes
*/
function wave_theme_compat( $themes ){
$themes['the_parent_theme_name'] = array( // Child theme name will not work here!
'post',
'taxonomy' => false,
'post_meta' => array(
'embed' => 'video_embed_value'
),
'post_format' => 'video',
'theme_name' => 'Wave'
);
return $themes;
}
add_filter('cbc_youtube_theme_support', 'wave_theme_compat');
I’m making my theme compatible with this plugin as outlined above so I can import the videos as posts. However, if I add the child theme name into the compatibility list, it will not work. The work around I did was to directly refer to the parent theme (as showed in the example code below). You should probably include that in your documentation if developers will like to implement this code into child themes.
Alternatively, probably you could add in an algorithm to check whether the theme is a child of your default compatible themes, otherwise, refer to the name of the child theme instead.
/**
* Add theme compatibility
* @param array $themes - array of default compatible themes
*/
function wave_theme_compat( $themes ){
$themes['the_parent_theme_name'] = array( // 'post',
'taxonomy' => false,
'post_meta' => array(
'embed' => 'video_embed_value'
),
'post_format' => 'video',
'theme_name' => 'Wave'
);
return $themes;
}
add_filter('cbc_youtube_theme_support', 'wave_theme_compat');
Good idea on the default themes to check for parent and manual ones to allow child theme, thank you. Will get this into the next update.
Awesome. I’ve seen the update now. By the way, there’s one more issue I noticed. By using “cbc_post_insert” hook and the available info from the $video variable, I had successfully retrieved additional metadata such as duration, views, ratings, comments count when I Import videos as a custom theme’s post. However, the same hook doesn’t seem to work when I use “Add new” to add a single video as a custom theme’s post. Could the hook be made consistent between Add new and Import videos?
Secondly, after analysing the youtube gdata, I noticed there is a higher resolution thumbnail available through http://i.ytimg.com/vi//sddefault.jpg but it’s not used in the YouTube importer. There’s also another thumbnail not available through the gdata from http://i.ytimg.com/vi//maxresdefault.jpg which is available for 720p videos and above. I’m wondering if it’s possible to have an option to import the highest possible thumbnail resolution available to the video and if the high quality thumbnail does not exist, then it will fallback to the default highest size available. My client would prefer to have the highest quality thumbnails if it’s available to be used in places like image sliders.
Will see what can be done about the thumbnail and the check the bug you found, thank you for the heads-up.
I’m using this as a test site. The videos are showing up as short codes, etc, but not as import videos or automatic import function. Please help.
Can you please contact me from my CodeCanyon profile page ( link here: http://codecanyon.net/user/cboiangiu ). Most likely, the compatibility isn’t done right and I need some private information in order to be able to help.
Hi
I use richwp video hub theme.
It’s almost same as video star,so I copied video star’s code
replace theme name “richwp videostar theme” to “richwp video hub” and uploaded it,
but error appears .
message is this.
Warning: Cannot modify header information – headers already sent by (output started at /home2/cloudst/public_html/wp-content/themes/videohub/functions.php:486) in /home2/cloudst/public_html/wp-includes/option.php on line 563
What does it mean?
Thank you.
See line 486, look for any output ( anything after the closing php tag ). If this isn’t the problem, there could be an error, try to remove all modifications you made and see if this solves the problem. If it does, revise the code you entered, there’s something wrong in there.
Hey,
Love the plugin, using it on Detube. Do you have any plans to perhaps add more themes to the list besides the four? If so I think this one, it’s new, but I think this is pretty sweet.
http://themeforest.net/item/true-mag-wordpress-theme-for-video-and-magazine/6755267?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=cactusthemes
I understand you might not be planning this, but just thought I would ask.
Thank you, happy to hear you find it useful. The themes compatible by default with the plugin are only the ones that will work without you having to do anything else. The plugin can be made compatible with any theme by following the tutorial above, you just need to put some filters/actions in your theme functions.php file to make it work. Please read the instructions carefully, let me know if you need help.