Contents
While for most users the default plugin functionality or the WordPress theme compatibility will do, there are cases when you might want to integrate VideographyWP with your theme and use its embedding features into your WordPress theme.
This will require you to modify theme templates in order to achieve this. Into the tutorial below we will make theme Twenty Fifteen integrate with VideographyWP and display videos through the website.
Please note that using a child theme is the recommended approach for this technique since it is the only way you won’t lose your theme modifications when you update your theme.
The same approach as the one presented below can be used with virtually any theme. Let’s begin.
Manage video embeds
First thing we need to do is setup our child theme functions.php file.
By default, Twenty Fifteen displays featured image above the post but in case of our videos, instead of the featured image we want it to display the post video, if any.
To do this, we will create a function into the child theme functions.php file that will display the video if found or the featured image instead.
/**
* Displays the post media thumbnail or video, if available
*/
function twentyfifteen_post_media(){
if( function_exists( 'cvwp_has_video' ) && cvwp_has_video() ){
// enable lazy load by default
add_filter( 'cvwp_lazy_load', '__return_true' );
// embed the video
cvwp_embed_video( '<div class="post-thumbnail">', '</div>' );
}else{
// revert to default media function
twentyfifteen_post_thumbnail();
}
}
As you may already have noticed, we used a few of VideographyWP templating functions and filters. Basically, the function will check if a video is set on the current post by using function cvwp_has_video() and if found, will embed it using function cvwp_embed_video().
Having set filter cvwp_lazy_load to always return true before the video embedding will ensure that all over our website the plugin will embed videos using the lazy load technique; this ensures a lower page loading time.
If a video isn’t found, the function will simply display the featured image using theme function twentyfifteen_post_thumbnail().
Don’t show lazy load setting
Having lazy load always on because we set it into the video embedding function twentyfifteen_post_media() by using filter cvwp_lazy_load, we’ll need a way to make VideographyWP stop displaying lazy load setting in post embed options.
This can easily be done by using filter cvwp_show_lazy_embed_settings and making it always return false. Following code goes into child theme functions.php file.
/** * Lazy load is enabled always, don't show the setting when editing posts */ add_filter( 'cvwp_show_lazy_embed_settings', '__return_false' );
Stop automatic plugin embedding
Since all embedding will be managed by theme function twentyfifteen_post_media() that we created above, we need to force the plugin to stop all automatic embedding that it can do.
This can be done very easily by using filter cvwp_disallow_plugin_embeds and making it always return true. The code below goes also into our child theme functions.php file.
/** * Disallow plugin embeds */ add_filter( 'cvwp_disallow_plugin_embeds', '__return_true' );
Make all video embeds the same width
For theme Twenty Fifteen, the perfect video width to have on all videos is 826 pixels. We don’t need to worry about responsiveness since VideographyWP will handle that aspect for us.
To make all video embeds have the same width, we will use filter cvwp_embed_width into child theme functions.php file.
/**
* Set video width by default to be 826 px wide, without the possibility of setting it up
*/
function twentyfifteen_child_embed_width(){
return 826;
}
add_filter( 'cvwp_embed_width', 'twentyfifteen_child_embed_width' );
Display video duration and source in post meta
The last thing we want to display is the video duration and source into each post meta. Twenty Fifteen handles post meta from function twentyfifteen_entry_meta() but allows child themes to overwrite it and this is exactly what we’ll do.
Into our child theme functions.php we will copy the exact function from Twenty Fifteen; by doing this we will force the parent theme to use our function instead of the one it has.
Once copied, we will make a small modification to it right at the beginning of the function leaving everything else in place:
/**
* Overwrite parent theme entry meta function to display information for videos correctly.
* Original function can be found in twentyfifteen/inc/template-tags.php
*
* Prints HTML with meta information for the categories, tags.
*
* @since Twenty Fifteen 1.0
*/
function twentyfifteen_entry_meta() {
/**
* If post type is vimeo-video, output its specific meta fields
* and stop here.
*/
if( function_exists( 'cvwp_has_video' ) && cvwp_has_video() ){
twentyfifteen_child_video_entry_meta();
}
// REST OF THE FUNCTION REMOVED IN THIS EXAMPLE
// YOUR ACTUAL IMPLEMENTATION SHOULD CONTAIN THE REST OF THE FUNCTION
}
Please note that into the example above we removed the rest of the function; in your implementation you should keep everything.
The thing that we added to the function is a call to our function twentyfifteen_child_video_entry_meta() that gets called for every video post created by VideographyWP.
Since the function doesn’t yet exist, let’s put it into our child theme functions.php file.
/**
* Post type vimeo-video entry meta display. Used in function
* above that determines if post type is vimeo-video and outputs
* its specific meta fields
*
* @return void
*/
function twentyfifteen_child_video_entry_meta(){
$duration = cvwp_the_video_duration( '', '', false );
if( $duration ){
printf( '<span class="entry-format video-duration">%1$s<a href="%2$s">%3$s</a></span>',
sprintf( '<span class="screen-reader-text">%s </span>', _x( 'Video duration', 'Used before video duration.', 'twentyfifteen_child' ) ),
esc_url( get_permalink() ),
$duration
);
}
$format = get_post_format();
if ( current_theme_supports( 'post-formats', $format ) ) {
$source = cvwp_get_the_video_source();
if( $source ){
$source .= '-video';
}
printf( '<span class="entry-format %1$s">%2$s<a href="%3$s">%4$s</a></span>',
esc_attr( $source ),
sprintf( '<span class="screen-reader-text">%s </span>', _x( 'Format', 'Used before post format.', 'twentyfifteen_child' ) ),
esc_url( get_post_format_link( $format ) ),
get_post_format_string( $format )
);
}
}
And this concludes all our edits to child theme functions.php file.
Create video template file
Next thing we need to do is create our child theme video template that will display our embedded videos. To do this, copy file content.php that can be found inside parent theme folder twentyfifteen into our child theme folder and rename it to content-video.php. This way, when displaying posts having format video, instead of parent theme file WordPress will use our template.
Next, we need this new template file to use our media function twentyfifteen_post_media() that we created above. To do this, edit the newly added child theme template file content-video.php and right at the beginning of the file, modify post thumbnail function twentyfifteen_post_thumbnail() to our function twentyfifteen_post_media().
<?php /** * The video template for displaying content * * Used for both single and index/archive/search. * * @package WordPress * @subpackage Twenty_Fifteen Child * @since Twenty Fifteen Child 1.0 */ ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <?php // Post media. twentyfifteen_post_media(); ?> <!-- Rest of template missing from this example. -->
Get complete child theme
For your convenience, here is the complete child theme that can be used with Twenty Fifteen to demonstrate how VideographyWP can be integrated with any WordPress theme.
Download Twenty Fifteen child theme compatible with VideographyWP.