Last March I wrote an article for WPDesigner (then subsequently republished it here) detailing the ways you could use a base install of Wordpress (then on version 2.3) into a membership directory with the help of just a few plugins. This worked, and still works beautifully for me over at my Pittsburgh Designers community site. But since writing this article new plugins have become available with the unveiling of the completely revised WP core update 2.7.

Replacing the Old Plugins

In my previous installations I used only three plugins: Dealsway’s User Manager and IWG’s Role Manager. This time around I wanted more customization and more control over what was being shown to the users. I ended up trying every plugin I could find that might have a remote chance in helping me accomplish my end objective. The following is my final list of plugins and customization tricks that I used in creating my latest membership project: BUYAPITTSBURGHHOME.com.

Profile Setup & Customization

While this is arguably the most important part of the membership site, I really wasn’t looking for a replacement to the User Manager plguin I was currently using. I had no problem with it, and it was a fairly easy to use plugin. On my membership tutorial, someone suggested looking at the Register Plus plugin. I decided to give it a shot, and I am glad I did. While I still needed to hack the /wp-admin/users-edit.php file to get my profile fields in the order I wanted them, I was happy with the noticeable improvements this plugin had over User Manager.

There are many things that Register Plus does well, but I chose it for the fact that I may need some of it’s features down the road, not particularly right now. I did like the fact that it gave you the ability to replace some of the outgoing WP themed emails surrounding the registration events, but after some testing I decided that it wasn’t the best plugin to handle this. New User Email Setup did the trick, and made the outgoing emails completely customizable.

I also added the old and reliable User Photo plugin. I had installed this on many client WP directory sites, but this is the first time I used it myself. There are a ton of options, but once you find the right combination - it’s a set it and forget it type of plugin.

• Register Plus
• New User Email Setup
• User Photo

• WP User Manager

Admin Interface & Branding

One of the most important things I wanted more control over this time was to have a more customizable admin section where the members enter their profile data. There are a slew of plugins that add various levels of branding the admin dashboard, but only one went to the extent I needed.

Customize your Community (or CYC) was created by one of the true Wordpress gurus, Joost De Valk. It is extremely easy to use, and works like a charm when paired with the WP Hide Dashboard plugin (without it, members can type in /wp-admin/index.php and get to your dashboard).

I ended up hacking the CYC plugin so I could order my custom profile fields the way I wanted them displayed, but this was just my preference, and not required at all for it to work perfectly.

• Customize Your Community

• Custom Admin Branding
• Add Logo to Admin
• Easy Admin Color Schemes

Displaying Authors

As soon as I found Custom Author Permalink, I knew it was a godsend. Anyone wanting to get rid of the awful /author/ permalink structure needs this plugin. The great thing about it is that you can activate the plugin just to set the permalink, then deactivate immediately afterward - it doesn’t have to always be ‘on’ to work.

In my old setup, I needed to ‘approve’ a member by creating a new post on their behalf in order for their profile page to become visible. Now, the plugin Show authors without posts takes care of this for me. One problem is that now that every profile is visible, I had to reverse engineer a little PHP code to check to see if certain profile fields met certain criteria, otherwise I would just do a redirect back to the site’s homepage.

• Custom Author Permalink
• Show authors without posts

• List Authors Plus

Wordpress Security

To be honest, I didn’t have much in the way of security back when I created my original membership directory. Now, since there are a slew of great security related plugins available, I definitely made this a high priority.

My biggest problem was that I had a ton of spam registrations - a problem that seems to plague many Wordpress site administrators. While you can never stop a registration strictly because someone wants to look around, I found that WP-reCAPTCHA took care of all the spam registrations once and for all. Although the Register Plus plugin gave me the ability to implement CAPTCHA, this plugin gave me more customizable options.

Another problem of mine was that although I relied on Role Manager (and I still do) to restrict a member’s movement within the admin panel, I realized that there could be plenty going on in the background that I had no clue about. In came Audit Trail - a plugin that tracks every movement and attempt of a logged in user. The only thing I would change is for it to do is to track what was changed when a member updated his or her profile. Audit Trail already tries to capture this, but when you start adding custom profile fields it loses its functionality.

As I mentioned above, I still use IWG’s Role Manager plugin to restrict which actions can be done by logged in members. I teamed this with the already mentioned WP Hide Dashboard plugin, and my users can now only see what I want them to see.

I also installed WP Security Scan just to see what I could find - which at the time was nothing, but I figure this will end up finding its way onto my regular checklist.

• WP-reCAPTCHA
• Audit Trail
• Role Manager
• WP Hide Dashboard
• WP Security Scan

• Register Plus

Miscellaneous & Vital Plugins

Statistics: For this project, I wanted to see how far I could integrate a statistics package into the Wordpress backend. I tried out StatPress Reloaded and Wordpress Reports, but in the end kept with my reliable stalwarts Statcounter and Google Analytics. I think the next plugin I want to test is for Mint.

Database Backups: Backups are essential to preserving an online community in case of a disaster and should be scheduled to run on at least a weekly basis. For me, I originally started using WP-DBManager, but after finding that it never really took a complete backup (presumably because of my horrible host) I switched to WordPress Database Backup and never looked back.

SEO: I am not sure how useful sitemaps are to the search engines, but I figured creating one wouldn’t hurt. I only tried Google XML Sitemaps, and stuck with it because looked to be the best right from the start. I also chose to install Platinum SEO Pack for the flexibility it gave when creating the page titles.

Development: WP-phpMyAdmin and WP Easy Uploader were essential for me when I was doing development work on the site. With these two, my time in development was greatly reduced.

Other Usefuls: Here is the rest of the list I used when creating my community: WP Super Cache, Weasel’s HTML Bios, Article Templates, WP125, WP-Components

Very Promising: These are quality plugins that I just don’t have a use for yet. They are ones I want to keep in my back pocket just incase I ever have a need for them: SimplePie Plugin for WordPress, RegLevel, Wordpress Newsletter, Member Access

WP-Components is a new Wordpress plugin that allows theme developers to embed a short template tag instead of short bits of text and code that the website owner might want to change later on.

Before creating this plugin, if I had semi-static text within a theme I was developing (such as a short “About Me” blurb) I would either embed the text directly into the template page (sidebar.php) or I would create a “Page” within Wordpress and use the iinclude plugin to “include” that page. That way, if the site owner ever wanted to change that text, he or she would just have to edit that particular page.

That worked OK, but there were a few quirks to it. First, the pages would show up in search results. I could get around it by installing a second plugin called Search Everything - that would allow you to exclude certain pages from the search results. But needing to use both these plugins wasn’t ideal for such a simple problem. That’s why I developed WP-Components

Download

Download latest stable version from Wordpress Extend

Installation

1. Upload wp-coponents.php to your wp-content/plugins/ folder.
2. Go to Settings->WP-Components to set new components.
3. Add the template tag shown below into your theme’s template files.

Usage

Template tag syntax:

<?php get_component('component_slug'); ?>

Template tag “safe” syntax:

<?php if (function_exists('get_component')) { get_component('component_slug'); } ?>

• component_slug: [required] The slug given within this plugin’s settings page.

Requirements

• Only tested on Wordpress 2.5+, but there is no reason it should not work on any older versions.

FAQ

• Where can this template tag go within my theme?
  Anywhere. Literally…

• How can I ensure this plugin doesnt break my theme?
  The best way would be to use the safe template tag that first checks to see if the function exists before it calls it. See “Usage” above for details.

Version Changelog

• Ver 0.7 - 2/23/2009 - Fixed javascript issues with the WP image uploader and other plugins.
• Ver 0.5 - 12/11/2008 - Added Expand/Collapse features for each component, and a few minor style fixes for both the 2.7 and the 2.5.X versions of Wordpress.
• Ver 0.2 - 12/7/2008 - Added deletion confirmation, components are sorted properly, and an ‘undo’ function in case of an oops.
• Ver 0.1 - 12/5/2008 - Plugin developed

ToDo List

• TinyMCE - Add TinyMCE support for those that have enabled it within their profiles.
• Nonce - Add nonce protection to all procedures.
• i18n Support - Add internationalization support for the plugin.

When I started my home business, I had no way of checking my email unless I was physically at home. This worked for about a year, but after not responding to some important emails in a timely fashion, I knew I had to change something.

In came my first Blackberry Curve.

I loved it, and it was a breeze to setup using the setup wizard that came on the device. The only problem, I noticed, was that there was no easy way to sync emails between my Outlook 2003 (insert your desktop client here) and my Blackberry. Actually I read on many forums that it was virtually impossible without a BES server.

Blackberry apparently only allows you to sync your tasks, calendar and contacts though the Desktop Manager - nothing else. The important thing to me were to have the emails synced, but forum after forum, I found people telling me it couldn’t be done.

Moving to Gmail

I lived with the fact that my Blackberry had no idea what my Outlook was doing and vice versa for almost 5 months until I was forced to move my whole email setup from GoDaddy’s servers into Google Apps because of GoDaddy’s horrible email limitations.

Moving my admin @ cagintranet.com email address was pretty simple using Google Apps for Business. It is a free service, and all it took was setting up a couple new CNAME entries within GoDaddy’s domain control panel (which Google had tutorials walking me through the whole process).

Outlook Setup

Setting up Outlook was pretty easy too, and I originally settled on connecting to my new Gmail account via regular old POP3 access, but later switched it to IMAP. I did this because by using IMAP, I was able to keep what I did in Outlook synced with what Gmail saw. If I moved an email into a folder within Outlook, it was moved into a corresponding “label” within Gmail. When I sent an email, it was placed in my Outlook’s Sent Itmes folder as well as the Sent Items in Gmail. Anyway, you get the hint, so after taking the next hour or so moving all my old emails from Outlook into my new Gmail account, I was ready to reset up my Blackberry to connect to Google’s servers.

Disclaimer: You can use any desktop client (Mail, Thunderbird, etc.) to interface between Gmail and your computer - I have Outlook, which is why I used it in this example.

Blackberry Setup

Because I switched email servers, I had to go into the “Personal Email Set Up” icon on my Blackberry and delete the admin @ cagintranet account that was already there.

Using the default setup wizard when adding a new account to the Blackberry, uses the POP3 connection protocol. POP3 is fine, but it is what was stopping me from having any sort of two-way email sync with Outlook. I decided to poke around the internet for an alternative, and lo and behold, I found a Google article detailing the steps needed to setup a Blackberry via IMAP.

The steps in that article are a little long (22 in all), but they were easy to follow and the outcome was perfect. I now have my Outlook desktop client syncing with my Gmail account which also syncs with my Blackberry - all in harmonium. I realize that this only helps a select few of you out there, but I thought it could be helpful enough that I wanted to post it here.

1. Multiple & Dynamic Sidebar Templates

Does trying to remember the TEMPLATEPATH syntax get to you sometimes? Do you think this is way too complicated?

<?php include (TEMPLATEPATH . '/sidebar-sample.php'); ?>

Ok, maybe not, but now starting in Wordpress 2.5, we can use this code to include the same exact template file (sidebar-sample.php):

