How to make a podcast archive and video archive page for your blog

by Heather Cowper on August 11, 2011

If you’ve ever wanted to make a video or podcast archive page for your blog, this post will tell you how.

I’ve been beavering away at my travel blog at Heather on her travels, producing both videos and podcasts from most of my recent trips. My aim is to make my travel blog a rich and multi-media experience so that there’s something easy to consume wherever you are and whatever you enjoy.

As the numbers of videos and podcasts have built up I wanted to find a ways of making them easier to access. Of course, you can find all my videos on my Heatheronhertravels YouTube Channel and other video sharing sites like Tripfilms and NatGeo Adventure and my Podcasts are available through iTunes, but I also wanted an easy way to enjoy my videos and podcasts without having to leave the blog.

Podcast Archive page at Heatheronhertravels.com

This is why I wanted to add podcast archive and video archive pages where you could see all the videos and podcasts in one place easily and I hope you’ll agree that it’s a more accessible format. I have to admit that my Virtual Assistant, Mark did most of the work, and here are his instructions to helps you also set something similar up if you so desire. It’s a little technical, but if you get stuck maybe you can find someone with a bit of coding or web development experience to help you;

Video archive page at Heatheronhertravels.com

How to make a Podcast Archive for your Blog

First take a look at my Podcast Archive page here

  • I created a page template for the theme for Audio archive.
  • First using FTP client I access the directory of the theme we used, in our case

 /public_html/wp-content/themes/lifestyle_10

  • Then I identify the file from the theme which is the default page template.
  • Usually its first contents does have Template name and the name of the template.

/* Template Name: default */

blog page

Template blog page

 

 

 

 

 

 

 

  • When I successfully Identify one, I downloaded a copy of the file.
  • I rename the downloaded file to page_audio.php
  • I open the downloaded file using notepad++ or any text-editor
  • Rename the template name to audio

/* Template Name:  Audio */

  • Look for the  <div>  tag that handles the content of the page.
Post Area ID  div tag

div tag with a post area id

In our case the

<div id=”postarea”>

                ...

</div>

 

 

  • Now delete the code inside the div content and replace it with

 

<h1>Podcast Archive</h1>
<br />

<?php include(TEMPLATEPATH.”/breadcrumb.php”);?>

<?php $page = (get_query_var(‘paged’)) ? get_query_var(‘paged’) : 1;

query_posts(“cat=493&showposts=15&paged=$page”); /** THIS WILL QUERY ALL THE PODCASTS, CAT WOULD BE THE CATEGORY ID **/

while ( have_posts() ) : the_post() ?>

<?php if( get_post_meta($post->ID, “thumbnail”, true) ): ?>

<a href=”<?php echo get_post_meta($post->ID, “podcasts”, true); ?>”> <!– THIS WOULD GET THE mp3 FILE FROM THE CUSTOM FIELDS (podcast) –> <img style=”float:left;margin:0px 10px 0px 0px;” src=”<?php echo get_post_meta($post->ID, “thumbnail”, true); ?>” alt=”<?php the_title(); ?>” /></a>

<?php endif; ?>

<b><a href=”<?php the_permalink(); ?>”>

<?php the_title(); ?></a>

</b><?php the_content_limit(250, “”); ?> <!– DISPLAY AN EXCERPT 250 CHAR –>

<!– GOOGLE READER MP3 PLAYER WAS EMBEDED TO THE PAGE AND GET THE PODCAST FILE FROM THE CUSTOM FIELD –>

<embed type=”application/x-shockwave-flash” flashvars=”audioUrl=<?php echo get_post_meta($post->ID, ‘podcasts’, true); ?>” src=”http://www.google.com/reader/ui/3523697345-audio-player.swf” width=”400″ height=”27″ quality=”best”></embed>

<div style=”padding: 5px 0 0 0px;”>

<a href=”<?php echo get_post_meta($post->ID, “podcasts”, true); ?>” target=”_blank”>Download this podcast</a> <!– DOWNLOAD LINK –>

</div>

<div style=”border-bottom:1px dotted #2255AA; margin-bottom:10px; padding:0px 0px 10px 0px; clear:both;”></div>

<?php endwhile; ?>

<p><?php posts_nav_link(); ?> </p>

</div>

  • Using FTP client software like filezilla upload the file to the directory of the theme, in our case again:

/public_html/wp-content/themes/lifestyle_10

  • Go to wordpress admin panel and add a new page
  • Put a title on the page and leave the contents blank
  • On the right side panel there is an page atttibute option, select template Audio
  • Save/Publish the post and take a preview for the new podcast archive

Problems encountered:

  • I tried to use the audio player plugin shortcode but it failed to generate the audio player.
  • The Google Media player is not customable

You can find my Podcast Archive page here

How to make a Video Archive for your blog

First take a look at my Video Archive page

I installed the TubePress plugin from TubePress.org

  •  Download the plugin from the TubePress.
  • Install the plugin to your site
  • Add a new page by going to Pages>Add New
  • Specify the title of the page, Video Archive
  • Add the code [tubepress] on the content and Save/Publish
  • Once saved go to Settings on the left sidebar and select Tubepress.
  • On the WHICH VIDEO TAB , select the option YouTube user and type in the youtube user we want to get our videos, in our case Heatheronhertravels.
Heatheronhertravels Tubepress options

Heatheronhertravels Tubepress options

  • We could also try to  modify the appearance of the Video player by exploring the Appearance tab.

For our settings :

  • I have chosen the default settings, tick the AJAX pagination and play video statically. We prefer the static type of video playing so that it would not cause  additional scripts to the page. I change the number of videos per page to 12 and adjust the thumbnail width and height.
  • On the Embeded Player we can modify the player max width and height, we specify 500 width 408 height
  • Next is to choose the MetaDisplay Tab and tick all the meta that you want to appear on each thumbnail
  • Save and try to view your video archive page.

You can find my Video Archive page here

I hope you’ll find that useful if you’d like to create similar video and podcast archive pages on your blog. If you encounter any problems, or have any other suggestions, please do leave a comment and let me know.

This article is published at My Blogging Journey, where you’ll find information on how to build a better travel blog.

You’ll also find lots of great travel stories, videos and podcasts at my travel blog at Heather on her travels .

Subscribe to My Blogging Journey Don’t miss out – subscribe to My Blogging Journey

Related Posts Plugin for WordPress, Blogger...
Save on hotels with HotelsCombined.com

{ 2 comments… read them below or add one }

Tim M. September 13, 2011 at 11:55 pm

Thanks for the tut! Having one issue tho that I can’t seem to figure out. Everything in the code seems fine, but the line:

query_posts(“cat=493&showposts=15&paged=$page”);

is giving an error when I load the page that says “Parse error: syntax error, unexpected ‘=’ in /home/lighth17/public_html/wp-content/themes/lfccwp/sermon_page.php on line 23”

Any ideas? In my file I changed the cat= to cat=Sermons to follow the category structure of the blog, and the rest is the same as what you posted. Is this incorrect?

Again, I appreciate you for this guide!

Reply

Tim M. September 14, 2011 at 12:35 am

I was able to fix my above error with this line:
query_posts(“cat=493&showposts=15&paged=$page”);

by using single quotes like this

query_posts( ‘cat=493&showposts=15&paged=$page’ );

Thanks again, after the fix it worked great! Might want to mention that you use the limit post plugin, I didn’t have that installed so it threw me off.
Tim M. recently posted…Sample Sermon AudioMy Profile

Reply

Leave a Comment

CommentLuv badge

Previous post:

Next post: