PowerPress and Your Theme

Apple Podcasts image not appearing

Setting Apple Podcasts to display modified/changed images can be a real headache. Blubrry PowerPress has developed a relatively simple and easy-to-use solution to the problem. To make Apple Podcasts recognize that a new image is present, the actual image file name is changed slightly. To achieve this, please use the upload new image: option. Every uploaded iTunes image takes on a new file name, thus forcing iTunes to re-cache your latest image.

Customizing the text labels used for the player and links

You can customize the labels such as ‘Podcast:’, ‘play in new window’ and ‘download’ by adding a few lines of code to your wp-config.php file. Please use the instructions found on the PowerPress wp-config Options Page.

Customizing the character separating player and download links

You may customize the character or html that is placed between the player and download links by adding the following define to your wp-config.php file.

define('POWERPRESS_LINK_SEPARATOR', 'YOUR_SEPARATOR_HERE');

I want to customize my play icon.

If you see the blubrry player icon for your audio/video (m4a/m4v), you can customize this by adding the following define to your wp-config.php.

define('POWERPRESS_PLAY_IMAGE', 'http://server.com/full/path/to/image.jpg');

Can I center the PowerPress media player?

You can center, left or right justify the Powerpress player in your blog posts by adding the following line to your blog’s style sheet, (style.css, typically found in your blog’s theme folder).

.powerpress_player { text-align: center; }

Simply replace ‘center’ with ‘left’ or ‘right’ to align the player to the left or right respectively.

Can I customize how the play and download links look in my blog post?

If you are familiar with HTML/CSS, you can customize the play and download links very easily by adding an entry to your blog’s style sheet (style.css, typically found in your blog’s theme folder). The following example sets the links to specific font size and centers the links in the middle of the page.

.powerpress_links {
 text-align: center;
 font-size: 85%;
}

How can I use my own icons to prefix the media download links?

If you are familiar with HTML/CSS, you can customize the play and download links very easily by adding an entry to your blog’s style sheet (style.css, typically found in your blog’s theme folder). The following example adds a PDF icon to the left of the play in the new window and download links.

.powerpress_links_pdf {
 background: url(images/pdf.png) no-repeat left top;
 padding-left: 20px;
 min-height: 16px;
}

There are a number of ways to customize the look and feel of your WordPress + PowerPress podcasting site. If you are writing your own theme and want to either style and/or position your podcast information, the following info will help.

NOTE: The code examples below are placed into a WordPress theme’s source code. Basic knowledge of how to develop/edit WordPress themes is required.

Complete Control of the PowerPress Player and Links

PowerPress includes the following template function for your theme development.

<?php the_powerpress_content(); ?>

The function above allows you to place the PowerPress player and links precisely where you want in your WordPress theme.

You can also get the powerpress content to manipulate how you see fit.

<?php $podcast_content = get_the_powerpress_content(); ?>

Example 1

This first example displays how you can position the player and links specifically where you want in your WordPress theme. The following example uses the “default” WordPress theme by editing the single.php theme file.

In the section between the title and entry….

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

<div class="entry">
<?php the_content('<p>Read the rest of this entry &raquo;</p>'); ?>

Add the following…

  <?php the_powerpress_content(); ?>

The final product should look something like…

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

 <?php the_powerpress_content(); ?>

<div class=”entry”>
<?php the_content(‘<p>Read the rest of this entry &raquo;</p>’); ?>

Add the following CSS styling to the style.css to make the background of the podcast player and links.

.post p.powerpress_links {
 border-bottom: 1px solid #000000;
 font-size: 12px;
 padding-bottom: 3px;
}

The following will position the player at the very top of your blog post, just below the post title. The CSS adds a line below the play in new window and download links.

Example 2

The following example adds HTML around the PowerPress player and links allowing you to customize further how the information is displayed. This example also uses the “default” WordPress theme, editing the single.php theme file.

In the section between the title and entry….

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

<div>
<?php the_content('<p>Read the rest of this entry &raquo;</p>'); ?>

