If you’ve come to this site by way of Twitter or Facebook, you may have noticed that the short link for all of these posts isn’t your typical URL.  I recently purchased snv.me to shorten all of the links to my blog posts and site, and (after some extensive research) found a way to hook it into my site using bit.ly’s pro service (now open to everyone!)

Find a Domain

You’d think this would be the easy part, but you may be mistaken.  Finding a good top-level domain (TLD) that  matches your current site may or may not be difficult, but it depends on where you’re willing to look.  Namecheap has the following extensions: ws, ca, org.uk, in, cc, de, bz, tv, eu, nu, me, us, and co.  All of these two letter domains work fantastic for shortened URLs.  I chose SNV.ME because it has a nice ring, but you may find something that fits your taste.

If you’re looking for something more exotic, domai.nr can look outside of the US/EU to find TLD’s that may work.  Keep in mind some of them may have additional costs and/or restrictions.

Bit.ly

At one point, Bit.ly charged for their pro service. Now, anyone can take advantage of the power of the bit.ly URL shortener with whatever domain you want – and it’s a fairly easy set-up process.

1. Create an account / log in to bit.ly
2. Click on “Settings” under the drop-down
3. Under “Custom Short Domain” click on the “Add a Custom Short Domain” link
4. The system will give you instructions on how to add bit.ly’s IP address to your domain.
5. Log in to your domain registrar and click on your DNS settings (this will differ depending on who you’ve registered with).
6. Add an A record for the IP address with your short domain.

Inside WordPress

Once that’s done, you can install the Bit.ly Shortlinks plugin.  This will allow you to manage everything automatically through WordPress.  However, there is a small bit of core-file editing to do (nothing major).  Edit your wp-config.php and paste in the following code:

<pre>/**
 * Settings for Bit.ly Shortlinks Plugin
 * http://yoast.com/wordpress/bitly-shortlinks/
 **/
define('BITLY_USERNAME', 'BIT.LY-USERNAME');
define('BITLY_APIKEY', 'API-KEY');</pre>

Your API key can be gotten by heading back to bit.ly and clicking on the settings tab – it’ll be midway down the page.

Now, when you create a new post, you can click the “get shortlink” button and Voila!  You can access your new shortlink and paste it wherever you wish.

Every post on this blog has a “featured image” – the last few have been screenshots of my blog for the various tutorials I’ve been writing or a photo of the BlogWorld banner to talk about my speaking acceptance, but the one thing that always bothered me was that any time you used a featured image it wouldn’t show up (by default) in your theme or RSS feed.  Featured images make inserting graphics dummy-proof; the size is set automatically and all you have to do is hit upload – it takes care of all of the re-sizing for you.

Setting Up Featured Images

For those of you who do not use featured images in your site, it’s fairly straight-forward.  A few simple lines of code in your functions.php file and you’ll see the new option added to your writing screen:

add_theme_support( 'post-thumbnails' );
add_image_size( 'blog-thumbnail', 290, 133, true ); // Permalink thumbnail size
add_image_size( 'single-thumbnail', 610, 263, true ); // Permalink thumbnail size
add_image_size( 'rss-thumbnail', 590, 254, true ); // Permalink thumbnail size

These sizes are what I use for my own blog.  There’s three custom image sizes set: one for the blogroll page (two column), one for the single article or portfolio entry, and one that’s a little smaller for my RSS-driven newsletter (more on that in a bit).

Inserting a Featured Image Into a Post

The concept remains the same no matter what page template you’re working on, but my single.php page contains this code:

<span class="single-thumbnail">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'single-thumbnail'); } else { ?>
<img src="<?php bloginfo('template_directory'); ?>/images/large-default.jpg" />
<?php } ?>
</span>

Now, what I’ve done here is fairly complex looking, but it’s actually simple to understand.  The IF statement checks to see if a featured thumbnail has been set.  If so, it displays the predetermined size (in this case, single-thumbnail).  If not, it falls back to a default image and displays it instead.  The span tag allows even the default image to be styled as I want it to (on this blog, it’s a 10px solid stroke).

Drop this in anywhere between your IF_POSTS and ENDIF tags, and you should be good to go.

Inserting a Featured Image Into an RSS Feed

Unfortunately, unlike the template, there’s not a file you can edit to add things to your RSS feed.  You have to do it via your functions.php file since editing core files is against best practices.  However, it’s fairly straightforward:

function featuredtoRSS($content) {
global $post;
if ( has_post_thumbnail( $post->ID ) ){
$content = '' . get_the_post_thumbnail( $post->ID, 'rss-thumbnail', array( 'style' => 'margin:0; border: 10px solid #202020' ) ) . '' . $content;
}
return $content;
}

