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:
If you’ve never created a field, that will be blank. Enter in your key (the name) and the value and hit “update”. The yellow flash will tell you it was a success. Remember that key name: it’ll come in handy later </resident Evil>
Step 3: Create a template tag to call the data.
I’m going to keep a standard format to these, just for ease of use. I’ve formatted this like a normal sidebar widget is, just so I can have consistency between the main site and these special pages.
Head over to the sidebar.php file (or whatever file you want to drop this code into) in the Appearance > Editor.
<?php $globalvarcheck=get_post_meta($globalvar, ‘keyname’, true); ?>
<li class=”widget”>
<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:
