Back in May I had the pleasure of interviewing Andy Brett, creator of TechCrunch’s Crunchbase. If you’re unfamiliar Crunchbase it is TechCrunch’s directory of people, companies and organizations related to the tech industry. It’s maintained by the TechCrunch staff, though anyone can edit. As a result, the Crunchbase has become a valuable resource when researching a technology company.
After interviewing Brett, I thought “Why can’t Technically Philly pull this off?” While we don’t have the luxury of a Ruby programmer, we were able to pull together something similar for TP using the newly created custom taxonomy feature in WordPress. And better yet, we think it can help drive additional revenue.
Tags vs Taxonomy
If you use WordPress or any other CMS you probably have the option to “tag” stories. Different sites handle this in different ways. At Technically Philly we began with a lose tagging policy to tag all proper nouns. People, companies and places made up the majority of these tags. However, there was a problem: all of these tags were lumped together. WordPress had no way of distinguishing the name of a city from a company name. So our tag pages sucked:
A sample tag page. Click to go the actual page.
The tag page was nothing but a glorified search. It offered no context, no information. Is this a company? A person? How can I contact this person? If I entered this page via search, how do I know where I am? The user was not rewarded in anyway for clicking on the tag page.
After messing around with custom taxonomies we were able to create CrunchBase-like pages like the one below:
An example of a "people" page. Click to visit.
On the new tag page we see that Bill Green has been categorized a person. We see his picture, a brief description, his contact info and bit about his work history. We also see a timeline of TP coverage. Now if we link to this page in a story, the reader can instantly catch up on who Bill Green is and why he is important to the technology community in Philadelphia.
Here is step-by-step how we did it. I’ll warn you, I don’t know a lick of Ruby on Rails and I’m barely serviceable with PHP. But I know WordPress, HTML and CSS like I know the starting lineup of the Phillies. A true programmer would probably do this in a much more streamlined way. Ready?
1. Create your taxonomies.
There’s a few ways you can do this. If you’re familiar with WordPress, I recommend opening your functions.php file and enter in the following (replace “people” with your taxonomy name):
// Custom Taxonomies
add_action( 'init', 'create_my_taxonomies', 0 );
function create_my_taxonomies() {
register_taxonomy( 'people', 'post', array( 'hierarchical' => false, 'label' => 'People', 'query_var' => true, 'rewrite' => true ) );
}
If this scares you, use the Simple Taxonomies plugin to get the job done. Don’t mix both techniques or you could have some duplicates.
2. Install some plugins
Whether you’re savvy enough to hardcode your taxonomies or not, I still recommend the Simple Taxonomies plugin thanks to the “yoast_term_title()” function it offers. This function returns the slug of the person, company or place name of the page we’re on. So on Bill Green’s page it returns “bill-green”.
Secondly, install Rich Text Tags. This allows your taxonomy description to be edited using a WYSIWYG editor.
3. Build your tag page
One of the oft-underrated features of WordPress is its templating system. With taxonomies (and tags and categories for that matter) we can create specific template pages by following the correct naming rules .
For example we have three template files:
- taxonomy-people.php
- taxonomy-companies.php
- taxonomy-places.php
So Bill Green’s template is really the taxonomy-people.php page. Also, if you’re really ambitious you can create specific pages for each taxonomy entry. So we could give Bill his own page by creating a file named taxonomy-people-bill-green.php. However, you can likely stick to the bulleted list above and be covered.
As you build your taxonomy pages, here’s some code snippets to help you out. You’ll need some HTML and CSS chops to make your taxonomy page look pretty.
Aside from the image replacement snippet, these were culled from dozens of help threads, blog posts and other sources that I foolishly did not keep track of. If you wrote these snippets, please let me know.
Display a list of popular terms:
<?php
//list terms in a given taxonomy using wp_list_categories (also useful as a widget if using a PHP Code plugin)
$taxonomy = 'companies';
$orderby = 'name';
$show_count = 1; // 1 for yes, 0 for no
$pad_counts = 1; // 1 for yes, 0 for no
$hierarchical = 1; // 1 for yes, 0 for no
$title = '';
$number = 5;
$orderby = 'count';
$order = 'DESC';
$args = array(
'taxonomy' => $taxonomy,
'orderby' => $orderby,
'show_count' => $show_count,
'pad_counts' => $pad_counts,
'hierarchical' => $hierarchical,
'title_li' => $title,
'number' => $number,
'orderby' => $orderby,
'order' => $order,
);
?>
<ul>
<?php wp_list_categories( $args ); ?>
</ul></pre>
Display a list of random terms (great for encouraging browsing]
<?php
//display random sorted list of terms in a given taxonomy
$counter = 0;
$max = 5; //number of categories to display
$taxonomy = 'category';
$terms = get_terms($taxonomy);
shuffle ($terms);
//echo 'shuffled';
if ($terms) {
foreach($terms as $term) {
$counter++;
if ($counter <= $max) {
echo '<p><a href="' . get_category_link( $term->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $term->name ) . '" ' . '>' . $term->name.'</a></p> ';
}
}
}
?>
Show directory image
We also rely heavily on this piece of code that searches a given folder for an image that shares the name of the term. In this case it is the “directoryimages” folder. This way, we can bulk upload images.
<img src="<?php bloginfo('template_url'); ?>/directoryimages/<?php echo get_yoast_term_title();?>.jpg" onerror="ImgError(this);">
But what if you haven’t uploaded an image? You’ll see we’ve inserted a bit of javascript (ImgError) to execute if the image is not there.
For the above line of code to fully work you’ll need to insert a bit of Javascript in your header.
<!-- Fix broken images if driectory page -->
<?php if (is_tax() ) { ?>
<script type="text/javascript">
function ImgError(source){
source.src = "<?php bloginfo('template_url'); ?>/directoryimages/blank_headshot.png";
source.onerror = "";
return true;
}
</script>
With the above two snippets, WordPress will look for an image in your “directoryimages” folder. If it doesn’t find one it will insert “blank_headshot.png.” Of course you’ll have to create the “directoryimages” folder yourself. You’ll also have to upload your own replacement image.
To echo a term’s description use
<?php echo term_description( '', get_query_var( 'people' ) ); ?>
Return the name of the term to use as a header
<!-- This is the name of the person-company-etc -->
<?php
if(isset($wp_taxonomies)) {
// This is getting the friendly version of a taxonomy
// - not the hyphenated get_yoast_term_title()
$term = get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) );
if($term) {
echo '<h1 style="font-size: 40px;">'.$term->name.'</h1>';
}
// If you have a taxonomy description, let'er rip!
}
?>
<!-- end of name -->
4. Go retag all of your old posts
And here is the fun part. At TP, there are three of us so we split up our 1,000 posts and retagged each one by copy and pasting tags into the appropriate taxonomy field.
5. Redirect all of your tags
If you regularly produce content, your tag pages likely ranked well in searches. Our tag pages would sometimes outrank a company’s official web pages. However when we switched to custom taxonomies, the permalink changed. So technicallyphilly.com/tag/comcast became technicallyphilly.com/company/comcast.
Therefore we had to redirect hundred of tag pages using a 301 redirect. This isn’t as daunting as it seems. Ready?
1. Make a page that includes the following code (replace “people” with your taxonomy):
<?php wp_list_categories('taxonomy=people&style=none'); ?>
2. View the source. Highlight the entire list and copy and paste it into a text document. It should be a series of links that look like:
<div id="_mcePaste"><li><a href="http://technicallyphilly.com/people/alex-alsup" title="View all posts filed under Alex Alsup">Alex Alsup</a></li></div>
<div id="_mcePaste"><li><a href="http://technicallyphilly.com/people/alex-cohen" title="View all posts filed under Alex Cohen">Alex Cohen</a></li></div>
<div>etc...</div>
3. Find and replace “<a href=”" and make it a space
4. Find and replace “” title=”" and make it a TAB. (If you’re having trouble making a tab, open up a new text doc. Hit tab. Copy the space it makes and past it into the replace box.)
5. Copy entire text document and past in excel. Make the a and b columns REAL big and you’ll see on left you have url on right you have junk.
6. Delete the second column, the junk one.
7. Duplicate the first column into the second, you should have two lists of links.
8. Find and replace ONLY THE FIRST COLUMN. Find: “http://yourdomain.com/people/” Replace: “redirect 301 /tag/”.
9. Now copy columns a and b into a blank textpad document. You want the text to look like:
“redirect 301 /tag/abby-fretz http://technicallyphilly.com/people/abby-fretz” The number of spaces isn’t important, though keeping it clean will help manage future redirects.
10. Copy the contents of that text document into your .htaccess file.
11. Test by visiting one of your old tag pages. It should redirect to the new taxonomy page.
12. Repeat for each of your taxonomies. We had to do this process for “people” and “companies.”
Thanks to Dan Levy for helping me figure that one out.
6. Profit
This is the stage TP is in now, so no sagely advice from me. However we envision these pages being one of the benefits of a membership package.
We’re thinking about a company page with contact info, company description, who works there and other information. When packaged with our revamped jobs board, a display advertisement and event discounts we think it will be worth a few hundred dollars of a company’s marketing budget.
However, we’re still exploring options and will likely announce a plan sometime in January.
7. Share
Next up ,we’d like all of the hyperlocal sites in Philly to share the same directory page. Imagine Councilman Bill Green’s page pulling in information from local political sites and other source to deliver a complete (and independently reported) picture of a local personality.
If we make the directory page editable by anyone we could have a highly relevant but local Wikipedia that can help add context to hyperlocal news sites.
Hm. Sounds like a Knight News Challenge grant…
Sean Blanda is a journalist / entrepreneur living in Philly. Read more 