<?php get_sidebar('sample'); ?>

Now that we know this, it is easy to create a much more streamlined sidebar based on categories…

<?php 
    //to be able to use this outside the_Loop 
    if ( have_posts() ) { the_post(); rewind_posts(); } 
 
    if ( in_category('1') ) { 
        get_sidebar('cat1'); 
        //gets sidebar-cat1.php 
    } elseif ( in_category('2') ) { 
        get_sidebar('cat2'); 
        //gets sidebar-cat2.php
    } elseif ( in_category('3') ) { 
        get_sidebar('cat3'); 
        //gets sidebar-cat3.php
    } elseif ( in_category('4') || in_category('5') || in_category('6') ) { 
        get_sidebar('catRest'); 
        //gets sidebar-catRest.php 
    } else { 
        get_sidebar()
        //gets sidebar.php 
    } 
?>

or by page type…

<?php
	//to be able to use this outside the_Loop
	if ( have_posts() ) { the_post(); rewind_posts(); }

	if ( is_home() || is_front_page() ) {
		get_sidebar('home');
		//gets sidebar-home.php
	} elseif ( is_archive() ) {
		get_sidebar('archive');
		//gets sidebar-archive.php
	} elseif ( is_page() ) {
		get_sidebar('page');
		//gets sidebar-page.php
	} elseif ( is_single() ) {
		get_sidebar('single');
		//gets sidebar-single.php
	} else {
		get_sidebar()
		//gets sidebar.php
	}
?>

2. If Comments are Allowed…

On a recent project, I had to find a way to display comments if they were enabled for the specific post, but otherwise display no evidence that comments ever existed on the page. I ended up wrapping the comments.php template call like this and it worked perfectly.

<!-- Added to show no evidence of comments when 
the status has been changed to allow no comments -->
<?php if ('open' == $post->comment_status) : ?>
	<div class="commentsblock">
		<?php comments_template(); ?>
	</div>
<?php endif; // If Comments are Open Wrapper ?>

3. Category Slogans

Some blogs not only show what category a post belongs to, but also offer up a witty slogan to go along with it. You could always just name your category “The Amazing Open Source PHP Language ” instead of simply “PHP”, but how extensible is that?

What you can do however which is just as easy is to add the slogan as the description of the category. Then you can replace your get_categories() function call with

<a href="<?php echo get_category_link($cat);?>" title="View all <?php single_cat_title('prefix', 'display'); ?> Posts" ><?php echo category_description($cat); ?></a>

4. Styling the Current Category

Markup and styling of category lists is easy now that Wordpress automatically inserts a class=”current” on the category used in your post in your archives list when using the template tag wp_list_categories(). It doesn’t get any easier than that - all we need to do is add some CSS to your stylesheet, and this is working.

.current {
color:#cc0000;
font-weight:bold;
}

5. Return the Numbers of Comments, don’t Echo

I hate when functions assume that you want the data returned to you in the form of an echo. The template tag <?php comments_number('0','1 ','%') ?> automatically echos it’s data which means you can’t use it in any math computations or other functions as a variable. This is where we can use this undocumented function:

<?php get_comments_number(); ?>

Now you can do something slightly different with your comments count like use it to generate each post’s popularity score.

6. The Title without any Markup

This happened to me once. I was redesigning a site that used markup within the blog post’s title; “Little Known <strong>Wordpress</strong> Theme Tricks“. Knowing this template tag, my life would have been made much easier.

Instead of this:

<h3><a href="<?php the_permalink(); ?>" title="Permalink to <?php the_title(); ?>"><?php the_title(); ?></a></h3>

…use this:

<h3><a href="<?php the_permalink(); ?>" title="Permalink to <?php the_title_attribute(); ?>"><?php the_title_attribute(); ?></a></h3>

This template tag provides a ‘clean’ version of the title by stripping HTML tags and converting certain characters (including quotes) to their character entity equivalent.

7. Different Layout for Page 2+

Here we can have a different template for any page that is not “page 1.” Place this code anywhere within the Loop. (Replace the comments with the code you want displayed on either page 1 or beyond)

<?php if ( !$paged < 2 ) { 
  //display code for only page 2 or higher
} else { 
  //display page 1 code
} ?>

8. Replace the_excerpt without a Plugin

Instead of using the the_excerpt template tag, the_content_rss. It allows for a little more flexibility, without the need of a plugin (no matter how great it is). This won’t do everything that gszub’s excerpt reloaded plugin does, but it will for someone that just wants a longer or shorter default excerpt.

<?php the_content_rss('', TRUE, '', 55); ?>

9. Built in Email Obfuscator

Hate when spam bots get a hold of your email? Use this template tag to help obfuscate it.

<?php echo antispambot(get_the_author_email()); ?>

10. Dedicated Options Page within the Dashboard

This is not a theme trick, but I found it very interesting none-the-less. This is a hidden admin page that displays the whole wp_options database table. Go to your dashboard and change the URL to match this:

../wp-admin/options.php

When releasing the first version of my WP-SocialCount Wordpress plugin a while back, an interested visitor asked if I would be so kind as to include a way to reshape the BlogCatalog widget with the next release of the plugin. I had every intention of doing that until I saw just how much would have to be changed in my plugin to accommodate this - so I decided to write this instead.

Current BlogCatalog Widgets

Currently, the list of widgets that BlogCatalog provides it’s users is pretty meager. Hopefully this tutorial will allow it’s members to promote themselves a little easier (and in better style!) than before.

Step 1: Get your API Key

