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 SermonAudio.com Via PHP

Displaying your content from sermonaudio.com 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 sermonaudio.com 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.

https://github.com/CarlosRios/sermonaudio-php-api

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

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.

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.

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

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.

speakersApiRoute();
Builds the url to grab the speakers.

eventsApiRoute();
Builds the url to grab all of the event types.

languagesApiRoute();
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”.

The Problem With WordPress Church Themes

WordPress is a powerful framework that is widely supported and constantly updated. Almost all major hosting platforms including Godaddy, Bluehost, and Hostgator allow you to install it on their platform easily and quickly even if you aren’t a developer. The software itself is free of charge which is why many online ministries and theme developers have developed church themes for WordPress.

With a growing community of developers around the world and with the free price tag it only makes sense that many ministries today are turning to WordPress for their online presence.

When it comes to church themes, the WordPress community has churches covered. There are plenty of great looking themes on Themeforest and in other places that do just about everything you would expect from a church’s website today. They’ll manage your events, speakers, staff, etc, but there still remains one major flaw in most if not all of those themes. They tie all of the vital aspects of the ministry into the theme. Over the past 3 years I’ve personally built 4 different WordPress websites for churches and I’ve run into this same issue all 4 of those times as I’ll explain below.

A Separation of Themes & Plugins

One of the mistakes that many developers and non-developers make is thinking that the purpose of a theme is to contain all of the functionality of the website. A theme is not synonymous to a website and unfortunately many churches have had to find that out when they decide to change their theme.

If you have all of your website’s functionality built into the theme then the second you switch your theme all of that functionality goes out the window with the old one. Obviously this is a problem, especially if your ministry plans on changing the website every few years or so.

So then why would anyone build such functionality into a church theme? The answer is simple, because there are few plugins to choose from for church theme developers, and the options that do exist aren’t always what a theme developer wants. In any other instance the theme would be separate from the core functionality of the website as is the case with plugins such as WooCommerce, Easy Digital Downloads, and Yoast SEO.

The Purpose of Church Themes is User Experience

So this brings up a good question, what is the purpose of a WordPress theme for your church? Well as the title suggests, the purpose of a theme is to direct the user’s experience and that’s it. Church themes were always meant to be the design of the site, and not the brains of it. One analogy I often use when talking to clients is that if you take the process of building a home; the foundation, framing, and roof would be the functionality of the site, whereas the brick, and paint colors would be the design.

Once the foundation is laid, its painstakingly hard to move it around. This is the reason that many churches have relied on other online platforms for their online ministries. It’s just simpler to manage when all of the content is separate from the design, which systems like Ekklesia 360 implement.

WordPress Plugins to the Rescue!

This brings us to a follow up question which is “What should be done about functionality that is critical to ministry but shouldn’t be included in my theme?”.

The obvious answer is that it should be built and maintained separately in a WordPress plugin, period.

WordPress has developed into a multi-faceted ecosystem of not only themes, but plugins which are built to target specific tasks. A plugin has the ability to travel alongside a theme for a given period of time and then remain when the new theme is applied. It serves as a bridge between the gap of functionality and design. Until a solid plugin is developed this issue will persist.

Final Thoughts

I’m not writing this without a reason, I believe that it’s crucial for churches and ministries in the future to be able to provide their users with new and clean designs that are updated as the times change. Right now there are very few plugins available to WordPress church themes, and for the most part they don’t present an easy way for developers to build on top of. With all that said, I will be releasing what I hope to be the solution to this problem in the near future.