Customizing your WordPress Theme
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, then this page is for you.
NOTE: The code examples below are placed into a WordPress theme’s source code. Basic knowledge 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 »</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 »</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 »</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 »</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 } ?>