To get your API key, all you need to do is sign in, and go to it’s developers page. A couple sections down, you will see something like the image below. Write down your key and save it for later.

Step 2: Construct the API Calls

In order to make the API call, we need to know the structure that BlogCatalog requires the calls to be in. Looking at their developers page, we see that they only have two types of calls. One is for gathering User data and the other is for getting Blog data.

We are going to start off using the User data api call because this should give us quite a bit of the information we need right off the bat.

The structure as outlined by their documentation is: http://api.blogcatalog.com/getinfo?bcwsid=[apikey]&username=[username]

Looking over this call I see that the only thing we don’t currently have is the [username]. Remember, we got the [apikey] back in Step 1.

Step 3: Set Initial Variables

To make our coding as easy as possible, lets set some variables right off the bat so that we can reference them anytime we need their data later on.

FYI: I will be adding each new step on top of each previous step so that you can see how we build the application…

//Setting variables
$api = "xxxxxxxxxx";		//Your API key
$username = "ccagle8"; 	//Your username

FYI: I X’d out my api key, but you can easily insert your own key in here…

Step 4: Use PHP to Capture Your Data

Since BlogCatalog returns all their data in the form of XML (their documentation didn’t state this, but it’s the format their examples are in, so let’s run with that) we will use the simplexml_load_file php function to load the file into the variable $userfeeddata.

//Setting variables
$api = "xxxxxxxxxx";		//Your API key
$username = "ccagle8"; 	//Your username

//Pulling API user feed data
$userfeeddata = simplexml_load_file ("http://api.blogcatalog.com/getinfo?bcwsid=$api&username=$username");

Step 5: Pull That Data Into Variables

After loading that file of data into our $userfeeddata variable, we can start pulling the information we need out. You can see below that I am pulling the avatar and url from this data. How I realize the hierarchy of the data is done by doing a print_r command on the $userfeeddata variable.

print_r ($userfeeddata);

I usually add this line of code in right after we load the data, and then comment it out once I have everything that I need. After analyzing the print_r output, this is what I came up with:

//Setting variables
$api = "xxxxxxxxxx";		//Your API key
$username = "ccagle8"; 	//Your username

//Pulling API user feed data
$userfeeddata = simplexml_load_file ("http://api.blogcatalog.com/getinfo?bcwsid=$api&username=$username");
//print_r ($userfeeddata);

//Loading that data into variables for later
$avatar = $userfeeddata->result->avatar;
$url = $userfeeddata->result->weblogs->weblog->url;

Step 6: Use this Data for the Second of our API Calls

back in Step 2 we found that BC gives us two types of API calls. We already used the User data feed, but now we will make use of the Blog data feed: http://api.blogcatalog.com/bloginfo?bcwsid=[apikey]&url=[blog url]

Just as before, we already have the [apikey] value, but we don’t yet have the [blog url]. Actually we do, and it is in the form of $url, which we got in Step 5. So, lets make another call to the API, only this time using the one to get Blog information:

//Setting variables
$api = "xxxxxxxxxx";		//Your API key
$username = "ccagle8"; 	//Your username

//Pulling API user feed data
$userfeeddata = simplexml_load_file ("http://api.blogcatalog.com/getinfo?bcwsid=$api&username=$username");

//Loading that data into variables for later
$avatar = $userfeeddata->result->avatar;
$url = $userfeeddata->result->weblogs->weblog->url;

//Pulling API blog feed data
$blogfeeddata = simplexml_load_file ("http://api.blogcatalog.com/bloginfo?bcwsid=$api&url=$url");

Using the print_r command again, I find a some more data that I want to pull out to include in our new widget.

//Setting variables
$api = "xxxxxxxxxx";		//Your API key
$username = "ccagle8"; 	//Your username

//Pulling API user feed data
$userfeeddata = simplexml_load_file ("http://api.blogcatalog.com/getinfo?bcwsid=$api&username=$username");

//Loading that data into variables for later
$avatar = $userfeeddata->result->avatar;
$url = $userfeeddata->result->weblogs->weblog->url;

//Pulling API blog feed data
$blogfeeddata = simplexml_load_file ("http://api.blogcatalog.com/bloginfo?bcwsid=$api&url=$url");

//Loading that data into variables for later
$tags = $blogfeeddata->result->weblog->tags->tag;
$categories = $blogfeeddata->result->weblog->categories->category;
$bcurl = $blogfeeddata->result->weblog->bcurl;
$views = $blogfeeddata->result->weblog->views;
$rank = $blogfeeddata->result->weblog->rank;
$friends = $blogfeeddata->result->weblog->neighborhood->user;
$viewers = $blogfeeddata->result->weblog->recent_viewers->user;

Step 7. Echoing the Data back to the Page

We have all our data mining complete, so now we can focus on sending this it out to our web page.

Here we are echoing out some of the user information that we received during the two API calls we did. You can see that we are showing your Avatar, which is linked to your BlogCatalog page, and your site’s number of views and rank.

//Echos out User Information
echo "<a href=\"". $bcurl ."\"><img src=\"". $avatar ."\" alt=\"View ". $username ."'s BlogCatalog Profile\" /></a><br />";
echo "Views: ". $views ."<br />";
echo "Rank: ". $rank ."<br />";

The next data we want to show are the tags and categories of the blog in question. To do this, we can use a foreach loop that will cycle through each tag and category and create a link back to the BlogCatalog page for each one.

Hint: You can see that I had to sanitize the variables by converting all letters to lowercase and replace spaces with underscores in order for them to work correctly in the URL.

