Featured Podcast Widget for WordPress

WordPress Featured Podcast Plugin WidgetThe Featured Podcast Widget is a WordPress plugin that enables you to display your latest podcast from a given post category (or a specific episode) in any widgetized area of your WordPress site.

The widget displays the title of your podcast episode, the post’s “featured” image and excerpt, together with a link through to the podcast’s post. Underneath the excerpt is an embedded audio player enabling you to play the podcast episode directly from within the widget.

This widget was born from my frustration of wanting a summary of my latest podcast episode with an embedded audio player on the homepage of my blog. As no immediately obvious solution presented itself I decided to write a simple WordPress plugin myself to perform this task.

Features

  • Display featured podcast by latest episode from a post category
  • Display featured podcast by post ID
  • Show a summary of the podcast episode from the WordPress excerpt field
  • Featured image of podcast’s post automatically displayed
  • Audio player automatically embedded
  • Easily styled via your theme’s CSS stylesheet

Choice of Audio Player

In writing this plugin the key issue that I encountered was the embedding of a suitable audio player. This involved either including a player within my own code, or cross linking to an audio player from another plugin.

Rather than opting for the first option and potentially contributing to software bloat and code duplication, I chose the second option.

As a significant proportion of podcasters use the Blubrry PowerPress plugin to power their their website’s podcasting system I decided to use the audio player options from within that plugin. The additional benefit of which is that the Blubrry plugin comes with a good variety of different audio players.

The Featured Podcast Widget makes use of the default audio player set in the PowerPress plugin and links to the podcast’s MP3 file set in the post via the PowerPress extension. As such, to use the featured podcast widget you MUST also have the PowerPress plugin installed and be using it to handle your podcasts within WordPress.

Download the Plugin

Latest version: Download Featured Podcast Widget v1.0.2
Last Updated: 12 January 2014

IMPORTANT NOTE: This widget will only function correctly if you have the Blubrry PowerPress plugin installed and are using that plugin to handle your podcasts! Download the latest version of the Blubrry PowerPress plugin.

Installation Instructions

Installation of this plugin is fairly straightforward:

  1. Download the plugin using the link above or search for “featured podcast widget” in your WordPress admin panel from Plugins -> Add New and click the Install Now link.
  2. If you downloaded the plugin, unzip the downloaded zip file and copy the folder ‘featured-podcast-widget’ from the unzipped folder into the plugins directory of your WordPress blog (usually found at /wp-content/plugins/).
  3. Activate the plugin through the ‘Plugins‘ menu in WordPress.
  4. In your WordPress Appearance ->Widgets screen, drag the “Featured Podcast Widget” to a widget area of your choice.
  5. Configure the Featured Podcast Widget from the widget panel to suit your needs as required.

Configure and Style

Configuring the Widget

Configuring the widget is done from the WordPress Appearance -> Widgets page.

Title

The first option that the widget gives you is to name the widget itself with the Title field. In the example below I’ve imaginatively named my widget “Latest Podcast”.

Podcast Category

Featured podcast screenshot-

The drop down box under the heading Podcast Category is populated with all of your blog’s post categories. Use this drop down list to choose the post category where you publish your podcasts and the widget will display the latest post containing a podcast attachment from that category.

Show Featured Image

This tick box, if ticked, will show the featured image from your podcast’s post. If this box is un-ticked no image will be displayed.

Show Summary

This tick box, if ticked, will show a summary of your podcast in the widget taken from the post’s excerpt field. If this box is un-ticked no summary will be displayed.

Select podcast episode

This option decides which podcast episode will be displayed in the widget. If Latest Podcast is selected the most recent podcast from your chosen category will be displayed. If Featured Podcast is selected a predetermined podcast episode will be displayed, taken from the post ID in the following box.

Featured Post’s ID

If Featured Podcast is selected from the Select podcast episode then this field determines which podcast episode will be displayed.

CSS Styling

This widget can be styled using standard CSS elements from your theme’s CSS stylesheet (usually style.css) found in your theme’s directory e.g /wp-content/themes/my-theme/style.css.

The main widget should be wrapped (depending on your theme’s implementation) in a div tag container with an addressable class of featuredpodcast for the global styling control of the widget:

… class="widget featuredpodcast" …

After the widget title (set by your theme) the widget will display the featured image set in your podcast’s post:

<img … />

Next the widget displays the featured podcast’s title taken from the podcast’s post title. This heading (an h3 tag) is hyperlinked with the link taking you to the podcast’s post:

<h3><a href="LINK TO POST" title="POST TITLE">POST TITLE</a></h3>

If you have selected the widget option to “Show Summary” this will be displayed next, taken from the podcast post’s excerpt field. This summary will be wrapped in the paragraph (p) tags:

<p>...</p>

Next a link to the podcast’s post is displayed wrapped in a span tag with the class fp-more.

<span class="fp-more"><a href="LINK TO POST">[Read More...]</a></span>

Finally, an audio player from the PowerPress plugin is embedded in a span tag with the class fp-player:

<span class="fp-player"></span>

I use this widget myself on the homepage of this blog and the following image gives you an idea of how you could style the widget yourself using your CSS stylesheet.

Featured Podcast Widget example of CSS styling

Featured Podcast Shortcode

To display the Featured Podcast widget within the body of a blog post, enter the following short code where you would like the widget to be placed.

[featuredpodcast]

Note: This short code must be entered in lowercase.

Shortcode Attributes

The Featured Podcast short code also supports optional attributes for customizing the widget and overriding the default settings.

  • posts_cat – Specify the podcast category ID to display the latest episode if featuretype is set to ‘latest’ e.g. featuretype=’latest’ posts_cat=7
  • postid – Specify the post ID to be displayed if featuretype is set to ‘featured’ e.g. featuretype=’featured’ postid=321
  • showsummary – Enable display of post’s summary e.g. showsummary=1
  • showfeatured – Enable display of featured image e.g. showfeatured=1
  • featuretype – Decide whether latest episode from a category is displayed or a featured post (see posts_cat and postid above)

FAQs

Q: Why does the widget show a red cross next to PowerPress?
A: This plugin utilises the Blubrry PowerPress plugin in order to display the audio player for the latest podcast. You need to install and activate the Blubrry PowerPress plugin first. With this plugin installed and activated you should see a green tick in the widget showing that it is ready to use the Blubrry PowerPress plugin’s default audio player.

Q: The audio player is longer then my side bar, how do I get it to fit?
A: In your WordPress administration section, go to the Blubrry PowerPress plugin audio player configuration page and set the audio player’s maximum width under the Basic Settings tab:

PowerPress -> Audio Player: Basic Settings -> Width (in pixels)

Don’t forget to click the Save Changes button after you’ve changed the audio player’s width.

Change Log

1.0.2

12 January 2014

  • Added a checkbox option to show / not show the podcast post’s featured image.
  • Added [featuredpodcast] shortcode capability to instigate the widget with passable parameters.

1.0.1

10 May 2013

  • Added a checkbox option to show / not show the podcast post’s summary taken from the WordPress excerpt field for the podcast episode.

1.0.0

18 April 2013

  • Initial release version.