How to Create a Dynamic Sidebar Controlled with Custom Fields in WordPress
OK, so it’s not the most original title in the world, but it gets the point across 🙂
I’ve been working with the fantastic Jeff Brown and the Way-FM crew to create a site for their Nashville presence that will allow them super-quick, easy content management and a place they can post local stories and events. WordPress, of course, is the logical choice, but then they presented me with an interesting conundrum: make their “jock” bio pages fun and engaging. And make it have all of their social bells and whistles on it.
I took up the challenge.
And honestly, it’s super-freakin’ easy to do.
Our to do list:
- Define a global variable in WordPress that will carry outside of the post loop
- Create the custom field, and set the key names
- Create a template tag that will showcase only the custom field data I want
- Create an IF statement to, if there’s nothing in the field, collapse the field (the cool part!)
Step 1: Define our Global Variable
A Global Variable (looks like this: $variable) is basically a proxy for some other piece of code. When we set one, and we can set a variable to anything we want, we’re saying “Instead of saying this long random code string, we’re going to say one word and a dollar sign. Makes for much easier querying in WordPress.
Look for the code line:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
Right after that, add this line:
<?php global $globalvar; $globalvar = $post->ID; ?>
You can name it whatever you want, just make sure to carry the new name throughout the code.
Step 2: Create the custom fields
Remember how to create custom fields? Below the post editor look for these boxes:
<h4 class=”widgettitle”>Facebook</h4>
<?php echo $globalvarcheck ?>
</li>
get_post_meta is our tag of choice. There are three, comma separated options: 1) Post ID, 2) key name, and 3) do we want to display it, or queue it in an array. Basically, we call another global variable to specifically call the first variable as the post id, and give it the correct key name to make sure we call the right variable.
Step 4: Preventing Empty Widgets with an If Statement
But, Mitch, what happens if we don’t have a value set for a key? Never fear. You can use a simple check with the same global variable to only display the data if that custom field has information in it.
Here’s a facebook widget I developed (so you can drop in a Fan Page box) and showcase it on a particular page. It shows the full IF statement with some example verbage:
<!–Facebook Widget Start–>
<?php $facebookcheck=get_post_meta($globalvar, ‘facebook’, true); ?>
<?php if ( $facebookcheck ) { ?>
<li class=”widget”>
<h4 class=”widgettitle”>Facebook</h4>
<?php echo $facebookcheck ?>
</li>
<?php } ?>
<!–Facebook Widget End—>
Usage
Obviously, dropping in random social media widgets is a great way to use this, but I have a bonus for all you twitter-ites out there. Ricardo González created a plugin called Twitter for WordPress, and it’s one of the few that uses template tags as a way of insertion (you see where this is going?):
<!–Twitter Widget Start–>
<?php $twittercheck=get_post_meta($globalvar, ‘twitter’, true); ?>
<?php if ( $twittercheck ) { ?>
<li class=”widget”>
<h4 class=”widgettitle”>Latest Tweets</h4>
<?php twitter_messages($key_1_value = get_post_meta($twitterID, ‘twitter’, true), 5); ?>
</li>
<?php } ?>
<!–Twitter Widget End—>
I know that looks like a lot of code, but I basically embedded one template tag in another. The first value in the twitter_messages tag is the global variable calling a twitter username. The second calls the number of tweets. Basically, enter in a twitter username, and if you do, this will display 5 tweets from it. Pretty cool eh?
I can’t show the full site example because it’s not launched yet, but here’s a sneak peek at the new Way-FM site, and this code in action:
/*
Plugin Name: Facebook Like Widget
Plugin URI: http://allanjosephbatac.com
Description: Add a Facebook ‘Like’ Button Widget to your post pages. Increase visitors!
Author: AJ Batac
Version: 0.1
Author URI: http://allanjosephbatac.com
*/
function add_facebook_like($the_iframe = ”)
{
$the_perma = rawurlencode(get_permalink());
$the_iframe .= ‘<div id=”facebook_like”><iframe src=”http://www.facebook.com/plugins/like.php?href=’.$the_perma.’&layout=standard&show-faces=true&width=600&action=like&font=arial&colorscheme=dark” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; overflow:hidden; width:600px; height:auto;”></iframe></div>’;
return $the_iframe;
}
add_action(‘the_content’, ‘add_facebook_like’);
?>
The bold, color coded areas above show the areas you can change. The width corresponds to how wide your blog is. if you don’t know, then just leave it at the default (450px) and you should be OK. However, your friend’s “faces” won’t go to the edge of your content. In yellow is the “color scheme”. If you have a light background, choose “light”. If you have a darker background, like my site, choose “dark”.
That’s it – the like badge will show up at the bottom:
On the flip side, those tweets you’re sending out can now be used (and monetized) by twitter for any purpose whatsoever. What’s more, is that if you post a tweet on your site, and it causes you to get ad revenue, Twitter is legally entitled to a share of that, because you are re-purposing their content:
In cases where Twitter content is the basis (in whole or in part) of the
advertising sale, we require you to compensate us (recoupable against
any fees payable to Twitter for data licensing).
Scary stuff, eh? Your tweets, open to the free world, can now be used by Twitter for anything, including making money. Makes you want to read those TOS clauses more closely.
So, I want to know what you think. Where do you stand on either front? Sure, Apple makes more money locking it’s hardware down… or does it? Or, should Twitter really have as much power as it seems to with it’s latest Terms of Use update?