Can I override my Vimeography theme template with some custom code?

Vimeography provides the ability to override your theme template files with your own custom code. Since every customization is different, this is something that we are usually unable to help with, but the tools are in place to allow you or your WordPress site developer to make the changes that your site needs to behave according to your needs.

You can add code similar to this to your WordPress theme's functions.php file or use a plugin called Code Snippets to add it to your page:

<?php

  function my_custom_harvestone_thumbnail() {
    ob_start();
  ?>
    <script type="text/x-template" id="vimeography-harvestone-thumbnail">
      <figure class="swiper-slide vimeography-thumbnail">
        <router-link class="vimeography-link" :to="this.query" exact exact-active-class="vimeography-link-active">
          <img class="vimeography-thumbnail-img" :src="thumbnailUrl" :title="video.name" />
        </router-link>
      </figure>
    </script>
  <?php
    echo ob_get_clean();
  }

  add_action('admin_head', 'my_custom_harvestone_thumbnail');
  add_action('wp_head', 'my_custom_harvestone_thumbnail');

Vimeography will load your template for the defined module instead of the default one for your theme.

Modifying the search component

The code to change the search component would look something like this.

<?php

  function my_custom_vimeography_search_component() {
    ob_start();
  ?>
    <script type="text/x-template" id="vimeography-component-search">
      <label :class="$style.container">
        <span :class="$style.text">Search:</span>
        <input :class="$style.input" name="search" type="text" placeholder="Search videos..." v-on:input="debounceInput" />
        <div :class="$style.icon">
          <svg v-show="!this.searching" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line>
          </svg>
          <spinner size="small" v-show="this.searching"></spinner>
        </div>
      </label>
    </script>
  <?php
    echo ob_get_clean();
  }

  add_action('admin_head', 'my_custom_vimeography_search_component');
  add_action('wp_head', 'my_custom_vimeography_search_component');

Example: change the lightbox style in the Shadow theme

<?php

  function my_custom_vimeography_shadow_modal() {
    ob_start();
  ?>
    <script type="text/x-template" id="vimeography-shadow-tmpl-gallery">
    <div>
      <lightbox layout="modern-touch"></lightbox>
      <filters v-if="this.pro"></filters>
      <thumbnail-container :videos="videos"></thumbnail-container>
      <paging-controls></paging-controls>
    </div>
    </script>
  <?php
    echo ob_get_clean();
  }

  add_action('admin_head', 'my_custom_vimeography_shadow_modal');
  add_action('wp_head', 'my_custom_vimeography_shadow_modal');

Additional Resources

One of our customers, CK MacLeod, shared a series of blog posts on how he was able to customize Vimeography for his specific project. Check them out if you need some inspiration or guidance on how to customize your thumbnails, player, or theme!

https://ckmswp.com/customizing-vimeography-pro-1-thumbnail-content/

https://ckmswp.com/customizing-vimeography-pro-2-player-container/

https://ckmswp.com/customizing-vimeography-pro-3-custom-gallery/