add_filter('the_excerpt_rss', 'featuredtoRSS');
add_filter('the_content_feed', 'featuredtoRSS');

This creates a new function ‘featuredtoRSS’ and adds it to the $content variable defined in $post by WordPress.  In other words, it appends your featured thumbnail onto already created content, appending it to the end of “the_excerpt_rss” and “the_content_feed” rss tags. Now, if you refresh your feed, you’ll see your nice thumbnails showing up for all to see (and it keeps you from having to actually insert photos into your site).

“But Mitch, I Have Lots of Images Already – Do I Have To Reload Them All To Get The New Sizes?”

No!  That’s the joy of plugins.  Download and install Viper007Bond’s “Regenerate Thumbnails” plugin and run the script.  It’ll take a few minutes if you have a lot of photos, but it will create photos for every size imaginable (or at least defined in your functions.php file)

Learn More About Regenerate Thumbnails

Yesterday we finished our portfolio, built with a custom post type, three taxonomies, and some custom field information that we can use to display lots of data about our pieces.  Today is a bonus; we’ve got all these really cool taxonomies, but no way to really browse the portfolio based on a specific term.

• Create the Post Type (done yesterday)
• Create The Taxonomies (Color Scheme [tag based], Work Done, WordPress Functionality Used) (done yesterday)
• Create Archive / Single pages for post type
• Create Meta Box
• Assign Meta Box Data to Single Page
• Assign Taxonomy Data to Archive Page
• Add Taxonomy Title to Fallback Archives

Once this is done, your portfolio will be browsable, functional, and look pretty awesome too!

Adding Taxonomy Data to the Archive Pages

When you visit a single portfolio entry, you’ll remember now we have all of that information on the right side.  We want to do something similar for the main archive page, and all subsequent taxonomy archive pages, but showing all of the options to choose from.

There’s three taxonomies, but what fun is it to just show a bulleted list for every taxonomy?  Let’s turn one of them into a drop-down menu.

function get_terms_dropdown($taxonomies, $args){
$myterms = get_terms($taxonomies, $args);
$output ="<select name='wordpress_functionality'>";
$output .="<option value='#'> </option>";
foreach($myterms as $term){
$root_url = get_bloginfo('url');
$term_taxonomy=$term->taxonomy;
$term_slug=$term->slug;
$term_name =$term->name;
$link = $term_slug;
$output .="<option value='".$link."'>".$term_name."</option>";
}
$output .="</select>";
return $output;
}

Make sure to change the value to match the one you want to showcase.

Next, we’ll head over to sidebar.php.  Drop this into your sidebar:

<!--portfolio archive widgets-->
<?php if ( 'portfolio' == get_post_type() && is_archive() ) { ?>
<li class="widget">
<h4 class="widgettitle">Browse Portfolio</h4>
<h5>Work Done</h5>
<ul><?php wp_list_categories('taxonomy=work_done&title_li='); ?></ul>
<h5>WordPress Functionality</h5>
<form action="<?php bloginfo('url'); ?>" method="get">
<?php
$taxonomies = array('wordpress_functionality');
$args = array('orderby'=>'name','hide_empty'=>true);
$select = get_terms_dropdown($taxonomies, $args);

$select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select);
echo $select;
?>
<noscript><div><input type="submit" value="Go" /></div></noscript>
</form>
<h5>By Color:</h5>
<ul><?php wp_list_categories('taxonomy=color_scheme&title_li='); ?></ul>
</li>
<?php } ?>

There are three sections: the Work Done section, the WordPress Functionality section (our drop-down), and Color Scheme.  I’m using wp_list_categories to pull a bulleted list for each of the taxonomies, and the form in the middle is the drop down for the functionality section.  By wrapping it in a conditional tag we ensure it only shows up 1) on the portfolio pages and 2) only when displaying an archive.

However, we still have one problem: None of the archive templates (typically) make arrangements for custom taxonomies.  Let’s fix that.

Add Taxonomy Title to Fallback Archives

Edit your archive.php and add this in just before the <?php while (have_posts()) : the_post(); ?>  line:

<?php if( is_tax() ) {
global $wp_query;
$term = $wp_query->get_queried_object();
$title = $term->name; ?>
<h2 class="pagetitle"><?php echo $title ?></h2>
<?php } ?>

This will display your term’s name as the page title.

Wrapping It Up

And that’s it!  We’ve created our portfolio, added templates to customize it, set up the taxonomies to sort our data, and provided a means to display that data on both the single and archive portfolio pages.  Obviously these can be tweaked to your specifications, but I’ve found a lot of utility in having the data searchable and browsable in many different ways.

