How to customize a WP theme to work with Vimeotheque

By default, Vimeotheque will import your Vimeo videos into WordPress as custom post type vimeo-video. This behaviour can easily be modified from plugin Settings to import videos as regular post type post or even import them as posts configured for your WordPress theme.

In this tutorial, we are going to use the plugin’s custom post type and create all necessary template pages for theme Twenty Fifteen. All templates will be created into a child theme so we can be sure that we won’t lose any changes when updating the theme.

Create a child theme

In order to create our custom post type templates we will first need to create our child theme. We won’t go into details on how to create a child theme, this subject is covered in more detail here.

Basically, what we are going to do is simply create a folder inside wp-content/themes/ named twentyfifteen-child and create inside it files style.css and functions.php.

Inside file style.css we will put the child theme information as a comment:

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twenty-fifteen-child
*/

Next, we will have to edit our child theme file functions.php and put the code below in it in order to allow our child theme to use the styling of the parent theme:

<?php
/**
 * Enqueue parent theme styles
 */
function theme_enqueue_styles() {
    wp_enqueue_style(
    	'parent-style',
    	get_template_directory_uri() . '/style.css'
    );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Create the custom post type templates

The post type implemented by the plugin is vimeo-video. In consequence, as per WordPress Codex we will have to create the following templates into our child theme folder:

• archive-vimeo-video.php : will display the video archive of our post type
• single-vimeo-video.php : will display the single video

Usually, the 2 files would be enough but in Twenty Fifteen’s case, we will also need to copy file content.php and rename it content-vimeo-video.php. By now, our child theme folder structure should look like this:

• twentyfifteen-child/
  • archive-vimeo-video.php
  • content-vimeo-video.php
  • functions.php
  • single-vimeo-video.php
  • style.css

Modify the custom post type templates

Having all template files created into out child theme, we will need to slightly modify them so that they display correctly. Files archive-vimeo-video.php and single-vimeo-video.php will both have to use file content-vimeo-video.php to display posts.

In both files, the content template is loaded by using function get_template_part(). Edit the two files and change the function arguments from get_template_part( 'content', get_post_format() ); to get_template_part( 'content', 'vimeo-video' );.

Next, we will have to modify file content-vimeo-video.php to make it display the video when user is viewing a single video. The default content.php file will display the post thumbnail at the top of the page; we want to change that and instead of the post thumbnail, we want our post type template to display the video embed when viewing single videos.

To do this, edit child theme file content-vimeo-video.php and on line 16, instead of the following piece of code:

<?php
	// Post thumbnail.
	twentyfifteen_post_thumbnail();
?>

put this piece of code:

<?php
	// on single video post display video instead of the featured image
	if( is_single() ){
		twentyfifteen_post_vimeo_video();
	}else{
		// Post thumbnail.
		twentyfifteen_post_thumbnail();
	}
?>

Add functions and filters

By now, our child theme should use the custom post type templates when viewing a post type vimeo-video. Unfortunately, it’s not fully functional: in code above, we used function twentyfifteen_post_vimeo_video() but this function isn’t defined yet. Time to edit functions.php and add all the missing code.

By default, the plugin will embed videos automatically above or below the post content, depending on the settings. Since the child theme will handle all embedding, there’s no need for this functionality. Fortunately, we can use filter vimeotheque\post_content_embed to prevent the plugin from doing any embeds:

// don't allow the plugin to embed, we'll do it instead
add_filter( 'vimeotheque\post_content_embed' , '__return_false' );

Next, we will need to add the missing function twentyfifteen_post_vimeo_video().

/**
 * Display Vimeo video.
 *
 * Wraps the post video in a div element on single views.
 *
 * @since Twenty Fifteen Child 1.0
 */
function twentyfifteen_post_vimeo_video() {
	if( post_password_required() ) {
		return;
	}

	if( is_singular() ) :
            global $post;
	?>

	<div class="post-thumbnail">
		<?php \Vimeotheque\Helper::embed_video( $post ); ?>
	</div><!-- .post-thumbnail -->

	<?php endif; // End is_singular()
}

Now, our custom post type templates are ready.

Create custom post type taxonomy archives

Besides the custom post type, the plugin also implements 2 taxonomies: vimeo-videos that act as video categories and vimeo-tag that act as video tags. These 2 templates can be easily created by copying parent theme file archive.php and renaming it taxonomy-vimeo-videos.php and taxonomy-vimeo-tag.php.

After creating the 2 taxonomy archive templates into our child theme we will also need to edit them and make them use template content-vimeo-video.php to display posts.

In both files, this content template is loaded by using function get_template_part(). Edit the two files and change the function arguments from get_template_part( 'content', get_post_format() ); to get_template_part( 'content', 'vimeo-video' );.

The final folder structure of our child theme folder structure should look like this:

• twentyfifteen-child/
  • archive-vimeo-video.php
  • content-vimeo-video.php
  • functions.php
  • single-vimeo-video.php
  • style.css
  • taxonomy-vimeo-tag.php
  • taxonomy-vimeo-videos.php

Download

Download complete source files of Twenty Fifteen child theme.