• Skip to primary navigation
  • Skip to main content

alansari.io

by OMAR AL-ANSARI

  • Home
  • About
  • Portfolio
  • Blog
  • Code
  • Contact

Aggregate Posts with YouTube Videos in Custom Page Template

May 21, 2016 by Omar Al-Ansari 2 Comments

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.

Aggregates Posts With YouTube Videos In Custom Page Template

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

techquest_video_page.php
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.

style.css
CSS
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.

  1. Create the page
  2. Create the posts

page-attributes

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.

custom fields
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.

Sources:
  • Carrie Dils
  • Bill Erickson

Filed Under: Code Snippets, Intermediate Tagged With: Genesis, Snippets, tutorial

Reader Interactions

Comments

  1. thomas chang says

    December 21, 2016 at 5:07 PM

    Thank you so much for sharing !!!

    Reply
    • Omar Al-Ansari says

      December 21, 2016 at 5:26 PM

      Hi Thomas,
      Glad you found it to be useful.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Twitter
  • Facebook
  • YouTube
  • GitHub

Copyrights © 2016–2021 · alansari.io · Proudly powered by WordPress and Genesis Framework