Adding Drop Shadows to SVGs

A recent project I was working on called for adding a drop shadow to an SVG icon. My first thought was to use the box-shadow style like I usually do for drop shadows. Unfortunately, this just added a drop shadow to the box object and not the paths in the SVG.

For this scenario, I was using an SVG sprite like the following:

After some Googling, I found a solution that worked for me. It involved adding an SVG filter to my sprite that I could apply using CSS. Below is the code I ended up adding to my sprite:

I’m not going to go into details of what everything in the filter means, but the important parts are the feOffset  and feFlood . Those settings will allow you to change the distance and color of your drop shadow. Here is what my final SVG sprite looked like:

Now we can use CSS to apply our drop shadow. For this, we will be using the filter property. Here is an example of the HTML and CSS used to display the SVG.

You might be wonder what the extra CSS properties are for. These extra properties just make sure that the SVG icon takes on the font size and color of wherever it is inserted.

Now you know the proper way to add a drop shadow to an SVG.



Church Metrics Dashboard Plugin

A couple of weeks ago I took a few days to write a new WordPress plugin. There is a free service from called Church Metrics. This service allows you to setup Campuses, Categories, and Events that you can track numbers for. These numbers can be anything you’d like. Attendance, baptisms, first-time visitors, etc.

Church Metrics Dashboard takes these numbers and can either display them as Dashboard Widgets in your WordPress Admin or provide you with a shortcode to display them anyplace on your site. It also offers some unique features not available from Church Metrics. Like the ability to combine multiple categories into a single count, percentage differences between comparisons, average counts, and year over year counts.

Check it out on

The WordPress Customizer and Checkboxes

While working with checkbox inputs in the Customizer, I discovered an inconsistency with the values that were being returned to my plugin using the get_option  function. Please note that WordPress saves checkbox values in the options table as either “1” or “” for checked and unchecked respectively. Below are some of the scenarios that I encountered.

Scenario #1

In the Customizer, the checkbox is initially unchecked and the value is “”. I check the checkbox, the page refreshes and shows a value of TRUE. I toggle the checkbox and the value changes from TRUE (for checked) and FALSE (for unchecked). I save the settings with the checkbox checked and exit the customizer. The value is now “1”.

Scenario #2

With a value of “1”, I enter the Customizer. The value changes to TRUE and the checkbox is already checked. I uncheck the checkbox and the value changes to “1”. I check the checkbox again and the value changes to TRUE. Both checked and unchecked values are TRUE and “1” respectively.

In these two scenarios, while in the Customizer, checked values are returned as either TRUE or “1” and unchecked values are returned as either FALSE, “”, or “1”. Because of that, it’s impossible to know for sure the true state of the checkbox.

Fortunately, I was able to create a workaround by using the sanitize_callback  property when adding the settings, like so:

And here is the code for the callback:

After that, I had no more problems. Checked checkboxes were consistently “1” and unchecked checkboxes were consistently “”. I didn’t find much information when searching for this, so I hope that this information will be helpful to someone.

There appears to be a ticket in trac about this issue from two years ago:

AngularJS Factory for WordPress

I’ve been working on an Ionic Framework app that gets all of its data from WordPress REST API. Everything from custom post types to menus and pages. Right now, I’ve only built in functions for the data that my app needed, but I’ll be adding to it as I build more apps. Hosting it on GitHub, I hope that others can benefit from as well as contribute to it. Enjoy!

FireTree-ngWordPress on GitHub

BTW, here’s the app I built: Discovery Church

Listing WordPress Posts in an Ionic Framework Application

This article assumes that you have some existing knowledge of the Ionic Framework and AngularJS.

With the WP-API getting more and more mature, I thought I’d share how I recently integrated WordPress data into a cross-platform mobile app. Approximately three months ago I picked up the Ionic Framework which uses AngularJS and Cordova to create mobile apps that utilize web technologies such as HTML, CSS, and JavaScript, but look like native apps.

Setting Up Our Controller

First, we need to set up our controller. Below is a simple controller.

In the code above, myCtrl  is the name of your controller. Next, we have the objects that we want to make available to our controller. The  $scope  is where we will assign our data for use in our template and the  $http  will allow us to make a request to the WP-API for some data.

Specifying Our API Endpoint

This is the endpoint that we need to use to requests a list of posts from our website. There are many endpoints and filters available for requesting data, but for this example we will just be querying posts.

Requesting The Data

This tells the $http  object to use JSONP (JSON with Padding) to request the data from our WordPress site. On success, it loads the JSON data into our $scope  and calls it $scope.posts . If there is an error, it will write a log to our console.

Binding The Data To Our Template

Here is a simplified version of what our template might look like. Notice how we bound the data to a list item using the collection-repeat directive. That element will be repeated for each post in $scope.posts .

Putting It All Together

This is roughly how your controller should look by now.


The Result

And here are the results. A nice looking list of our blog posts.



Fixing Mistakes

A couple of months ago, I added some code to a plugin that I wrote to use wp_schedule_single_event() in order to schedule some background processes. These were to keep data up to date and to clear out expired data. I did some testing on a few sites and everything seemed to work great.

A couple of weeks later, I started to hear from customers that their sites were slow. My first reaction was to blame their host or the other plugins that they had installed. More and more customers were mentioning that the plugin seemed to make their site sluggish. The weirdest thing was that I wasn’t experiencing it on any of my sites…until a couple of days go. I was constantly receiving fatal errors that the memory had been exhausted. I inched the memory up further and further until it was over 400MB.

