I have been playing around with few YouTube related plugins to get the best plugin available to showcase all the demo and tutorial videos created for TechQuest.Co different articles. I could not find one that fit my needs. So I started looking at some other way to show my videos on the site. I ended up reading an article written by Carrie Dils that uses custom page template which does just that. I then noticed that I needed to handle pagination as it was not handled correctly. I came across another article written by Bill Erickson which handles pagination.
I then played around with both of their codes to combine them and get the final results I was looking for. Follow the below steps to create your page. Please note that this only applies to Genesis Framework themes.
Create a Custom Page Template
Create a new file under your child theme main folder and add the following code in it. You need to ensure that you do not call it something that starts with ‘page’ as WordPress will interpret this as part of its template hierarchy. To be safe use a prefix such as techquest_, so I went ahead and called it techquest_video_page.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<?php /** * Template Name: Video Template * Description: Used as a page template to show page contents, followed by a loop * through the 'Video' tag */ // Remove the standard pagination, so we don't get two sets remove_action( 'genesis_after_endwhile', 'genesis_posts_nav' ); //Add our Custom paginated loop function techquest_youtube_loop() { $args = array( 'tag' => 'video', // replace with your tag slug 'orderby' => 'post_date', 'order' => 'DESC', 'posts_per_page' => 10, // overrides posts per page in theme settings 'paged' => get_query_var( 'paged' ), ); global $wp_query; $wp_query = new WP_Query( $args ); if( $wp_query->have_posts() ): while( $wp_query->have_posts() ): $wp_query->the_post(); global $post; $video_id = esc_attr( genesis_get_custom_field( 'youtube_id' ) ); // adds custom field 'youtube_id' in WordPress to get the video thumbnail and link $video_thumbnail = '<img src="http://img.youtube.com/vi/' . $video_id . '/0.jpg" alt="" />'; $video_link = 'http://www.youtube.com/watch?v=' . $video_id; echo '<div class="video">'; echo '<div class="one-third first">'; echo '<span class="video_date">' . get_the_date() . '</span>'; echo '<a href="' . get_permalink() . '">' . $video_thumbnail . '</a>'; echo '</div>'; echo '<div class="two-thirds">'; echo '<a href="' . get_permalink() . '"><div class="video_title">' . get_the_title() . '</div></a>'; echo '<span>' . wp_trim_words( get_the_content(), 20 ) . '</span>'; echo '<p><span class="video_links"><a href="' . $video_link . '" target="_blank">Watch It on YouTube</a></span> | <span class="video_links"><a href="' . get_permalink() . '">Continue Reading →</a></span></p>'; echo '</div>'; echo '</div>'; endwhile; genesis_posts_nav(); endif; wp_reset_query(); } add_action( 'genesis_after_entry', 'techquest_youtube_loop' ); genesis(); |
There are few things you need to keep in mind when using the above code. The code uses WordPress “Tags” to aggregate the posts and displays them. You can replace the tag slug in line 26 to the tag slug which you will be using.
It also utilizes WordPress “Custom Fields” to generate the thumbnails and link to the respective YouTube page of that particular video. You will need to create a new custom field ‘youtube_id’ and use the respective YouTube IDs in that field.
Add the following code into your style.css file to customize your custom page template.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
/* Video Page Template ------------------------------------------------------------ */ .video { float: left; width: 50%; padding: 10px; } .video .video_date { color: #a9acb3; font-size: 12px; font-size: 1.2rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; } .video .video_title { font-size: 24px; font-size: 2.4rem; text-transform: capitalize; word-wrap: break-word; line-height: normal; padding-top: 30px; } .video a { border: none; } .video .video_links { font-size: 12px; font-size: 1.2rem; text-transform: uppercase; } .video .video_links a { color: #0066cc; font-weight: 400; border-bottom: 1px dotted #0066cc; } .video .video_links a:hover { color: #232525; border-bottom: 1px dotted #232525; } @media only screen and (max-width: 800px) { .video { float: none; width: 100%; } } |
The hard work is done.
Now there are two easy steps to get your page working.
- Create the page
- Create the posts
Create The Page
Create a new page as you would normally do. Change the template shown in the page attributes to “Video Template.” Lastly, publish the page.
Create The Posts
Now all you have to do is create your posts, tag them with the tag you have chosen, and link the YouTube ID to it using custom fields.
Once you create your post, you will need to create the custom field. If you do not see the custom fields option, then please look at the top right corner where you can see “screen options” and activate the custom fields option. Once activated enter a new custom field and your YouTube video ID in its value.
VOILA! Once you publish few articles with your awesome videos, you should get the results you are looking for.
If you liked this article then comment, share and subscribe to our newsletter.
Thank you so much for sharing !!!
Hi Thomas,
Glad you found it to be useful.