//Cycle through and display tags
	echo "Tags:";
	$set = 0;
	foreach ($tags as $i => $tag) {
		if($set < $limit){ 
			echo "<a href=\"http://www.blogcatalog.com/tag/". strtolower($tag) . "\">". $tag ."</a> ";
		}
		$set  ;
	}
	
	echo "<br />";
	
	//Cycle through and display categories
	echo "Categories: ";
	$set = 0;
	foreach ($categories as $i => $cat) {
		if($set < $limit){ 
			echo "<a href=\"http://www.blogcatalog.com/directory/". urlencode(strtolower(str_replace(" ", "_", "$cat"))) . "\">". $cat ."</a> ";
		}
		$set  ;
	}

DEMO: View the final outcome of this tutorial (with a little bit of CSS and HTML markup added, which you can see in the header section of the page when you do a “view source”).

SOURCE CODE: Download the full PHP source code.

For web designers or other businesses alike, setting up a quality portfolio is essential. This tutorial will show you how you can use Wordpress’s Link Manager to create and display your portfolio. This will allow you to use Wordpress to it’s fullest extent, without the need of extra plugins or any hacked code.

Step 1. Supplying the Data

Lets start off by populating our Links manager with some data. In the screenshot below you can see the fields that I am using:

• Name - Client Name
• Web Address - To link back to. This can either be an internal posting explaining the project in detail or the actual client website (which is what I use).
• Description - For title and alt attributes.
• Categories - Skills that were used in creating the project.
• Advanced: Image Address - Link to the screenshot of your project
• Advanced: Notes - Description of the project

Optional fields include “Target” where you can force your links to open into a new browser window and “Keep this link private.” This is how you can set up a portfolio entry but not have it shown in the display on the site. This could be helpful for when you have a project finished, but you can’t show it until it’s live.

When you are finished adding all your portfolio entries, you can go to Your WP Dashboard > Manage > Links to see the full list.

Step 2. Display Your Portfolio

Wordpress has two different ways to display it’s “bookmarks” which we are now using as portfolio entries. They are wp_list_bookmarks and get_bookmarks

We will use the get_bookmarks template tag because it allows us to manipulate how our “bookmarks” look. The only caveat is that this template tag returns an array - which we will need to use some PHP code to parse though it. To see the data that get_bookmarks outputs, I quickly added this little snippet to my code:

<?php 
$arr_portfolio = get_bookmarks(); 
print_r ($arr_portfolio);
?>

The output from the print_r on get_bookmarks shows how the array is structured.

From that file, we can decipher enough to get the rest of the data echo’d out into an unordered list. The only thing that took a little tweaking was the fact that you have to find your own categories by running SQL on the wp_term_relationships and wp_terms tables in order to derive the category names by their id and the link’s id.

<?php  
$arr_portfolio = get_bookmarks();  
//print_r ($arr_portfolio);
echo "<ul>";
foreach ($arr_portfolio as $site) {
	
   echo "<li>";
   echo "<h3>". $site->link_name ."</h3>";
   echo "<a href=\"". $site->link_url ."\" title=\"". $site->link_description ."\">";
   echo "<img src=\"". $site->link_image ."\" /></a>";
   echo "<p>". $site->link_notes ."</p>";
    
   $cats = $wpdb->get_results("SELECT * FROM wp_term_relationships, wp_terms WHERE wp_term_relationships.object_id = $site->link_id AND wp_terms.term_id = wp_term_relationships.term_taxonomy_id");
   echo "<p>Skills Used: ";
   foreach ($cats as $cat) {
   	echo $cat->name .", ";
   }
   
   echo "</p></li>";
}
echo "</ul>";
?>	

The great thing is that this code doesn’t need to be placed within the_Loop. It will work great within it’s own template or on the sidebar.

View the demo portfolio using this code.

A few months ago I wrote an article on how to create a popular posts list, and in the example I used a category called ‘Popular’ to determine what was shown within the list. This approach is great for those that remember to periodically update their list by adding new posts to that category, but I wanted a way for this to be done automatically.

Auto Popular List based on Number of Comments

In this example I check the number of comments, and if they are greater than or equal to 10 (see the 8th line of the code below) then I display the post. This means that this Loop will show any post that has 10 or more comments. The $popular->query('showposts=50'); at the top of the script is so that this Loop will run the ‘number of comments’ check for each of your 50 latest posts.

The trick here will be finding the happy medium between those two variables. If you have the ‘number of comments’ variable set to low, you could get too many posts in your list that meet the criteria. But on the other hand, if you have the ’showposts’ variable set too low then there may not be enough posts that end up hitting on the ‘number of comments’. A balance needs to be met here. If it was me, I would shoot to have approximately 3 to 5 posts show up in my list. Of course, since this is a dynamically created, the number of posts shown number can change at any given time.

<h3>Popular Articles</h3>  
<ul class="postlist"> 
<?php
$popular = new WP_Query();
$popular->query('showposts=50');
while ($popular->have_posts()) : $popular->the_post(); 
    $total = get_comments_number(); 
    if ($total >= 10) { ?> 
        <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> <span>Score: <?php echo $total; ?></span></li>  
    <?php }; ?> 
<?php endwhile; ?>

Auto Popular List based on Comments & Del.icio.us Bookmarks

This example is exactly the same except for on the $total line I use my own WP-SocialCount plugin to pull in the amount of Del.ico.us bookmarks that the post has. I feel this gives us a more complete idea of whether or not a post is really “popular” — rather than solely relying on it’s number of comments.

