How To Easily Embed SermonAudio Sermons In WordPress is a powerful media browser with tons of great content. It allows ministries to easily put their sermons online for the world to listen. SermonAudio handles everything from audio to video streaming across a huge range of platforms.

Adding sermons to WordPress is a fairly simple task given WordPress’ oEmbed API. Churches, bloggers, and ministries could easily take advantage of it and should. Sermons can be embedded as citations, as recommendations, or even just to keep the content in circulation.

For the sake of this how-to I’ll be showing you the easiest way to embed SermonAudio sermons. I won’t go into the advanced process of creating widgets and shortcodes. I’ll only show you how to make links embed audio sermons automatically.

WordPress’ oEmbed API

WordPress has had the oEmbed API since version 2.9. It has consistently been updated, and has added support for new default providers over time. Unfortunately SermonAudio is not on their list of default providers, but there’s hope! The API itself is extendable so you are free to add your own providers if they’re not natively supported.

Using The API

oEmbed is a simple way to allow URLs to display embeddable content automatically. If you were to paste a link to a YouTube video in your post, WordPress would automatically get everything needed to display the video on your site.

Greg Bahnsen's Final Sermon

YouTube is only one example of a default provider, for a full list you can visit the WordPress codex.

Extend The API to Embed SermonAudio Sermons

Now lets try to achieve the same effect for SermonAudio content. In order for us to embed SermonAudio sermons we’re going to need to register SermonAudio as a provider, and then provide WordPress with link to SermonAudio’s sermon page.

We can register the provider by hooking into the init action in WordPress and adding the provider below.

