Create a WordPress sidebar with custom fields

What if your WordPress sidebar needs to change from page to page? These days, most businesses want to make everything ‘flexible’. Clients want the ability to change things on a whim. Granted, there’s only so much we can do in order to teeter the line found between functionality and customization, but at least WordPress gives us one super-easy place to add and change content: the sidebar. That is, if you want the same content to appear on each page. The ability to define sidebar content based on what was in the post is a really excellent feature. The example we’re going to show you here in this guide is for a radio station’s DJs, who will have their own Twitter feed, Facebook fan page box, and YouTube videos displayed. We will be dealing with global variables, custom fields (meta information), and ‘if’ statements, so some basic PHP knowledge is required to follow this tutorial effectively.

Follow these step by step Tutorial to WordPress sidebar

Generic field boxes

Our first step is to define a global variable, which will carry data normally locked inside of the loop to other places in the site. Look for the code below in your page.php file:

<?php if (have_posts()) : while (have_posts()) :

the_post();

?>.

Define the global variable

Once you’ve found your if statement, insert the code below immediately after it. Basically, for this page, we’re defining $mc_globalvar to serve as a proxy to the post ID, so we can access it outside of the loop. $mc_ globalvar can be named whatever you want.

<?php global $mc_globalvar; $mc_globalvar = $post-

>ID; ?>

Custom field key

Save, then head to the page editor, choose a page to edit, and look below the writing panel. Custom fields are controlled with a “key” and a “value” system – the value is called in the code by telling WordPress which key to use. Click Enter new and type in youtube.

Custom field value

Find your favorite video on YouTube and copy the <embed> code it gives you into the value field. Any type of content can go here, from images and video to simple HTML. Unfortunately though, you cannot include any PHP, that’s a security lock from WordPress. Click Update once you’re done and save the changes.

Use a function to call the custom field data

We now have our global variable and our custom field, so it is time to put them together. Find your sidebar code in sidebar.php and enter the code below (note: this is structured to mimic the default widget setting – it may need some adjustment):

<?php $youtubecheck=get_post_meta($mc_globalvar

‘youtube’, true); ?>

<li class=”widget youtube-widget”>

<h2 class=”widgettitle”>Latest Video</h2>

<?php echo $youtubecheck ?>

</li>

Empty widgets

You’ll get an empty box if you don’t put anything in the value field. An if statement checks for a custom field value. If it exists, it displays the whole widget:

<!–Youtube Widget Start–>

<?php $youtubecheck=get_post_meta($mc_globalvar,

‘youtube’, true); ?>

<?php if ( $youtubecheck ) { ?>

<li class=”widget youtube-widget”>

<h2 class=”widgettitle”>Latest Video</h2>

<?php echo $youtubecheck ?>

</li>

<?php } ?>

<!–Youtube Widget End—>

Check your widget

View your site and navigate to the page you edited. You should see the YouTube video in the sidebar. However, it may be too large and stick out of the sidebar. You can fix that with some simple CSS (set these values to reflect your own needs):

.youtube-widget object, .youtube-widget embed{

width: 300px;

height: 200px;

}

Latest tweets

If you want to display a user’s latest tweets on the website (which can be really good for a site’s biography section), the process is very similar, but we can take care of all the heavy lifting with a simple plug-in. Just head into the plug-in manager and download/install “Twitter for WordPress” by Ricardo González (http://rick.jinlabs.com/code/twitter). Or you are able to install it manually through FTP.

Parse the user’s tweets

Head to page editor and create the custom field “twitter” and insert a username as the variable. Switch to the theme editor and load sidebar.php. Insert this:

<!–Twitter Widget Start–>

<?php $twittercheck=get_post_meta($mc_globalvar,

‘twitter’, true); ?>

<?php if ( $twittercheck ) { ?>

<li class=”widget twitter-widget”>

<h2 class=”widgettitle”>Latest Tweets</h2>

<?php twitter_messages($key_1_value =

get_post_

meta($mc_globalvar, ‘twitter’, true), 5); ?>

</li>

<?php } ?>

<!–Twitter Widget End–>

We’re nesting one function ($key_1_value) inside of another (twitter_messages) to pull the username in from the page.

Style the widget

Once again, simply head over to the page you added the custom field to and make sure everything’s displaying correctly. It’s organized like an unordered list, so to style you can use:

.twitter-widget ul{

}

// for the overall list, and for the list-items:

.twitter-widget li{

}

Facebook profile badge

Our last item is a Facebook profile badge. No biography section is complete without allowing their fans to follow them on Facebook, right? You can set up the custom field with the key “facebook” to start with. This works just like the other widgets – simply call the variable, and display the value.

Grab a badge

Log in to Facebook and view your profile. Bottom left is a “create a profile badge” link. Click on the [+other] box, or edit your badge to show/hide elements. If you edit (be sure to keep the layout as “vertical”), save the layout, click on [+other] and copy the code.

Enter the badge value

The code you received from Facebook is a generated image. Paste that code into your value fields on the page that you’re editing. Hit the Update button to store the custom field data and update the page to save the changes. It’s very similar to the YouTube section mentioned earlier.

Use a function

Display the data that’s being called from the custom field, after checking to see if it exists with the if-then statement. If the custom field has text or code in it, it’s displayed; otherwise, it’s left out of the sidebar.

<!–Facebook Widget Start–>

<?php $facebookcheck=get_post_meta($mc_globalvar,

‘facebook’, true); ?>

<?php if ( $facebookcheck ) { ?>

<li class=”widget fb-profilebadge-widget”>

<h2 class=”widgettitle”>Facebook</h2>

<?php echo $facebookcheck ?>

</li>

<?php } ?>

<!–Facebook Widget End–>

All done!

Having all three boxes filled will now show a favourite YouTube video, a Facebook fan box, and the latest tweets for a specific user – all completely customized depending on which page you are on. If any of them are left blank (if a user does not have a profile, for example) then it’s left off entirely.