<h3>Popular Articles</h3>  
<ul class="postlist"> 
<?php
$popular = new WP_Query();
$popular->query('showposts=50');
while ($popular->have_posts()) : $popular->the_post(); 
    $total = (get_comments_number() +  wpsocialcount('delicious', 'count', get_permalink()));
    if ($total >= 10) { ?> 
        <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> <span>Score: <?php echo $total; ?></span></li>  
    <?php }; ?> 
<?php endwhile; ?>

Digg too…

If your posts regularly show up on Digg as well, then you can use the same plugin and replace the $total line (line 7) in the above example with this:

$total = (get_comments_number() +  wpsocialcount('delicious', 'count', get_permalink()) +  wpsocialcount('digg', 'diggs', get_permalink()));

Scoring Methods

The default scoring will be all that all ‘hits’ are of equal strength:
Total Score = Comments + Del.icio.us Bookmarks + Diggs

Alternatively, if you feel that a Digg or Bookmark is twice as important as a regular old comment, then you could change the $total line to reflect this.

• I tried to make this a complete list via the Extend Plugin Directory.
• I used a snippet of code from the recent post Creating a Simple Online Application using the Flickr API.
• The screenshots are taken from a Firefox 3 browser. I did not test these plugins on any other browsers (IE or Safari).
• I removed all inherent <code> and <pre> CSS styling from the Kubrick theme for this test except for (in order to try to make all the font sizes the same):

  code, pre {font-size:12px !important;}

8. Code Colorer

Download | Author: Dmytro Shteflyuk
Coloring: #8 of 8
Ease of Install/Use: #8 of 8
Line Numbers: Optional
PRE or CODE: CODE or [cc][/cc]
Other Options: Optional links to code keyword linking, Optional CSS changes though a plugin page
Code Format: It can only handle full code.

Review: Maybe the optional CSS would make a difference here, but the coloring is just horrible, and I can’t figure out why the source code is not being highlighted. The setup instructions require you to rename a CSS file (why?) — I did that and I still can’t get this to highlight correctly.

7. Highlight Source Pro

Download | Author: Christian Knoflach
Coloring: #7 of 8
Ease of Install/Use: #5 of 8
Line Numbers: Optional
PRE or CODE: PRE
Other Options: Headlines within the code
Code Format: It can handle either already-escaped or full code.

Review: The syntax highlighting is very similar to the other plugins that also use GeSHi, but the gray on dark gray background doesn’t look right to me. I am sure you can change it by playing with CSS, but it just doesn’t look very appealing right out of the box.

6. Snippet Highlight

Download | Author: Roland Rust
Coloring: #5 of 8
Ease of Install/Use: #3 of 8
Line Numbers: Yes
PRE or CODE: PRE
Code Format: It can only handle already-escaped code.

Review: Very straightforward. It’s only downfall is the ugly olive green line numbering and the fact that it forces you to manually escape your code.

5. WP-Syntax

Download | Author: Ryan McGeary
Coloring: #4 of 8
Ease of Install/Use: #2 of 8 (tied)
Line Numbers: Optional
PRE or CODE: PRE
Code Format: It can handle only full code.

Review: WP-Syntax has good coloring and I do like how the line number coloring is distinctly different from the rest of the code. Other than that, it is pretty much a no-frills highlighter (which isn’t a bad thing).

4. WP-Codebox

Download | Author: Eric Wang
Coloring: #3 of 8
Ease of Install/Use: #2 of 8 (tied)
Line Numbers: Optional
PRE or CODE: PRE
Other Options: Optional collapsible code area, Optional text download of code
Code Format: It can only handle full code.

Review: This example looks to be exactly like WP-Syntax except that this one give you the option to download the code. Although a “copy to clipboard” option would have been better, I feel this is still a step up from WP-Syntax.

3. Google Syntax Highlighter for WordPress

Download | Author: Peter Ryan
Coloring: #4 of 8
Ease of Install/Use: #7 of 8
Line Numbers: Optional
PRE or CODE: PRE
Other Options: Many
Code Format: It can only handle already-escaped code.

Review: This plugin is a little confusing at first with all it’s available options, but I think once you find a combination that is a right fit for your uses, it will be just as easy as any other plugin out there.

2. WP-Chili

Download | Author: Andrea Ercolino
Coloring: #1 of 8
Ease of Install/Use: #6 of 8
Line Numbers: Not Available
PRE or CODE: Requires both to work properly
Code Format: It can only handle already-escaped code.

Review: This example may look very plain because it requires you to provide your own CSS for the <code> and <pre> for styling. This makes it very customizable to the do-it-yourselfer, but maybe not so appealing for those looking for something to work and look great easily right out of the box. Chili does however have the best code highlighting hands-down. Since it doesn’t use GeSHi like many of the other plugins, it’s coloring is distinctly unique.

Disclaimer: This is the plugin I settled on, and I am happy with my choice thus far. Since I need to escape my code before using it, I use Elliot Swan’s great little app Postable.

1. Syntax Highlighter Plus

Download | Author: Fred Wu (along with ma.tt, Viper007Bond and mdawaffe)
Coloring: #2 of 8
Ease of Install/Use: #1 of 8 (tied)
Line Numbers: Yes
PRE or CODE: Neither. It uses [sourcecode][/sourcecode]
Other Options: Print, Copy to clipboard, View as plain text
Code Format: It can handle either already-escaped or full code.

Review: Syntax Highlighter Plus looks fantastic right out of the box. There were no setup steps required, and the extra features such as copy to clipboard really make this plugin stand out. The alternating line colors are a big plus — and unique to this list. The code highlighting, which uses Alex Gorbatchev’s Google Syntax Highlighter, looks the same as most of the plugins here.

