Introducing the Silk Companion II Icon Pack. While developing a new CKEditor skin for GetSimple, I had a need for some extra Silk icons developed by Mark James at FamFamFam. Out came 64 new silk-inspired icons. These icons are released under the same Creative Commons Attribution 3.0 License as the originals.

Damien Guard created the first set of the Silk Companion icons, so thanks to him for setting me on the track to get these completed.

Download the Silk Companion II Icon Pack

Last week I showed how to implement Jcrop into an application. In this tutorial – which also pulls from my experiences developing GetSimple – I implement the jQuery plugin Uploadify.

In this tutorial, we create a simple file upload script that also displays an unordered list of the files in the upload directory. The list of files refreshes via an ajax call every time Uploadify processes a queue.

Demo

View the demo or download the files

The Basic HTML

<h2>Uploadify Application Demo <span id="loader"><img src="img/loading.gif" alt="Loading..." /></span></h2>
<div id="sidebar">
	<!-- form to be replaced by uploadify -->
	<form id="mainftp" action="upload.php" method="post" enctype="multipart/form-data">
		<p><input type="file" name="file" id="file" /></p>
		<p><input type="submit" name="submit" value="Upload" /></p>
	</form>
</div>

<!-- whole div to be refreshed once uploadify is finished -->
<div id="allfiles" >
	<?php
		//list all files via function file included up top
		$handle = @opendir($src_folder) or die("Unable to open $src_folder");
		ListDir($handle,$src_folder);
	?>
</div>

The PHP

//folder where the files are stored at
//you may need to chmod this folder to 775 or 777 for it to work
$src_folder = 'files/';

//file that includes the function to list all files in ul
include("inc/file_list.php");

//if javascript is disabled, the ftp will still work
if (isset($_FILES["file"])) {
	if ($_FILES["file"]["error"] > 0) {
	  $error = 'Error Uploading!';
	} else {
    $count = '1';
    $file_loc = $path . $_FILES["file"]["name"];
    $base = $_FILES["file"]["name"];
    while ( file_exists($file_loc) ) {
		$file_loc = $path . $count.'-'. $_FILES["file"]["name"];
		$base = $count.'-'. $_FILES["file"]["name"];
		$count++;
	}
    move_uploaded_file($_FILES["file"]["tmp_name"], $file_loc);
	}
}

The jQuery

$('#mainftp').uploadify({
	'uploader' : 'js/uploadify/uploadify.swf',
	'script' : 'js/uploadify/uploadify.php',
	'multi' : true,
	'auto' : true,
	'height' : '32',
	'width' : '250',
	'buttonImg' : 'img/browse.png',
	'cancelImg' : 'img/cancel.png',
	'folder' : 'files/',
	onProgress: function() {
		$('#loader').show();
	},
	onAllComplete: function() {
		$('#loader').hide();
		$('#allfiles').load(location.href+" #allfiles>*","");
	}
});

Notes about this javascript:

• Uploadify was unzipped directly from the download on their site. To upgrade, simply replace the js/uploadify/ folder with the newer version.
• height and width are for the respective dimentions of your custom button image – the demo’s being in img/browse.png
• folder is the location where the files will be uploaded to. This is also the folder that should be listed on line #3 of the PHP code above in the $src_folder variable.
• $(’#loader’).show(); and $(’#loader’).hide(); start and stop the loading gif that many applications use now to show that something is being uploaded/processed.
• $(’#allfiles’).load(location.href+” #allfiles>*”,”"); – replaces the whole div with the id of allfiles with and updated listing with the newly uploaded files in it

When creating the ‘image control panel’ for the latest version of GetSimple, I decided to integrate the wonderful Jcrop jQuery plugin into it. Amazingly, there are very few tutorials online that show the full extent of how to use Jcrop in real world situations. The only one I found that was of use was TalkInCode’s tutorial. I did start out using that example’s ImageManipulation class, but changed it slightly so that after submission, you are brought back to the original page instead of being shown the thumbnail.

Demo & Features

View the Demo or download the files.

Some of the more unique features of this demo are:

• The aspectRatio changes to 1:1 when ctrl-Q or command-Q is pressed
• The dimensions of the selected area are shown in an interesting way
• Stats on the thumbnail and the current image are displayed

The Basic HTML

The demo/download has some extra code for displaying the image stats & linking of the css, js and class files.

<!-- image for Jcrop -->
<img src="<?php echo $src_folder . $src; ?>" id="cropbox" />

<!-- selection dimentions -->
<div id="handw" class="toggle" >Selection Dimentions<br /><span id="picw"></span> x <span id="pich"></span></div>

<!-- form that Jcrop fills in -->
<form id="jcropform" action="image.php?i=<?php echo $src; ?>" method="post" onsubmit="return checkCoords();">
  <input type="hidden" id="x" name="x" />
  <input type="hidden" id="y" name="y" />
  <input type="hidden" id="w" name="w" />
  <input type="hidden" id="h" name="h" />
  <input type="submit" class="submit" value="Create Thumbnail" />
    <span class="small" ><em>ctrl-Q</em> or <em>command-Q</em> for square</span>
</form>

The PHP

//the name of the passed image
//example would be:   http://myapplication.com/image.php?i=photo.jpg
$src = $_GET['i'];

//folder where the images are
$src_folder = 'images/';

//folder where the thumbnails will be saved to
//you may need to chmod 775 or 777 this folder
$thumb_folder = 'images/thumbnails/'; 

if ($_SERVER['REQUEST_METHOD'] == 'POST'){

	require('inc/imagemanipulation.php');

	$objImage = new ImageManipulation($src_folder . $src);
	if ( $objImage->imageok ) {
		$objImage->setCrop($_POST['x'], $_POST['y'], $_POST['w'], $_POST['h']);
		$objImage->save($thumb_folder . 'thumbnail.' .$src);
	} else {
		echo 'Error!';
	}
}

The jQuery

function updateCoords(c) {
	$('#handw').show();
  $('#x').val(c.x);
  $('#y').val(c.y);
  $('#w').val(c.w);
  $('#h').val(c.h);
  $('#pich').html(c.h);
  $('#picw').html(c.w);
};

function checkCoords()
{
  if (parseInt($('#x').val())) return true;
  alert('Please select a crop region then press submit.');
  return false;
};

jQuery(document).ready(function() { 

	$(window).load(function(){
	var api = $.Jcrop('#cropbox',{
    onChange: updateCoords,
    onSelect: updateCoords,
    boxWidth: 500,
    boxHeight: 500
  });
  var isCtrl = false;
	$(document).keyup(function (e) {
		api.setOptions({ aspectRatio: 0 });
		api.focus();
		if(e.which == 17) isCtrl=false;
	}).keydown(function (e) {
		if(e.which == 17) isCtrl=true;
		if(e.which == 81 && isCtrl == true) {
			api.setOptions({ aspectRatio: 1 });
			api.focus();
		}
	});
});

});

I haven’t posted here for a while because I’ve been working on a project called GetSimple. GetSimple is an XML based lite Content Management System. To go along with it’s best-in-class user interface, we have loaded it with features that every website needs, but with nothing it doesn’t. GetSimple is truly the simplest way to manage a small-business website.

Check out the site, download it and check it out! It’s taken 7 months of work to get to this point, and I’m extremely proud of it.

Main Features

1. Fast as XML
   We don’t use mySQL to store our information, but instead depend on the speed and accuracy of XML. By utilizing XML, we are able stay away from introducing an extra layer of slowness and complexity associated with connecting to a mySQL database. Because GetSimple was built specifically for the small-site market, we feel this is the absolutely best option for data storage.

2. You can “Undo” Almost Everything
   This feature was based off an eye-opening AListApart article explaining how warning messages never work as planned. Because of this, we’ve included “undo” into almost every action you can take on the site, giving you peace-of-mind for when you make those inevitable stupid mistakes.

3. Easy to Learn UI
   The top priority when designing our user-interface was to make it the best in it’s class. We had the luxury of trying and testing all the competing management systems before designing ours, so we took the best out of each one – then refined it.

4. Simple Installation
   The total time in setting up a website took a total of 5 minutes, from starting the FTP to finishing the setup procedure.

5. Simple Theme Customization
   We have a codex that shows which functions are available for theme customization. Our goal was not to bloat our software with hundreds of little-used theme functions, but to offer more than enough to allow for a fully customized theme.

6. Designed For the Small-Site Market
   This is one of the reasons GetSimple uses XML rather than a robust database such as mySQL. For most small businesses, their only real need is to be able to easily update their site without the need of a ton of extraneous rarely used features. GetSimple’s goal is to manage small websites efficiently and effectively.

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.

Plugins I Use

• Register Plus
• New User Email Setup
• User Photo

Plugins I Tested (but came up short)

• 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.

Plugin I Use

• Customize Your Community

Plugins I Tested (but came up short)

• 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.

Plugins I Use

• Custom Author Permalink
• Show authors without posts

Plugins I Tested (but came up short)

• 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.

Plugins I Use

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

Plugins I Tested (but came up short)

• 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.