Yesterday we took a look at the beginning parts of building a portfolio using WordPress.  It basically boiled down to a few parts:

• Create the Post Type (done yesterday)
• Create The Taxonomies (Color Scheme [tag based], Work Done, WordPress Functionality Used) (done yesterday)
• Create Archive / Single pages for post type
• Create Meta Box
• Assign Meta Box Data to Single Page
• Assign Taxonomy Data to Archive Page
• Add Taxonomy Title to Fallback Archives

The last post talked about creating the post type and taxonomy.  Today we’ll talk about how to create files specific to that post type, and how to store the extra “meta” information into a post so you can pull it out later.

Creating the Archive / Single Templates

With WordPress’ template system, there’s a lot of flexibility in how data is displayed.  Templates use a “fallback” system so that if one template can’t be found, it’ll simply use another, more generic template.

For example, your archive posts (tags + categories) use this order:

category-SLUG.php > category-ID.php > category.php > archive.php > index.php

If category-SLUG.php isn’t available, the more generic files get used (down to category.php, then archive.php).  Index.php is the “catch-all”. Custom post types are no exception.  By using “archive-POSTTYPE.php” you can override the default archive.php style.

The single-POSTTYPE.php file is the same way.  Whereas normally single.php would be the default view for a file, single-POSTTYPE.php can allow you to have a customized single article view for your post type.

So, why would I want to create these files?  Two reasons:

1. On my archive page, I wanted to get rid of the excerpt text and shrink down the boxes to fit the new style (since I have to have a hard-height parameter set to allow the meta information to look like it does.
2. On my single page, I wanted to remove the meta information and add buttons for ShareThis and Pinterest (since that section is very image heavy).

I could make any changes I wanted to, but once I’m done I have two files (archive-portfolio.php and single-portfolio.php) that allow me full customization on those sections.

Creating a Meta Box

A Custom Meta Box is a content piece that goes in the write screen of your posts or page section.  It allows you to fill in the blanks to store extra meta information and call that information back out later to display in a different way.

For my single portfolio articles, I wanted to use both my taxonomy data and some specialized data to showcase each site:

• Client’s Name
• Website Name
• Website URL
• Testimonial Section (if I had one)

For this, I decided to use the “More Fields” plugin.  It uses a GUI interface to create a meta box that stores custom field data.  I can then use echo statements to pull the data out later.

The Process: Meta Boxes

1. Download and install “More Fields”
2. Head to the “More Fields” settings menu
3. Create a Meta Box
4. Edit your newly created box
5. Add Input Fields
   (once you do this, you’ll see two values and an option that must be filled in: Field Name, Custom Field Name, and  Type.  Make sure you remember specifically the custom field name; you’ll need it in a bit)
6. Save & Repeat for any extra boxes you want to create

Adding the Meta Information to the Portfolio Page

I wanted my information to stand out, so instead of adding it to the portfolio page directly, I decided to add it to the sidebar instead (at the top) to attract more attention.  This posed a problem, however, as (unlike the portfolio page) the sidebar was visible on every page.

Here’s the full code, with my fix for this, and we can walk through it:

<?php if ( 'portfolio' == get_post_type() && !is_archive() ) { ?>
<li class="widget portfolioInfoWidget">
<h4 class="widgettitle">Portfolio Information</h4>
<p>Client Name: <span class="blue"><?php echo get_post_meta($post->ID, 'snv-client', true) ?></span></p>
<p>Website: <a target="_blank" class="blue" href="<?php echo get_post_meta($post->ID, 'snv-weblink', true) ?>"><?php echo get_post_meta($post->ID, 'snv-website', true) ?></a></p>
<p>Work Done: <?php echo get_the_term_list($post->ID, 'work_done', '', ', ', ''); ?></p>
<p>Project Status: <span class="blue"><?php echo get_post_meta($post->ID, 'snv-status', true) ?></span></p>
<?php if ( get_post_meta($post->ID, 'snv-testimonial', true) ) : ?>
<p>From The Client:<br />
<em><?php echo get_post_meta($post->ID, 'snv-testimonial', true) ?></em></p>
<?php endif; ?>

</li>

<li class="widget portfolioInfoWidget">
<h4 class="widgettitle">Color Palette</h4>
<?php echo get_the_term_list($post->ID, 'color_scheme', '', ', ', ''); ?>
</li>

<li class="widget portfolioInfoWidget">
<h4 class="widgettitle">WordPress Functionality</h4>
<?php echo get_the_term_list($post->ID, 'wordpress_functionality', '', '<br />', ''); ?>
</li>

<?php } ?>

Here are the important parts.  Line 1 is a conditional statement that tells WordPress to only display this piece of code if two conditions are met: 1) it’s the portfolio post type and 2) if it’s NOT the archive page [hence the bang symbol].  Anything with <?php echo… ?> is what we use to display the custom meta information we stored earlier.  Simply replace the variable (<?php echo get_post_meta($post->ID, ‘VARIABLE’, true) ?>) with your custom field key from earlier.  Line 6 shows a comma separated list of the custom taxonomy terms.