That’s when I discovered my problem. Almost all of those cron jobs that I had been scheduling were still in the system. They never completed. Not only did they never complete…they kept getting added. There were thousands of cron jobs attempting to run every time a page loaded. No wonder I was running out of memory!

That night I could not sleep. I sat up in bed for a couple of hours and after some research, came up with a way to clear out those cron jobs. I used _get_cron_array() to find and un-schedule the jobs I had created. Because the cron jobs were scheduled with arguments, I had to loop through each cron in that array to find the correct arguments to un-schedule them.

Immediately, my site was noticeably faster! Now I had to figure out why it was happening and how to prevent it. After a day of trial and error, I got to a point where everything was running smoothly. Cron jobs were running, then removing themselves from the schedule. Not only that, but my memory usage was staying really low. Yay!

Finally, I was able to release an update for my plugin with the fixes in place. I created a version upgrade routine that would run only once to clean up the mess. I even created a bug fix plugin that we made available for a couple of our customers who couldn’t even have our plugin active without it crashing their site. Run the bug fix plugin, then re-activate our plugin and install the update.

It was a big mess, but I feel a huge weight off my shoulders knowing that it’s been taken care of. Luckily, our customers have been very patient with us.

Transient Fallback Class for WordPress

I’ve been doing a lot of work with a 3rd party API over the past year. One of my frustrations has been how long it takes to request information from the API. Some of the requests could take up to 30+ seconds. The user visiting the site would have to wait during that time for the page to finish loading. I then started using Transients to cache the API calls for a specified period of time. This worked great until the transient expired and a visitor had to wait for the API to return the data again or if the site didn’t get much traffic and the transient expired before the next visitor got to benefit from it.

My first idea was to not return the API data on the page load, but instead request the data after the page had loaded via an AJAX call. At least the page would finish loading, then I could display a spinner or something to let the visitor know that content was still loading in that particular section of the page. Still not idea since the visitor would be required to wait for the data, just at a different stage of the page load.

Then, about a week ago when TechCrunch open sourced their WordPress Async Task Library, it got me thinking. I could do the same thing with my transients! I then did a search and found that Mark Jaquith had created something very similar. I refrained from looking at the source code for either of these projects because I wanted to figure it out on my own. I mean, how else am I going to learn unless I challenge myself, right? I know that my code can be improved, so I will take a look at their source code now that I’ve got mine working.

Here’s how my class works. It has its own version of set_transient() and get_transient(). The function to set the transient has the same options as the WordPress version, except that it sets two transients. The first one is set with the expiration that was passed to the function. The second (fallback) transient is set with the expiration that was specified when the class was constructed, which defaults to 1 week. When requesting the transient, there are a few extra parameters. Along with the name of the transient, ->get_transient() also requires a hook and the arguments to pass to that hook. The hook is a function that needs to be registered with add_action(). When a transient is requested, the main transient is checked for data. If that transient is valid, then the data is returned, but if it has expired, then the fallback transient is checked for data. If the fallback transient is valid, then the data is returned and the hook is scheduled to run using wp_schedule_single_event(). If the fallback transient has also expired, then the function returns false and you can act accordingly. When the scheduled event fires, make sure that it repopulates the transient using ->set_transient().

There is also a cleanup function that can be turned on when the class is constructed. This function will purge expired transients created by the class on a daily basis.

I’ve put the class up on GitHub if you’d like to take a look. Feel free to give me some feedback or use it in your own projects.

FireTree-Transient-Fallback class for WordPress

CCBPress for WordPress

I’m proud to announce that, as of yesterday, CCBPress is officially for sale!

I’ve been working on the project for well over a year. It hasn’t been a full-time project, but it’s certainly been keeping me busy.


“Introducing the easiest way to display information from Church Community Builder on your church WordPress site”

This plugin was created to fill a need that my church had, and we know that a lot of other churches have this same need. There’s no reason that you should have to keep information up-to-date in multiple locations. Once it’s set up, just enter your data in Church Community Builder and you’re done.

For Developers

Everything in CCBPress was designed to be easily modified to fit in with any theme. (Check out Discovery Church as an example.) Filters are used throughout to enable full control of what’s displayed. Feel free to take a look at our documentation.

The Future

We’re just getting started here. There are so many possibilities and we look forward to integrating more Church Community Builder services into WordPress.

Rewrite Rules

I’ve been reading up on Rewrite Rules for displaying non-WordPress content. For almost the past year, I have slowly been working on a plugin that connects to a third-party API to bring in content. (It’s been an on and off process…mostly off.) Until now, all of the content lived as widgets. Now that I’ve discovered rewrite rules, I can create permalinks that link to and display this content.

This was originally what I wanted to do, but had no idea how to accomplish it. Now that I’ve gotten this figured out, the usefulness of this plugin has exponentially increased. I need to make sure that I don’t get ahead of myself though. I have a lot of debugging to look forward to in order to make everything run smoothly.


Back in July, I wrote a post called Getting Started with iOS Development. At the time, I had an idea for an app or two and really wanted to create them. Then in August I wrote about Simplifying both tangible and intangible things. That simplification has now evolved into focusing. Focusing my talents and abilities on things that I’m already good at, but have certainly not mastered. I’ve decided that iOS development is not what I should be focusing on. I’m instead focusing on WordPress development.

I’ve been part of a two-man team doing WordPress theme and plugin development for about two years now as a side job. We haven’t really released anything publicly yet since the work we’ve done so far has been specific to the clients that we’ve been working with. I’d like that to change though. I have a premium plugin that I started working on nearly a year ago that I’d really like to finish. It’s a niche product, but currently has no competition in the WordPress space. I’m really excited about it and hope to be able to release more information about it by the end of the year.