This plugin is an obvious upgrade from the original great SyntaxHighlighter. It allows for un-escaped code and removes the leading zeros from the line numbers (eg 1. instead of 01.)

Bonus: WP-Chili CSS

Since I decided to use WP-Chili as my syntax highlighter of choice, I figured I would also share with you the CSS I perfected to make it look the way I do… Just in case anyone wanted to know.

.post pre {
	margin:0 0 20px 0;
	}
.post code {
	border:1px solid #ececec;
	display:block;
	padding:10px;
	font-family: Consolas, Monaco, "Courier New", Courier, monospace;
	font-size: 12px;
	background:#f9f9f9;
	color:#000;
	overflow: auto;
	overflow-y: hidden;
	white-space:nowrap;
	*padding:10px 10px 20px 10px; /* IE Hack-Fix */
	}

The Flickr API is one of the most widely used APIs out there. In this article I will show you how to build your own simple online application using PHP and the Flickr API.

The sample online application we build today will be one that takes a Flickr image URL (e.g. http://www.flickr.com/photos/dans180/854998249/), then outputs the code needed for you to properly display the photo’s credit. Remember, every time you use a Creative Commons licensed photo from Flickr, you need to provide the proper attribution and that is usually considered a link back to the photo while mentioning the photographer’s name. This is an example of the kind of output that we hope to get:

Real Link:
Photo Credit: *dans

Photo Credit: <a href="http://www.flickr.com/photos/dans180/854998249/">*dans</a>

Getting Started

First off, you will need to get an API key. Get one here and hold onto it for later.

Next, we need to build the form that our visitors can input the URL into. This should be pretty basic stuff for most of us.

The HTML Form

<form method="post" id="form" action="flickr_api_example.php" >
	<table>
		<tr>
		<td><label for="photo">Flickr Photo URL:</label></td>
		<td><input type="text" value="" size="50" name="photo" id="photo" /></td>
		</tr>
		<tr>
		<td></td>
		<td><input type="submit" value="Generate Code" name="submitted" /></td>
		</tr>
	</table>
</form>

The PHP if-statement

This form is setup to POST the data back to itself for processing. To handle this, we need to make use of an if-statement to check to see if the form is submitting data back to itself, or if it just needs to show a blank form to a new visitor.

The PHP evaluation isset allows us to determine whether or not a variable is set. In our example, we check to see if the variable ‘photo‘ is set - because that is the name of the input field where the visitor enters the Flickr image’s URL.

<?php 
if (isset($_POST['photo'])) { //The form was submitted, process the data

} else { //The form was not submitted

};
?>

If the variable ‘photo‘ is set, the next step is to initialize some variables. The first variable is the image URL that the user submitted into our form, while the second will be the API key we got from Flickr.

<?php 
if (isset($_POST['photo'])) { //The form was submitted, process the data
	$queryString=$_POST['photo']; //The URL submitted
	$flickr_api_key = "352ee7XXXXXXXXXXXXXXXXXXXXXXXXXX"; //Our API Key
	
} else { //The form was not submitted

};
?>

In order to make the URL submitted usable to us, we need to split it up into its relevant sections. I use the PHP function explode to help break the URL up by the character ‘/’. All we need from this URL is the photo id, and we can see below is the 6th of these so called sections.

PHP FACT: PHP starts it’s count with 0.

<?php 
if (isset($_POST['photo'])) { //The form was submitted, process the data
	$queryString=$_POST['photo']; //The URL submitted
	$flickr_api_key = "352ee7XXXXXXXXXXXXXXXXXXXXXXXXXX"; //Our API Key
	
	$url = explode("/", $queryString); //Split the URL up into sections, delimited by the character '/'
	$photo_id = $url[5]; //The Photo ID is the 6th of these sections
	
} else { //The form was not submitted

};
?>

Structuring the Flickr API

After turning the contents of the photo id section into it’s own variable, we now have everything we need to start the API call.

After searching the Flickr site a while, I found the flickr.photos.getInfo method - and judging by the example it displays, it looks to be exactly what we want. Notice we already have both of the required variables to make this call: $photo_id and $api_key.

Next, we need to find out what the correct call syntax that Flickr requires in order to get data back from their API. Luckily, they are nice enough to give us an example PHP call here. This test gives us the insight needed as to what an API call should be structured like:

http://www.flickr.com/services/rest/?method=flickr.test.echo&format=php_serial&api_key=eaab5c513e33c01544385641ff9af42f

After we modify their example to use the method flickr.photos.getInfo, we also need insert a new argument for the photo_id. Our newly structured API call now looks like this: (changes are in red)

http://www.flickr.com/services/rest/?method=flickr.photos.getInfo&format=php_serial&photo_id=$photo_id&api_key=$flickr_api_key

You can test the validity of our newly structured call by pasting it into any web browser’s address bar. You will get back real data if it works, or errors when it fails.

Using the Data from the Flickr API

Once we get a working API call, we need to have our application read in the data that is returned. To import this data into our web app, we use the function file_get_contents, then re-format it using the unserialize function.

<?php 
if (isset($_POST['photo'])) { //The form was submitted, process the data
	$queryString=$_POST['photo']; //The URL submitted
	$flickr_api_key = "352ee7XXXXXXXXXXXXXXXXXXXXXXXXXX"; //Our API Key
	
	$url = explode("/", $queryString); //Split the URL up into sections, delimited by the character/
	$photo_id = $url[5]; //The Photo ID is the 6th of these sections
	
	$flickrrawoutput =  file_get_contents("http://flickr.com/services/rest/?method=flickr.photos.getInfo&photo_id=$photo_id&api_key=$flickr_api_key&format=php_serial");
	$flickroutput = unserialize($flickrrawoutput);
	
} else { //The form was not submitted

};
?>

Since all good coders do error checking, we also need to run a quick check to see if the API call returned no data (an error). We can do so with this simple line:

$status = $flickroutput['stat']; //Extracts the 'stat' value from the data returned

Now, with a second if-statement, we check to see the variable $status’s value, and if it doesn’t contain the word ‘fail‘ then we know we made a successful call. Putting it all together, it looks like this:

<?php 
if (isset($_POST['photo'])) { //The form was submitted, process the data
	$queryString=$_POST['photo']; //The URL submitted
	$flickr_api_key = "352ee7XXXXXXXXXXXXXXXXXXXXXXXXXX"; //Our API Key
	
	$url = explode("/", $queryString); //Split the URL up into sections, delimited by the character/
	$photo_id = $url[5]; //The Photo ID is the 6th of these sections
	
	//Get the data from Flickr
	$flickrrawoutput =  file_get_contents("http://flickr.com/services/rest/?method=flickr.photos.getInfo&photo_id=$photo_id&api_key=$flickr_api_key&format=php_serial");
	$flickroutput = unserialize($flickrrawoutput); 
	
	$status = $flickroutput['stat']; //Extracts the 'stat' value from the data returned
	
	if ($status != 'fail') { //fetch from Flickr returned stats for photo
		
	} else { 
		echo "The supplied photo URL is wrong. Please <a href=\"#form\">try again</a>."; //A bad URL was entered into the form
	};
	
	
} else { //The form was not submitted

};
?>

Once we know we’ve made a successful API call, we need to extract the ‘username‘ of the photo’s owner. We do this with this line:

$flickr_user  = $flickroutput['photo']['owner']['username'];

… but this is sometimes not an easy thing to figure out. I have found the best way to find out what to extract is by analyzing the unserialized data we get back from Flickr. PHP allows us to look at the data in an easier to read format by using print_r.

print_r ($flickroutput)

This is probably the hardest part of using the API. If you insert the print_r command into your PHP document right after we unserialize the Flickr data, we can easily see the different levels of the data structure.

Hint: You can view the output of our print_r command here. The different tiers are highlighted in red.

The way our data extract works is ‘photo’ is the first level within the $flickroutput data. The next tier down is ‘owner’, which houses the last level called ‘username’ which holds the data we need. That’s how we get $flickroutput['photo']['owner']['username'] — each [] is referencing it’s own tier.

Output the Data to the Visitor

Once we have the $flickr_user variable set with this extract, we are ready to output our finished code. We will output it twice: One as an example “live” link, and the other will be the raw HTML code that the visitor can input into his or her site.

<?php 
if (isset($_POST['photo'])) { //The form was submitted, process the data
	$queryString=$_POST['photo']; //The URL submitted
	$flickr_api_key = "352ee7XXXXXXXXXXXXXXXXXXXXXXXXXX"; //Our API Key
	
	$url = explode("/", $queryString); //Split the URL up into sections, delimited by the character/
	$photo_id = $url[5]; //The Photo ID is the 6th of these sections
	
	//Get the data from Flickr
	$flickrrawoutput =  file_get_contents("http://flickr.com/services/rest/?method=flickr.photos.getInfo&photo_id=$photo_id&api_key=$flickr_api_key&format=php_serial");
	$flickroutput = unserialize($flickrrawoutput); 
	
	$status = $flickroutput['stat']; //Extracts the 'stat' value from the data returned
	
	if ($status != 'fail') { //fetch from Flickr returned stats for photo
		$flickr_user  = $flickroutput['photo']['owner']['username'];
	?>
	
	<p>Preview: </p>
	<cite>Photo Credit: <a href="<?php echo $queryString; ?>" title="Photo Credit: <?php echo $flickr_user; ?>"><?php echo $flickr_user; ?></a></cite></p>
	<p>HTML Code:</p>
	<pre>
		&lt;cite&gt;
			Photo Credit: &lt;a href=&quot;<?php echo $queryString; ?>&quot; title=&quot;Photo Credit: <?php echo $flickr_user; ?>&quot;&gt;<?php echo $flickr_user; ?>&lt;/a&gt;
		&lt;/cite&gt;
	</pre>
	
	<?php
	} else { 
		echo "The supplied photo URL is wrong. Please <a href=\"#form\">try again</a>."; //A bad URL was entered into the form
	};
	
	
} else { //The form was not submitted

};
?>

Putting it all Together

Now that we have the form and the PHP sections completed, we need to put it all together into an application page. You can download the example page here, or you can take a look at the working example I’ve put up.

Although I am certain that I am not the only one doing this, I have developed an extremely easy way to get CSS text shadows without the need to use the wildly unsupported CSS property of text-shadow.

The only problem that some people may see with this example is “duplicate content” because the title is shown twice in the HTML. I’ve decided that sometimes when all you need is a simple text drop shadow, this is an acceptable problem. This technique is extremely easy, and I have used it on a couple sites of mine thus far with no cross-browser issues.

The Code (HTML)

<div class="post_title">
	<h1>Lorem ipsum dolor sit amet consectetuer</h1>
	<h6>Lorem ipsum dolor sit amet consectetuer</h6>
</div>

The Code (CSS)

.post_title {
position:relative;
font-family:arial;
}

.post_title h1 {
position:absolute;
top:2px;
left:2px;
font-size:30px;
color:#C9D8E9;
padding:0;
margin:0;
}

.post_title h6 {
position:absolute;
top:0;
left:0;
font-size:30px;
color:#4471A2;
padding:0;
margin:0;
}