Featured Videos On Archive Pages In Genesis

The code in this download folder enables you to replace the featured image with a video on archive pages like this :

Replace Archive Thumbnail With Video in Genesis

The code ( as seen in the demo video ) enables you to :

  • Use externally hosted ( Youtube & Vimeo ) or self hosted WordPress videos.
  • Add your video file to a custom field named video on the single Edit Post screen.
  • Use the Genesis > Theme Settings > Content Archives settings to align your video.
  • Display the featured image if the video link is not added.

Demo Video

Shows the featured image replaced on archive pages with a video added via a custom field named video on the Single Edit post screen.

Tested using the Genesis Sample child theme by StudioPress however will work in any Genesis child theme with minimal if any modification.

Installation Steps

There’s 3 steps :

  1. # Copy & paste the PHP code from the functions.php file to the end of your child themes functions file.
  2.  

    Step 1

  3. # Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.
  4.  

    Step 2

  5. # Create a custom field named video and add your video URL like you see in the following screenshot.
  6.  

    Step 3

Set Video Thumbnail Size

You can set the width and height for your video on line 30 – 31 of the code in the functions file.

Video width and height

Download Folder

Self Hosted Videos

Works with externally hosted videos like YouTube & Vimeo as well as self hosted videos you upload to your WordPress Media Library.

Genesis Archive Video Thumbnails

You can use this CSS to hide the controls when using self hosted videos.

.archive-video .mejs-controls {
    display: none!important;;
}

Related Tutorials

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.