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:
Snickers commercial with Betty White
Let’s be honest – Betty White makes nearly anything funny, and throw in Abe and some funny commentary from both and you’ve got yourself a killer commercial.
Doritos: Snack Attack Samurai
It’s my personal opinion that Doritos is the clear cut commercial winner this year. All of their commercials were funny, well written (even the casket one was OK at worst) and featured the product as the star – something some of the other commercials failed to do (or even worse – you remember the commercial, but not the product).
Coke: Hard Times
I saw a few negatives on this one, but you know what: we’ve been through one heck of a last year (decade) and I think a little pick me up every now and then really hits home. “You know what? I’m flat broke, but I’m happy”. Enough said.
Google: Parisian Love
The “Annexation of Puerto Rico” play this year came from our Big Brother itself, Google. This ad, while not new, got such good reviews on YouTube they decided to play it on the big screen. Seriously, how cool would it be to just decide to do a Super Bowl commercial, even when you didn’t need to. At any rate, it was well done, and I’m sure a lot of tears were shed over this one.
First the winners… now… well, the not.
Taco Bell: It Rocks, It Rocks
It most certainly does not rock. In fact, it doesn’t even roll smoothly. Shaq does not do Seuss well, and this whole commercial was just a horrible rhyme trying to sell me tacos. I don’t even remember what all comes in the box (see above on why that means it fails). Although I will agree they have great prices. Check out their Taco Bell Combo Menu.
Boost Mobile Shuffle
You go too far, Boost Mobile: taking a classic like the 1985 Bears Shuffle and ripping it off to a piece of crap like this.
FYI, here is the original Shuffle:
It was classic back then, and the original still is. But shame on you Ditka for selling out to this. *finger wag*
Every Single GoDaddy Commercial
We get it Godaddy. Sex sells. I would stick to domain names and go away from the commercials.
The Mitch Canter Call-To-Action Award:
Dockers
Good job, Dockers, for actually doing something that makes people listen to your call to action immediately – sign up for a free pair of pants (and our newsletter). Well done (and a good commercial too!)
In closing:
These aren’t the only good (or bad) commercials – just the ones that stuck out with me as being incredibly good (or horribly wrong). What do you think – any other ones that should have made either list?