Add the following…

<?php if( $episode_content = get_the_powerpress_content() ) { ?>
 <fieldset class="episode-box">
 <legend>Podcast Episode</legend>
 <?php echo $episode_content; ?>
 </fieldset>
<?php } ?>

The final product should look something like…

<h2><?php the_title(); ?></h2>
<?php if( $episode_content = get_the_powerpress_content() ) { ?>
 <fieldset class="episode-box">
 <legend>Podcast Episode</legend>
 <?php echo $episode_content; ?>
 </fieldset>
<?php } ?>

<div>

<?php the_content(‘<p>Read the rest of this entry &raquo;</p>’); ?>

Add the following CSS styling to the style.css to make a fancy background and lining around the podcast player and links.

.episode-box {
 background-color: #ECECEC;
 border: 2px solid #4281B7;
 padding: 6px 6px 2px 6px;
 margin: 5px 0;
 position: relative;

 -moz-border-radius: 5px;
 -khtml-border-radius: 5px;
 -webkit-border-radius:5px;
 border-radius: 5px;
 -moz-box-sizing: content-box;
 -webkit-box-sizing: content-box;
 -khtml-box-sizing: content-box;
 box-sizing: content-box;
}
.episode-box p {
 margin: 0;
 padding: 0;
 font-size: 90%;
}

Which will display your podcast episode information like the following screen shot.

Adding function_exists() check

When ever you call functions built into other plugins, it is important to wrap the function call around a function_exists() check. To do this, simply wrap your new code with the folliwing:

<?php if( function_exists('the_powerpress_content') { ?>
NEW CODE HERE
<?php } ?>

Example

<?php if( function_exists('the_powerpress_content') { ?>
<?php the_powerpress_content(); ?>
<?php } ?>

Other Useful PowerPress Functions

The following functions are  useful if you wish to use the meta data or specific player features in your theme or plugin separately:

Get Episode Meta Data
$EpisodeData = powerpress_get_enclosure_data($post_id, $feed_slug='podcast');

This function returns an associative array of the meta data stored for the podcast episode. The first parameter $post_id is required. The second parameter lets you specify a specific custom podcast channel feed slug or custom podcast post type feed slug. The default is ‘podcast’. Print the array to see the meta data available by using the PHP function print_r().

Example getting the media URL and iTunes subtitle if set.

if( function_exists('powerpress_get_enclosure_data') ) {
   $EpisodeData = powerpress_get_enclosure_data( get_the_ID() );
   if( !empty($EpisodeData['url']) ) {
      echo "Media URL: " .htmlspecialchars($EpisodeData['url']) ."<br />";
   }
   if( !empty($EpisodeData['subtitle']) ) {
      echo "iTunes Subtitle: ". htmlspecialchars($EpisodeData['subtitle'])."<br />";
   }
}

Player Episode Links

The play in new window, download and embed links are generated from Episode meta data.

powerpressplayer_link_pinw($content, $media_url, $episode_data = array() ) // Play in new window
powerpressplayer_link_download($content, $media_url, $episode_data = array() ) // download
powerpressplayer_link_embed($content, $media_url, $episode_data = array() ) // embed

These are functions that generate their respective links. They append themselves to the value passed in $content. If $content is not empty, ti will use the value in the define POWERPRESS_LINK_SEPARATOR before appending its own value to $content. The returned value is the appended link to $content.

The 3rd parameter $episode_data is required for the Play in New Window and Embed functions. post/page specific data is used instead of the media URL to prevent outside web sites from hot-linking (using their own media URLs) in the new window and embed players.

Example usage:

<?php
$EpisodeData = powerpress_get_enclosure_data(get_the_ID(), 'podcast');
$MediaURL = powerpress_add_flag_to_redirect_url($EpisodeData['url'], 'p'); // This adds the play in page flag for Blubrry Statistics (optional)
$new_window_html = powerpressplayer_link_pinw('', $MediaURL, $EpisodeData);
echo $new_window_html;
?>