It’s also worth noting line 8.  It uses another conditional tag to check to see if a value has any information in it (snv-testimonial) and only displays the information if it isn’t null.

Where We Stand

So far we’ve created our post type and taxonomies, created custom archive + single pages for them, added our meta information, and displayed that information on the sidebar.  We are technically finished, as once you get your information in you could start viewing the portfolio page and seeing your newly created templates at work.  However, our taxonomy page is a little… lacking.  It has no title and no way to sort through all those nice taxonomy pages we created.  And we don’t just want endless lists of information; we want to store the longer ones in a drop-down for ease of viewing.  Plus, our taxonomy page doesn’t even have a title.

That’s where we’ll pick it up next time.

When I created the new version of this site, one of the main areas I wanted to focus on was the portfolio.  I’d had a really… underwhelming one that was powered by ShrinkTheWeb who (recently) decided to charge for the services I was needing.  I took that as a good sign that I should get my new site up quickly, but thought about the best way to really go about structuring it.  I immediately knew that a Custom Post Type was the best way to build a portfolio in WordPress, but I didn’t want to stop there; I wanted a portfolio that was just as functional as it was nice looking.

Now that it’s finally complete, I wanted to share with you guys the process I used to create a portfolio in WordPress; in hopes you could take it and (like all good developers) make it your own.

The process boils down into X points:

• Create the Post Type
• Create The Taxonomies (Color Scheme [tag based], Work Done, WordPress Functionality Used)
• Create Archive / Single pages for post type
• Create Meta Box
• Assign Meta Box Data to Single Page
• Assign Taxonomy Data to Archive Page
• Add Taxonomy Title to Fallback Archives

I’ll go over all of them in detail, but I thought it was worth an overview to show you the steps I took to get from point A to point B.

Creating The Post Type

Nothing really special here; if you’ve ever created a post type before this is just your run-of-the-mill custom post.  If you  haven’t, what this does is create a separate type of content (think pages or posts) that you can add data to, then call back out when you need it.  Luckily WordPress has done a lot of the heavy lifting, so a few lines of code will get us everything we need to build our WordPress portfolio.

(note: I’m using Themergency’s Custom Post Type Generator & Taxonomy Generator for the  below code; make sure that if you use a generator you take the time to learn the why, and not just copy/paste it.  I use it to save time, not to do my job for me after all.)

add_action( 'init', 'register_cpt_portfolio' );

function register_cpt_portfolio() {

$labels = array(
'name' => _x( 'Portfolio', 'portfolio' ),
'singular_name' => _x( 'Portfolio', 'portfolio' ),
'add_new' => _x( 'Add New', 'portfolio' ),
'add_new_item' => _x( 'Add New Entry', 'portfolio' ),
'edit_item' => _x( 'Edit Portfolio Entry', 'portfolio' ),
'new_item' => _x( 'New Portfolio Entry', 'portfolio' ),
'view_item' => _x( 'View Portfolio', 'portfolio' ),
'search_items' => _x( 'Search Portfolio Entries', 'portfolio' ),
'not_found' => _x( 'No entries found', 'portfolio' ),
'not_found_in_trash' => _x( 'No entries found in Trash', 'portfolio' ),
'parent_item_colon' => _x( 'Parent Portfolio:', 'portfolio' ),
'menu_name' => _x( 'Portfolio', 'portfolio' ),
);

$args = array(
'labels' => $labels,
'hierarchical' => false,
'description' => 'Portfolio post type generated for studionashvegas.',
'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'custom-fields' ),

'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'menu_position' => 5,

'show_in_nav_menus' => true,
'publicly_queryable' => true,
'exclude_from_search' => false,
'has_archive' => true,
'query_var' => true,
'can_export' => true,
'rewrite' => true,
'capability_type' => 'post'
);

register_post_type( 'portfolio', $args );
}

I’ve set it up as a page structure since there will be no “child pages”.  Otherwise, it’s fairly standard (able to be queried, exported, has rewrite rules, etc)

Setting up the Taxonomies

Once that’s done, we can focus on the taxonomies.  I’ve chosen three ways I want to sort my portfolio data: by the Work I’ve Done, specific WordPress functionality I’ve used, and the colors used in the design.  The colors will be defined as tags; the work and functionality defined as a “category” structure.