add_action( 'init', function(){

Now that we have the provider registered we need to provide it with a url. This should be the url that we would like to be embeddable. On a side note, we will be working with some regex to parse the url. As an example we’ll use this sermon’s url.

You may have already noticed the query variable “SID” in the URL. The value it holds is the ID of the sermon, and is what we need to parse so that we can render our sermon.

$regex_url = '#http://(www\.)?sermonaudio\.com/sermoninfo.asp\?SID=([\d]+)#';

The first match in the regex is (www\.) which means that the www is optional. The second match in the regex is ([\d]+), this match requires that the value for SID is only an integer. Note, this will not work with a string.

Now let’s register SermonAudio as a valid provider, supply it with our regex string, and lastly give it a callback function to execute when regex finds a match.

add_action( 'init', function(){
	$regex_url = '#http://(www\.)?sermonaudio\.com/sermoninfo.asp\?SID=([\d]+)#';


Write The Callback Function

Now we need to add the proper callback wp_register_sermonaudio_embed to create the html needed for the embed.

function wp_register_sermonaudio_embed( $matches, $attr, $url, $rawattr ) {

Let’s try to understand what we’re working with. Our callback by default has 4 variables passed into it. The first variable is an array of regex matches, and for the sake of this tutorial we’ll only deal with that variable. Now let’s use the matches.

$embed = sprintf(
	'<iframe style="min-width:250px;" width="100%%" height="150" frameborder="0" src="$s"></iframe>',
	esc_attr( $matches[2] )

We use a sprintf function to pass the data into our iframe. The iframe makes a call to SermonAudio’s web player with the provided sermon ID which is stored in the second key of the $matches array.

Lastly we’ll return the $embed variable as a filter.

function wp_register_sermonaudio_embed( $matches, $attr, $url, $rawattr )
	$embed = sprintf(
		'<iframe style="min-width:250px;" width="100%%" height="150" frameborder="0" src="$s"></iframe>',
		esc_attr( $matches[2] )

	return apply_filters( 'wp_embed_sermonaudio', $embed, $matches, $attr, $url, $rawattr );

And that’s it! Now you can easily embed SermonAudio sermons by pasting SermonAudio links into your post, which would result in the following.

after embed SermonAudio sermons

The Plugin

In case you were looking for a plugin to do this job, I went ahead and packaged all of this plus a little bit more into a plugin which will be on the WordPress Plugin Repo soon. You can grab it now on Github. The plugin allows for multiple urls to be embeddable and currently only supports audio embeds. You can download them below.

Download on Github


SermonAudio is a really great platform that you can utilize for your ministry. In fact, I’ve built a few tools that integrate with their services already. If you’re already using them to power your online ministry I would highly recommend working with their APIs to customize your user’s experience.

Getting Started With WordPress Filters

WordPress filters are one of the major contributors to WordPress’ over all success. They allow developers to extend WordPress tremendously in themes and plugins, which is the main reason why so many developers like myself have adopted the platform.

So what are WordPress filters and how can I use them in my next theme? In short, WordPress filters are a way for you to modify a specific piece of information. Now this might not make sense right away but once you see the code it should begin to.

Understanding WordPress’ Plugin API

WordPress Plugin APIIn order to create a new filter we have to first understand what WordPress filters are and when to use them.

WordPress filters are one of the two types of hooks in the WordPress Plugin API that we can utilize to extend WordPress. The other being actions which are outside of the scope of this article but will be discussed in a future article.

So what are hooks? Hooks are events/functions that fire at specific times when the page you’re viewing is being rendered. WordPress is jam packed with hooks that fire throughout every single page load, and it’s these hooks that we want to target or mimic.

Practical Uses For WordPress Filters To Extend Your Plugin/Theme

Filters are different from actions in the what they do and how they’re supposed to be used. An example of a standard WordPress filter would be the body_class filter which allows you to add classes to the <body> of the website.

add_filter( 'body_class', 'my_filter_manipulator' );
function my_filter_manipulator( $classes ){
	$classes .= ' my_really_cool_class ';
	return $classes;

So what just happened? Well first we hooked into the body_class filter and provided a callback function to be executed.

add_filter( 'body_class', 'my_filter_manipulator' );

The callback function my_filter_manipulator() is where we manipulate the body_class filter. Now it’s important to understand that every WordPress filter requires an argument to be passed into our function. This is exactly what we did when we added the $classes variable to our my_filter_manipulator() function. The variable $classes is not defined anywhere because it is supplied to us via the body_class hook, and $classes is the data we will be manipulating through our function.

function my_filter_manipulator( $classes ) {

By default the body_class filter contains many previously hooked classes provided by WordPress so we don’t want to override them all. Instead we want to add our classes to it by concatenating our classes to the $classes string.

On a side note, not all of the arguments we filter will be strings. In many cases they will come in as integers, or arrays, but for the sake of this specific filter, it’s a string.

function my_filter_manipulator( $classes ){
	$classes .= ' my_body_class_1 my_body_class_2 ';
	return $classes;

In the example above we added 2 classes to the <body> of our site, but what if we only want to add it on a specific page or post type? Well this is where WordPress filters can be really handy.

function my_filter_manipulator( $classes ){
	if( is_page('about') || is_post_type( 'lessons' ) ) {
		$classes .= ' my_body_class_1 my_body_class_2'';
	return $classes;

In summary we added the classes to the about page and the lessons post type pages only, and we returned the argument back to the filter. It’s important to note that if we don’t return the data, nothing will happen.

Creating WordPress Filters

Now that we understand what WordPress filters are and how we can use them to extend WordPress’ default functionality, it’s time to learn how we can create our own filters.

For the sake of this article I’ll show you how to create a new filter that mimics the functionality of the body_class filter which can be used in multiple areas.

First off let’s imagine that we want to apply a set of classes to multiple html elements so that we can target those elements specifically depending on the page we’re on. The perfect example would be to have a different header and footer for the homepage, pages, posts, etc. What we need to do first is create a function that will contain all of our logic.

function theme_classes() {

Next we can begin adding classes based on the page we’re on, and then imploding them into a string to be output.

function theme_classes() {
	if( is_front_page() ) {
		$class_array[] = 'front-page';
	} elseif ( is_single() ) {
		$class_array[] = 'single';
	} elseif ( is_archive() ) {
		$class_array[] = 'archive';
	} else {
		$class_array[] = 'page';
	return sprintf( 'class="%1$s"', implode( ' ', $class_array ) );

Now is the fun part. Let’s create a new filter that will allow us to add more classes after the the default classes have been added. The filter we will create will be theme_classes.

function theme_classes() {
	if( is_front_page() ) {
		$class_array[] = 'front-page';
	} elseif ( is_single() ) {
		$class_array[] = 'single';
	} elseif ( is_archive() ) {
		$class_array[] = 'archive';
	} else {
		$class_array[] = 'page';

	 * theme_classes filter
	 * @var array $class_array
	$class_array = apply_filters( 'theme_classes', $class_array );

	return sprintf( 'class="%1$s"', implode( ' ', $class_array ) );

The theme_classes filter now allows us to hook into this function and add new array items to the $class_array variable like so.

add_action( 'theme_classes', 'add_new_classes' );
function add_new_classes( $class_array ){
	$class_array[] = 'some_new_class';
	return $class_array;

Page Specific WordPress Filters

Now getting back to the filter we created. It allows us to add classes to the overall $class_array, but what if we just wanted to modify one of the specific page classes that we had defined earlier? Well we could do that by adding more if statements to the add_new_classes() function, or we could add new filters to the default classes in our theme_classes() function to prevent having to add more if/else statements.

if( is_front_page() ) {

	$class_array[] = apply_filters( 'theme_frontpage_classes', 'front-page' );

} elseif ( is_single() ) {

	$class_array[] = apply_filters( 'theme_single_classes', 'single' );

} elseif ( is_archive() ) {

	$class_array[] = apply_filters( 'theme_archive_classes', 'archive' );

} else {

	$class_array[] = apply_filters( 'theme_page_classes', 'page' );


So now we’ve created 4 new filters; theme_frontpage_classes, theme_single_classes, theme_archive_classes, and theme_page_classes. By default all of these new filters provide a string, so whenever we hook into them we also need to provide a string.

Now instead of adding a class to all of the pages we can specify any of the default pages with our new filters. Let’s add a class to the frontpage!

add_filter( 'theme_frontpage_classes', function( $class ){
	$class = ' my_page_classes ';
	return $class;

Using The Filters In Our HTML Markup

Now that we’ve got our function setup all we have to do is echo it wherever we want these classes to display. In this case we’ll just add it to the header and footer.

<header id="main" <?php echo theme_classes(); ?> ></header>
<footer id="main" <?php echo theme_classes(); ?> ></footer>

And that’s it! Now all we have to do is hook into our filters and the classes we add will be added to both our header and footer.

Final Thoughts

Now that you know the basics of filters I hope you’ll use them more throughout your plugins and themes. Not everything needs to be filterable, but the things that you do choose to allow filters for will definitely help you and other developers extend your code. Lastly, If you enjoyed this tutorial I hope you’ll subscribe and share it. I’ll be posting more like this with time.

Create Dynamic CSS With PHP – Use CSS To Power Your WordPress Theme

In the previous part of this series I went over the basics of the PHP_CSS class that I created. I showed how it is a much more uniform and easy way to create your custom css with PHP than any other way.

In this part, I’ll be showing you how to use css to power your WordPress theme.

This will be an advanced tutorial, so if you’re just getting started with WordPress, PHP, or CSS then this might not be for you, but either way if you follow along you should be just fine.

Since we’re working with WordPress there are many ways we can go about creating our css and integrating it into our theme. In this part we’ll focus on the quickest way to get set up. Let’s begin!

Integrate The CSS Into Your Theme

We need to import the PHP_CSS class by including it into your theme’s folder structure, and then requiring the framework.

require_once( get_template_directory_uri() . '/includes/class-php-css.php' );

Now here comes the fun part. Once you’ve imported the class and set it up you can begin adding css via filters. Let’s start by creating two actions.

The first action will add the css to the header, and instantiate our PHP_CSS class to be used within our second hook. We’ll also add the css to the head of the document if our css is not empty.

add_action( 'wp_head', 'add_theme_header_styles' );
function add_theme_header_styles()
	// Instantiate the PHP_CSS object
	$css = new CarlosRios\PHP_CSS;

	 * theme_header_css hook
	 * Allows you to add css from different areas without having to
	 * instantiate a new instance of the PHP CSS Class every time
	 * @since  1.0
	 * @param  $css Instance of CarlosRios\PHP_CSS
	do_action( 'theme_header_css', $css );

	// Store the output as a string
	$output = $css->css_output();

	// Check if the output has data, and output it if it does
	if( !empty( $output ) && $output !== '' ) {
		echo '<style>' . $output . '</style>';

The second action will be where we actually add our css. This hook would be available for any plugin or theme requirement which would want to add css to our header. It comes with one argument, with is the instance of the PHP_CSS class stored in the $css variable.

add_action( 'theme_header_css', 'add_body_styles' );
function add_body_styles( $css )
	// Set the css for the body
	$css->set_selector( 'body' );
	$css->add_properties( array(
		'background'	=> '#222',
		'color'		=> '#FFF',
	) );

	return $css;

Now that we’ve got that setup our theme should contain the css that we added in the theme_header_css hook.

Create An Advanced CSS Process

While the method described in this tutorial will certainly get the job done, it’s not actually the best way to do so. Stay tuned for the next part in the series where I’ll show you how to create all of our css via a hook, add that css to a dedicated css file, and then enqueue that file automatically.

Create Dynamic CSS With PHP – The PHP CSS Class

Before we begin, I have to first be very clear that CSS for the most part should not be created exclusively with PHP. While you can certainly create all of your site’s CSS with PHP, it is neither efficient or wise to do.

CSS has developed into a vibrant language, especially with the recent rise of preprocessors such as SASS and LESS.

You should create most of your design in SASS or just raw CSS, and only leave PHP for the things that the user will be able to change on their own.

Understanding The PHP CSS Class

Lets begin the project by first downloading the PHP CSS Class which I built for this tutorial.

Download The CSS Class

The PHP CSS class is the best way to handle this because of the fact that once we’ve got information stored in the object it is then easy for us to manipulate that information over and over again. The class also provides us with methods that will allow us to do things uniformly and efficiently. Just remember that we’ll be writing CSS utilizing PHP, so it will look more like PHP. Let’s set it up.

require_once 'path_to_library/class-php-css.php';

use CarlosRios\PHP_CSS;

$css = new PHP_CSS;

Setting The HTML DOM Selector

The PHP CSS class allows us to easily set and change selectors so that at any given moment we’re working with one individual selector or set of selectors. We set the selector in the same way that we would in CSS like so.

$css->set_selector( '#content' ); // Sets #content as the selector to add properties to

$css->set_selector( '#content, #wrapper, body' ); // Sets multiple selectors

Changing The Selector

Once we’ve set the selector’s we can begin adding rules to them, but before we do that I’d like to point out that if you wish to change the selector once it’s been set you can use either the change_selector()  method or the set_selector()  method once again.

$css->change_selector( '#something-different' );

Adding CSS Properties To A Selector

Once we have a selector set we can begin adding properties to it. The properties are any valid css property paired with a value (which is where the PHP CSS class really shines). First let’s setup some variables and then re set the selector.

// Set some variables
$background_color_value = '#FFF';
$background_image_url = '';
$text_color_value = '#222';
$display_value = 'block';

// Set a selector
$css->set_selector( '#header' );

To add a single property we use the add_property()  method which requires two arguments. The first is the property-type and the second is the value.

// Add a single property
$css->add_property( 'background-color', $background_color_value );

To add multiple properties you can use the add_properties()  method which requires an array as its only argument.

// Add multiple properties at once
$css->add_properties( array(
	'color' => $text_color_value,
	'background-image' => $background_image_url,
	'display' => $display_value,
) );

Now that we’ve set multiple properties to the ‘#header’ selector, our css output would be as follows:


Handling Pseudo Class Properties

Adding properties to the pseudo classes or states of the selector comes builtin to the PHP CSS class. Once we add pseudo classes to the selector states the PHP CSS class will automatically store all of the rules created before and add new properties to the selector with the state added to it.

$css->set_selector( '#header' );
$css->add_selector_state( ':hover' );

Then we can continue adding properties.

$css->add_property( 'border-color', '#222' );

Which would output:

	border-color: #222;

Adding Multiple Pseudo Classes To A Selector

We can also add multiple pseudo classes to the selector by using the add_selector_states()  method which requires an array as its single argument. Using this method will create an output of the css selector for each state that you specify.

$css->set_selector( '#header' );
$css->add_selector_states( array( ':hover', ':active' ) );
$css->add_property( 'text-align', 'center' );

The output would then be as follows.

#header:hover, #header:active{
	text-align: center;

Removing Pseudo Classes

We could then revert the selector back to its original state without any pseudo classes by using the reset_selector_states()  method, and then continue adding to the original selector.


Outputting Our CSS

After we’ve created all of our css, we can use the PHP CSS class’ css_output() method to display all of the css that we’ve created. Please note that this class was not intended to generate a ton of css code, so as of now the PHP CSS class will only output minified css.

<style><?php echo $css->css_output(); ?></style> // Print the css onto the page

file_put_contents( 'style.css', $css->css_output() ); // Save the css to a separate file

Future Plans For Development

With all of that said, there isn’t much more that this class was created to do, but I will continue adding special rules to it as I need them. I would encourage you to fork the PHP CSS class on github, and send some pull requests my way so that I can continue adding to it. Otherwise stay tuned for the next tutorial where I’ll show you how you can integrate this class into your next WordPress theme or plugin.

Create Dynamic CSS With PHP – Introduction

In 2015 I began working on a project that was created for me to offer my clients a cheaper alternative to the custom development work that I do for them. The project consisted of creating a WordPress theme that was dynamic, up to date in terms of design, allowed almost complete customization, and was lightweight enough that SEO would not be affected by it.

I’ve worked with premium WordPress themes countless times, and I knew first hand that the way they achieve their large customization options isn’t always done with the best practices in mind for SEO, and certainly isn’t done with much consideration for the overall weight of the site.

As a WordPress developer and someone who my customers look to as an expert, I found it too risky to just purchase a theme and then resell that theme under the banner of my business.

Instead I spent a few months creating a lightweight multi-purpose theme that I’m successfully used on about 5 websites as of now (March 29, 2016).

That theme, while not publicly available is called ThemeOne, and is currently hosted in a private repo on my github account.

Create Dynamic CSS With PHP For Your WordPress Theme

Now to get back to the main point of this series of articles, the issue I ran into with ThemeOne was that every time I wanted to create some css that would change the layout, I would have to write css pretty much manually in PHP. On top of that, I was echoing CSS all over the page which is a bad enough practice as is.

Instead of writing CSS with PHP all over the place, and doing it differently every time, I decided that it would be best to create a class that would handle writing all of my custom CSS, write browser specific prefixes for properties that require them, and output a minified string that could be saved in a .css file or in the <head> of the document.

Over the next few articles I’ll go into greater depth about how I created the class, and then how I integrated it into my WordPress theme.

Until then you can view or fork my finished css class for php from my github page.

PHP CSS Library

Connecting to Via PHP

Displaying your content from just got easier. I first read about their JSON API about a year ago, and naturally I was pretty excited. I’ve personally benefited a ton from the preaching of men such as Joe Morecraft, Bojidar Marinov, Todd Ruddell, Jeff Noblit, Steven Lawson, etc, and I thought it was only fitting that I create a way to give back. At different times over the past year or so I’ve worked on an API for PHP that allows you to do just that, you can view an example of a small app that I built in Angularjs and PHP here. I’ll explain how to use it in depth below.

Setup and Installation

First thing is first, your church must be registered as a full member on as in order to attain an API key. If you already use SA to publish your church’s sermons then this shouldn’t be a problem, otherwise you can register here.

Once you’ve created an account, you’ll need to setup an API key in order to have access to your church’s sermons, speakers, events, and languages; you can do that here.

Now that you’ve got your API key, all you need to do is download my repo from github that will connect you to the platform.

After you’ve downloaded or cloned the repo you can then install it by including it in your project

include_once( 'directory_to_api/SermonAudioApi.php' );

Making the connection

Now that you have the API included in your project you can begin setting it up. First setup your API Key using the setApiKey() method.

$sermon_audio_api- = new CarlosRios\SermonAudioApi;
$sermon_audio_api->setApiKey( 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX' );

You can test your API key to see if it’s accepted by running the getSermons() method which should return an array of sermon objects if the key was accepted, and false if it was rejected.

var_dump( $sermon_audio_api->getSermons() );

Using the PHP API

Handling the sermons

Once you’ve verified that your key is accepted you can begin by grabbing sermons like we did above. The getSermons() method is a helper method included in the SermonAudioApi class that will build the api request with the corresponding options, and then make the request. The getSermons() method accepts an array of options.

speaker: the name of the speaker exactly as it is on SermonAudio
event: a specific type of event that is associated with sermons, ex ( Sunday Service ).
series: the name of the sermon series as it is on SermonAudio
page: the page number to retrieve the sermons from. Set to “total” to retrieve all sermons
sermons_per_page: the number of sermons to display per page, max is currently 100
year: narrows the sermons down to a specific year

$args = array(
	"speaker" => "speakers_name",
	"event" => "event_type",
	"series" => "series_name",
	"page" => "page_number",
	"sermons_per_page" => 10,
	"year" => 2016
$sermons = $sermon_audio_api->getSermons( $args );

Using the sermons after you’ve made the api request is as easy as running a loop. Each sermon will return with the fields provided by sermon audio in a standard php object.

Handling the Speakers

SermonAudio allows us to grab all of the speakers listed in your SermonAudio account. To do so all we need to do is make the proper request, and SA will send us a list of the speakers.


After we have a list of the speakers, we can loop through them as well.

Handling the Events

Events are really short for event types. SA allows you to group your sermons by event type in their dashboard which allows you to distinguish between something like a 9:00am service and an 11:00am service. To access the types of events you’ve registered with SA, all we need to do is make the proper request.


Handling the Languages

Lastly, to get the languages you’ve registered with SA, all we use the getLanguages() method


Using your own methods to make server requests

By default the PHP API for SermonAudio comes with a nifty requestData() method which is used to make all of the server requests to SA. The requests are made using the file_get_contents function provided with PHP, which happens to work on almost all server configurations. After the requests are made and the JSON is collected, it is then converted into standard PHP objects which can then be used in your application.

Not satisfied with file_get_contents? Well there’s no need to worry, the API has also been prepared in case you would rather handle the requests and parsing of the data yourself. All of the get methods have a route method that they utilize to build the request url before the request is actually made. You can use any of the methods below to get the url where you can make the request yourself and handle the data as you please.

sermonsApiRoute( $args );
Builds the url to grab the sermons, and uses all of the same arguments used in the getSermons method.

Builds the url to grab the speakers.

Builds the url to grab all of the event types.

Builds the url to grab all of the languages.

totalSermonsApiRoute( $args );
Builds the url to grab the total number of sermons. Can use any of the arguments available in the getSermons method except for “pages” and “sermons_per_page”.