Mastering WordPress Filters

If you are reading this series in order, then you just finished reading about using WordPress Hooks to modify how your site using some out of the box code rather than another bloated WordPress plugin.

WordPress explains the two different types of hooks available like this:

1. Actions (Codex Action Reference)
2. Filters (Codex Filter Reference)

You can sometimes accomplish the same goal with either an action or a filter. For example, if you want your plugin to change the text of a post, you might add an action function to publish_post (so the post is modified as it is saved to the database), or a filter function to the_content (so the post is modified as it is displayed in the browser screen).

Now that you are totally up to speed… what? That wasn’t as clear as you hoped? Ok, let’s break it down by looking at a couple of examples.

Getting Started with WordPress Filters

One modification that I use on my own personal WordPress site (and sometimes for clients) is adding additional fields to user accounts that include social networks. After a little bit of work, this is what it looks like.

To get that page to include all those social networks without having to insert it some crazy way, I made additional fields by adding the following code to the functions.php file.

WARNING: If you make a mistake editing your functions.php file, your site can become unresponsive to web requests – which means you’ll have to fix it via FTP or SSH.

function my_new_contactmethods( $contactmethods ) {
    //** Add Twitter */
    $contactmethods['twitter'] = 'Twitter profile URL';
    //** Add Facebook */
    $contactmethods['facebook'] = 'Facebook profile URL';
    //** Add LinkedIn */
    $contactmethods['linkedin'] = 'LinkedIn profile URL';
    //** Add Pinterest */
    $contactmethods['pinterest'] = 'Pinterest profile URL';
    //** Add Foursquare */
    $contactmethods['foursquare'] = 'Foursquare profile URL';
    //** Add Scoopit */
    $contactmethods['scoopit'] = 'Scoop.it! profile URL';
    //** Add Quora */
    $contactmethods['quora'] = 'Quora profile URL';
    //** Add Yelp */
    $contactmethods['yelp'] = 'Yelp profile URL';
    //** Add Flickr */
    $contactmethods['flickr'] = 'Flickr profile URL';
    //** Add Tumbler */
    $contactmethods['tumblr'] = 'Tumblr profile URL';
    //** Add Vimeo */
    $contactmethods['vimeo'] = 'Vimeo profile URL';
    //** Add WordPress */
    $contactmethods['wordpress'] = 'Wordpress profile URL';
    //** Add RSS */
    $contactmethods['rss'] = 'RSS feed URL';

    unset($contactmethods['yim']);
    unset($contactmethods['aim']);
    unset($contactmethods['jabber']);

    return $contactmethods;
}

add_filter('user_contactmethods','my_new_contactmethods',10,1);

The code above does a couple of different things. The function (my_new_contactmethods) adds a bunch of fields for me to enter my profile on those platforms and also removes (unset) the fields for Yahoo Instant Messenger, AOL Instant Messenger and Jabber – since I don’t use them. I then add those new fields by calling add_filter to shove them into the user_contactmenthods for every user.

This is what my contact area looks like.

Now that I added those additional contact methods, I can call them with a specific function and drop them into my author archive page. Since I don’t ever want to modify code directly, we return again to the functions.php page and insert those social profiles.

I won’t go into the additional tweaking I do to my own author archive to get the intro the way I wanted it, but here is how I go about inserting the (first few) new contact fields into the page.

echo '<div id="connectbar">';
if (get_the_author_meta('googleplus')) {
	echo '<a href="'. get_the_author_meta('googleplus') .'" rel="author" class="google_icon" title="Circle me on Google+">Circle me on Google+</a>';
}
if (get_the_author_meta('twitter')) {
	echo '<a href="http://twitter.com/'. get_the_author_meta('twitter') .'" class="twitter_icon" title="Follow me on Twitter">Follow me on Twitter</a>';
}
if (get_the_author_meta('facebook')) {
	echo '<a href="'. get_the_author_meta('facebook') .'" class="facebook_icon" title="Friend me on Facebook">Friend me on Facebook</a>';
}
if (get_the_author_meta('linkedin')) {
	echo '<a href="'. get_the_author_meta('linkedin') .'" class="linkedin_icon" title="Connect with me LinkedIn">Connect with me LinkedIn</a>';
}
echo '</div>';

I use the class tags to call a small background-image to make it look like a clickable button that changes color when you hover over it.

#connectbar a.twitter_icon {
	background: #f0f0f0 url(/wp-content/themes/eleven40-pro/images/twitter.png) no-repeat 0 0;
}

#connectbar a.twitter_icon:hover {
	background-color: #48c4d2;
}

#connectbar a.facebook_icon {
	background: #f0f0f0 url(/wp-content/themes/eleven40-pro/images/facebook.png) no-repeat 0 0;
}

#connectbar a.facebook_icon:hover {
	background-color: #3b5998;
}

Let’s look at something a bit easier, and also something that gets asked about more frequently.

Using WordPresss Filters to Remove the Footer Text

In almost every WordPress theme, the developer leaves a link at the bottom. Below is an example from the Author Pro Theme from Studiopress.

You may love your theme so much that you are cool leaving the attribution link in the footer, but what if you’re not? There’s a simple way to remove it, and yes, it’s totally legal to remove that stuff. The code below is specific for the Genesis themes, but the concept is the same.

1. Dream up what you would like in the footer
2. Use a WordPress filter to change the default text in the footer

Once again, you’ll need to edit the functions.php file to add a snippet of code. Below we want the footer code to say © <current year> Acme Widget Company.

add_action('wp_footer', 'my_footer');

function my_footer () {
	echo '<p>&copy; '.date('Y').' Acme Widget Company.</p>';
}

Your theme may be set up slightly different, so be prepared to dig in a bit if that’s the case.

Using a combination of WordPress Hooks, Actions and Filters you can accomplish almost anything in WordPress.

If you’re interested in using WordPress Actions, you can follow along with the super simple example in the previous post in this series.