add_action( 'init', 'register_taxonomy_work_done' );

function register_taxonomy_work_done() {

$labels = array(
'name' => _x( 'Work Done', 'work done' ),
'singular_name' => _x( 'Work Done', 'work done' ),
'search_items' => _x( 'Search Work Done', 'work done' ),
'popular_items' => _x( 'Popular Work Done', 'work done' ),
'all_items' => _x( 'All Work Done', 'work done' ),
'parent_item' => _x( 'Parent Work Done', 'work done' ),
'parent_item_colon' => _x( 'Parent Work Done:', 'work done' ),
'edit_item' => _x( 'Edit Work Done', 'work done' ),
'update_item' => _x( 'Update Work Done', 'work done' ),
'add_new_item' => _x( 'Add New Work Done', 'work done' ),
'new_item_name' => _x( 'New Work Done Name', 'work done' ),
'separate_items_with_commas' => _x( 'Separate work done with commas', 'work done' ),
'add_or_remove_items' => _x( 'Add or remove work done', 'work done' ),
'choose_from_most_used' => _x( 'Choose from the most used work done', 'work done' ),
'menu_name' => _x( 'Work Done', 'work done' ),
);

$args = array(
'labels' => $labels,
'public' => true,
'show_in_nav_menus' => true,
'show_ui' => true,
'show_tagcloud' => true,
'hierarchical' => true,

'rewrite' => true,
'query_var' => true
);

register_taxonomy( 'work_done', array('portfolio'), $args );
}

add_action( 'init', 'register_taxonomy_color_scheme' );

function register_taxonomy_color_scheme() {

$labels = array(
'name' => _x( 'Color Schemes', 'color scheme' ),
'singular_name' => _x( 'Color Scheme', 'color scheme' ),
'search_items' => _x( 'Search Color Schemes', 'color scheme' ),
'popular_items' => _x( 'Popular Color Schemes', 'color scheme' ),
'all_items' => _x( 'All Color Schemes', 'color scheme' ),
'parent_item' => _x( 'Parent Color Scheme', 'color scheme' ),
'parent_item_colon' => _x( 'Parent Color Scheme:', 'color scheme' ),
'edit_item' => _x( 'Edit Color Scheme', 'color scheme' ),
'update_item' => _x( 'Update Color Scheme', 'color scheme' ),
'add_new_item' => _x( 'Add New Color Scheme', 'color scheme' ),
'new_item_name' => _x( 'New Color Scheme Name', 'color scheme' ),
'separate_items_with_commas' => _x( 'Separate color schemes with commas', 'color scheme' ),
'add_or_remove_items' => _x( 'Add or remove color schemes', 'color scheme' ),
'choose_from_most_used' => _x( 'Choose from the most used color schemes', 'color scheme' ),
'menu_name' => _x( 'Color Schemes', 'color scheme' ),
);

$args = array(
'labels' => $labels,
'public' => true,
'show_in_nav_menus' => true,
'show_ui' => true,
'show_tagcloud' => true,
'hierarchical' => false,

'rewrite' => true,
'query_var' => true
);

register_taxonomy( 'color_scheme', array('portfolio'), $args );
}

add_action( 'init', 'register_taxonomy_wordpress_functionality' );

function register_taxonomy_wordpress_functionality() {

$labels = array(
'name' => _x( 'WordPress Functionality', 'wordpress functionality' ),
'singular_name' => _x( 'WordPress Functionality', 'wordpress functionality' ),
'search_items' => _x( 'Search WordPress Functionality', 'wordpress functionality' ),
'popular_items' => _x( 'Popular WordPress Functionality', 'wordpress functionality' ),
'all_items' => _x( 'All WordPress Functionality', 'wordpress functionality' ),
'parent_item' => _x( 'Parent WordPress Functionality', 'wordpress functionality' ),
'parent_item_colon' => _x( 'Parent WordPress Functionality:', 'wordpress functionality' ),
'edit_item' => _x( 'Edit WordPress Functionality', 'wordpress functionality' ),
'update_item' => _x( 'Update WordPress Functionality', 'wordpress functionality' ),
'add_new_item' => _x( 'Add New WordPress Functionality', 'wordpress functionality' ),
'new_item_name' => _x( 'New WordPress Functionality Name', 'wordpress functionality' ),
'separate_items_with_commas' => _x( 'Separate wordpress functionality with commas', 'wordpress functionality' ),
'add_or_remove_items' => _x( 'Add or remove wordpress functionality', 'wordpress functionality' ),
'choose_from_most_used' => _x( 'Choose from the most used wordpress functionality', 'wordpress functionality' ),
'menu_name' => _x( 'WordPress Functionality', 'wordpress functionality' ),
);

$args = array(
'labels' => $labels,
'public' => true,
'show_in_nav_menus' => true,
'show_ui' => true,
'show_tagcloud' => true,
'hierarchical' => true,

'rewrite' => true,
'query_var' => true
);

register_taxonomy( 'wordpress_functionality', array('portfolio'), $args );
}

Once that’s done, you should see your new entry below “posts” on the left menu, with your three taxonomies underneath.  The first step is complete.  I’ll go more into detail on the specific templates used, as well as sidebar content that changes whether you’re in the portfolio or not, and even between single portfolio entries and their archive pages.  Our WordPress portfolio is well on its way!

So you’ve gotten your new website up and ready to go – and you’re chomping at the bit to add some delicious content.  But don’t jump the gun just yet – there’s a few things you need to do before you start releasing your new site to the masses.

1. Change your Permalinks

Right now when people try to view your blog all they see is your URL and a string of numbers – hardly appealing to your readers, or to the search engines.  It’s dead simple to change them.  Just go into your Settings > Permalinks page and either select one of the options or enter your own.  I prefer “category/postname” but everyone has their own preferred method.

2. Change your Admin Password

You DID use a different admin account other than “admin” right?  If you use admin as your username, you are giving hackers 50% of the information they need to log into your site.  Do yourself a favor: use a different username and pick a great password.  And change it often.  Already created that “admin” account?  Simply create a new one (NOT named admin), give it administrator privileges, and delete your admin account.  You can migrate your posts over to the new user in one go.

3. Rename your Default Category

Uncategorized is not a category – it’s a sign that you don’t care enough to sort your content.  Do yourself a favor and rename that to whatever you want (news, personal, etc.).  Make sure it’s relevant to the topic at hand.  If you’ve already posted into the category, no problem!  All the changes are retroactive, so anything new will be added to the right category automatically, and any old posts will be transferred over.  Simply go to Posts > Categories and edit the category you choose.  Make sure to edit both the category name and the slug (the url base for that category).

As a bonus tip, if you want  a cool way to showcase some content on your category archives, you can add <?php echo category_description(); ?> to your archive pages – then you can add descriptions to further focus your SEO and give your readers an intro to each category.

4. Change your Title / Description

I  can’t tell you how many RSS feeds I visit that have “Just Another WordPress Blog” as their description – or even worse, nothing!  Make sure it’s relevant to your topic.  You can change it under Settings > General.

5. Add In Some Fun Plugins

• Livefyre – Social Commenting System
• All In One SEO / Yoast SEO – for… uh… SEO
• Google Analyticator – Google Analytics
• Woopra – Woopra Analytics
• Digg Digg / SexyBookmarks – social sharing
• Google XML Sitemaps – creates a crawlable sitemap for Google
• Shadowbox JS – allows javascript click-to-view-larger-image capabilities
• W3 Total Cache – caches site and allows for faster load times
• WP Touch – mobile optimized site

Many of us are guilty of running multiple blogs – we have personal blogs, work blogs, and even blogs for our pets.  If you’re like me, however, you still like to show the different sides of yourself around your different sites.  WordPress’ built in RSS Widget does a great job at bringing external feeds into your site, but what if you want a little more control?  And what if you don’t want to constrain the feed to a widget, but give it a spot of prominence in a page template?  Well, that’s where SimplePie comes in – and the best part: it’s built into WordPress.

SimplePie is a very simple (hence the name) implementation of a php script used to scrape (fetch) a feed and display its contents.

Below is a self-made modification of the RSS sample given on the codex; this is a simple start, but it allows you to modify it like a typical WordPress loop (and structures it very similarly):

<?php if(function_exists(‘fetch_feed’)) {
include_once(ABSPATH.WPINC.’/feed.php’);
$feed = fetch_feed(‘#’); // Replace the hash mark with your feed URL
$limit = $feed->get_item_quantity(3); // specify number of items to show
$items = $feed->get_items(0, $limit); // create an array of items
}
if ($limit == 0) echo ‘<div>The feed is either empty or unavailable.</div>’; // Message to show if 0 items in feed
else foreach ($items as $item) : ?>
<div class=”post”>
<a class=”rsswidget” href=”<?php echo $item->get_permalink(); ?>”
title=”<?php echo $item->get_date(‘F j Y @ g:i a’); ?>”><h2><?php echo $item->get_title(); ?></h2></a>
<p><?php echo $item->get_date(‘F j Y’); ?></p>
<div class=”entry”>
<?php echo substr($item->get_description(), 0, 100); ?> // change 100 to number of characters to show
<a class=”fullpost” href=”<?php echo $item->get_permalink(); ?>”>read more</a>
</div>
</div>
<?php endforeach; ?>

I’ve been diving into WordPress’ new post-formats lately, and was able to quickly implement some of the new features into the site.  I’ve really taken hold of two post formats: statuses (like a facebook status or a tweet) and links (to non-studionashvegas news, mostly from the WordPress world).  But, I got to thinking – these statuses are great, but they’re taking away from blog content.  I’d love to use them, but with every status or link I post I take off one post from my blog archive – the default setting is 10, and that’s not much in terms of real estate for blog posts.

I wondered if there was a way to manually tick off a counter when a standard post was used, but to skip the counter when a non-standard post format was used – that way there would always be 10 standard posts, but I could intersperse other content in without sacrificing a blog post on the front page.

My search took me to DigWP and an article they wrote a few years ago. In it, they talk of using a counter variable and adding one to it when the post is over:

<?php $i = 1; while (have_posts() && $i < 6) : the_post(); ?>
<h1><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h1>
<p>?php the_time(); ?></p>
<?php the_content(); ?>
<p><?php the_tags(); ?></p>
<?php $i++; endwhile; ?>
…other stuff…
<?php endif; ?>

I’ve hit the high points in bold.  Basically they create a counter variable, set it to 1, and then require it to be less than a number (6 here).  Once the post has run, it ticks the counter, then heads back to loop around again.  If it’s at 6, it stops before it runs.  Fair enough – that does it.

Next I turn to Lisa Sabin-Wilson’s reference on post formats (fantastic resource, by the way).  It uses the “has_post_format” tag to check for specific post formats.  Using that template, plus my own loop, I figured out how to do it.  Be wary, though, this isn’t for the non-code literate; know your code or at least back up your stuff before you do this (you’ve been warned).

Step 1: Define our Post Formats

add_theme_support( ‘post-formats’, array( ‘link’, ‘status’ ) );

The “add_theme_support” tag is used with the post-formats variable.  I only want two types (link and status) but if I need to I can always add more later.

Step 2: Edit our Loop

This is where things get tricky.  I’m going to paste my loop in its entirety and walk you through it (keep in mind this is written in HTML5-ish code):

<?php if (have_posts()) : ?> <?php $i = 1; while (have_posts() && $i < 11) : the_post(); ?>
<?php if ( has_post_format( ‘link’ )) { ?><div class=”clear”></div>
<article>
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<h2><?php the_title(); ?></h2>
<div class=”entry”>
<?php the_content(); ?>
</div>
<div class=”newsmeta”><a href=”<?php $key=”source”; echo get_post_meta($post->ID, $key, true); ?>”>Original Source</a></div>
</div>
</article>
<?php } elseif ( has_post_format( ‘status’)) { ?>
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<?php the_content(); ?>
</div>
<?php } else { ?><div class=”clear”></div>
<article>
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
<div class=”entry”>
<?php the_post_thumbnail( ‘blogthumb’ ); ?>
<?php the_excerpt(); ?>
<?php $i++; ?>
</div>
</div>
</article>
<?php } ?>
<?php endwhile; ?>

…other stuff…

<?php endif; ?>

Confusing yet?  I’ve broken the new stuff into two colors: the counter and the post-formats code.  The red is the same counter code used in DigWP’s code.  The lavendar/lilac/light-purple is the post-format code.  Notice how I start it off with the has_post_format tag:

<?php if ( has_post_format( ‘link’ )) { ?>

That checks to see what post format I have and displays the loop stuff accordingly.  There’s also an elseif later on that checks for the status, then a final else to display standard (or other, undefined post types) later on.  Then, it displays the normal article stuff.

The key to note is that I’ve included the $i++ under the excerpt on the “standard” articles – this ticks the counter before it returns to the top to do it all over again.

One Caveat I’ve Noticed…

The WordPress Default “Posts Per Page” option will over-ride the counter every time.  So, I ended up setting mine to 20.  I don’t plan on having more than a few “other types of posts” so this is a good number.

How I Can Improve

I’d rather hook this into the main “posts per page” option, but for right now I’m really not sure on how to do that – this will work for now, however.  And, it gives me the control I need and allows me to utilize those new post formats without sacrificing my real content.

I had a few people ask me yesterday how I was able to separate the styles on my blog into normal posts and the “asides” post – news from WordPress, etc.  It’s not hard, so I thought I would share it with you.

First off, you need to make sure that your posts have the dynamic categories that can be assigned by WordPress.  This is done by replacing:

<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>

with

<div id=”post-<?php the_ID(); ?>”>

WordPress adds in (using post_class) quite a few classes that will allow you target posts with CSS by tag, category, or even post type.  Once this is in, we find out the category name for our post and style it accordingly:

.blog .category-asides{padding: 20px !important;background: #e6e6e6 url(http://www.studionashvegas.com/wp-content/uploads/2011/02/news-bg.jpg) no-repeat bottom right;position: relative;}

I’ve given it padding, and some background edits (such as a color and background image – the WordPress logo).

Now, I don’t want people to find their way into the single article on these “asides” posts – they have the original source quoted in the story and I’m disabling the ability to click through on the title.  That means we need to change the code in the loop.

Open the index.php file and look for this statement:

<h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>

We’re going to use a conditional tag to check which category it’s in.  If it’s in our asides category (in this case, category ID #6) then we use a specific code.  Otherwise, it displays as normal:

<?php if (in_category(’6′)) { ?><h2><?php the_title(); ?></h2><?php } else { ?><h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2><?php } ?>

Notice the first part contains just the title, while the second contains a hyperlinked title.

One last thing I want to do is to display a link to the original source.  I want people to see quickly that I “reblogged” this from another site and that it’s just a new posting – not original content from me.  So, I used another conditional tag (this one goes right below
<?php the_content(); ?>):

<?php if (in_category(’6′)) { ?><div class=”newsmeta”><a href=”<?php $key=”source”; echo get_post_meta($post->ID, $key, true); ?>”>Original Source</a></div><?php } else { ?><?php } ?>

See that php code starting with $key? That’s a variable.  Basically, I’m asking WordPress to(for this loop only) assign a value to that variable.  But where am I pulling from?  Why, a custom field, of course!  This allows me to echo the “post_meta” (or custom field) labeled “source”.  In the post editor, I paste in a URL and it puts in a nice link that links to the original article.

I also gave it a bit of formatting to make it look nice:
.newsmeta{position: absolute;right: 50px;bottom: 10px;font-size: 11px;text-align: right;font-style: italic;}

.newsmeta a{font-style: italic;font-size: 10px;}

And that’s it – by separating the content you can make certain categories look and even operate
differently than other posts.

UPDATE: I managed to write this into a plugin – Facebook Like Button

Since Facebook announced a few days ago that you would be able to use its OpenGraph technology to “like” pretty much anything on the Internet, I took it upon myself to test out a few solutions for adding a “Like” button on the site.

It turned out to be fairly easy, but not as easy as just adding a plugin and doing forth (at least, it’s not yet, anyway).

Our Plan of Action:

1. Download and Install the plugin
2. Editing the core file to allow for correct width and color scheme

Step 1: Downoading the Plugin

I looked through quite a bit of plugins to find this one, and I had to get it from his website because it’s an alpha release, but the Facebook Like Widget does it cleanly and with little fuss.

Step 2: Customizing the Plugin

OK.  Editors note: normally I do not advocate editing the core of a plugin.  Why? Because when you update (and you should!) it will over-write what you did.  However, since this is an alpha release, and I’m almost positive the next changes will allow you easily do these changes, I think once or twice is ok.

You’re going to want to click into Plugins > Editor, and choose the “Facebook Like Widget” plugin from the list.

There’s literally about 20 lines of code:

<?php
/*
Plugin Name: Facebook Like Widget
Plugin URI: http://allanjosephbatac.com
Description: Add a Facebook ‘Like’ Button Widget to your post pages. Increase visitors!
Author: AJ Batac
Version: 0.1
Author URI: http://allanjosephbatac.com
*/

function add_facebook_like($the_iframe = ”)
{
    $the_perma    = rawurlencode(get_permalink());
    $the_iframe    .= ‘<div id=”facebook_like”><iframe src=”http://www.facebook.com/plugins/like.php?href=’.$the_perma.’&amp;layout=standard&amp;show-faces=true&amp;width=600&amp;action=like&amp;font=arial&amp;colorscheme=dark” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; overflow:hidden; width:600px; height:auto;”></iframe></div>’;
    return $the_iframe;
}

add_action(‘the_content’, ‘add_facebook_like’);
?>

The bold, color coded areas above show the areas you can change. The width corresponds to how wide your blog is.  if you don’t know, then just leave it at the default (450px) and you should be OK.  However, your friend’s “faces” won’t go to the edge of your content.  In yellow is the “color scheme”.  If you have a light background, choose “light”.  If you have a darker background, like my site, choose “dark”. 

That’s it – the like badge will show up at the bottom:

And will also show up on your friend’s “Recent Activity” stream:

Keep in mind, this is not the most elegant solution, but until others come, this is a great way to get it on your site quickly and with very little editing.