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.

This is the second post of Mitch Canter’s “WordPress BootCamp” series… it showcases the ins and outs of WordPress to new users, and highlights some of the more popular (and some overlooked) features that make WordPress fantastic.  You can catch all of the posts here.

I get a lot of questions on this: “What’s the difference between a category and a tag?” “How many categories should I use?” “Are tags the same as keywords? Are they meta keywords?” So I want to give you guys the 4-1-1 on what this is all about.

First of all, both categories and tags are what we refer to as a Taxonomy, which is just a fancy way of saying “This is how we sort stuff”.  The term taxonomy is important to WordPress because (aside from categories and tags) you can create other taxonomies through WordPress.  They’re there to serve one purpose – to sort your content into topics or by keyword.

Which brings me to the main differences between them:

Categories

Think of categories as general topics.  If you categorize your posts into meals you’ve eaten, places you’ve seen, and your favorite songs, it would be “Food”, “Travel”, and “Music”, respectively. You don’t want to have too many topics per blog post, but typically 2-4 is a good number.

Tags

Tags are your specific keywords.  To the aforementioned posts above, your meals could be tagged with “pepperoni pizza” and “pasta alfredo”, your travel split into “Rome, Italy” and “Paris, France”, and your music sorted by “Relient K” and “Switchfoot”.  Basically you sort the topics down into it’s least common denominators.  Once again, pick out the top 5-7 keywords in your post and use those as tags – you should be get the point across pretty easily of your post simply by looking at the tags.

On Subcategories

It’s true that you can sub-categorize your posts, but do that only if the topic is so broad that it requies a bit of funneling down.  I use “Conferences” as a category on my own blog, but I also have it broken down to specific types of conferences (WordCamps, BarCamps, BlogWorld, etc) for ease of finding later

Categories and Tags are NOT Permanent

You can change them – very easily, in fact.  By simply going to the Tags and Categories section of the Posts sub-menu in WordPress, you can log in and change all of the details, even down to the permalink that is displayed when people are looking at the archives.

Reformatting your posts into new categories and posts is easy as well – you can do it individually by editing the post, or you can check and “Bulk Edit” the posts in the All Posts sub-section and categorize as you need to.

This is the first post of Mitch Canter’s “WordPress BootCamp” series… it showcases the ins and outs of WordPress to new users, and highlights some of the more popular (and some overlooked) features that make WordPress fantastic.

If you’re new to WordPress, you may be wondering how in the world WordPress could be anything more than a simple blog.  Don’t get me wrong, WordPress does blogging well, but it’s so much more than that.  The problem is most people don’t know how to take the bare WordPress install and make it shine – not as a blog, but as a real website.

There’s one simple trick you can use: set up a static page as the front page of your site.

Step 1: Create Your Pages

You’ll want to create two pages here: Home (or Front, or whatever you want to call it) and Blog (news, articles, etc – pick your pleasure). As you create your Home page, you can add in whatever content you want.  Don’t add anything to the blog page – it’s going to just be used as a placeholder.  Remember what you’ve called them – you’ll need them in the next section.

Step 2: Set Up The Options

Once that’s done, go to your Appearance > Reading tab in the backend.  Look for the radio buttons next to “Front Page Displays” – that’s where you’ll choose “A static page” and then select them below.

And that’s it – it’s pretty simple, but it allows you to take one more step to turning a simple WordPress blog into a full blown content managed site.

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

Get. Stinking. Excited.

It’s that time again – as if BlogWorld New York wasn’t awesome enough, now I’m getting a double dose of awesomeness – west coast style.

I just got my acceptance email stating that I will be speaking at BlogWorldLA.  It’s November 3-5 at the LA Convention Center, and if it’s even HALF as awesome as New York was, it’s going to be a conference worth going to (hint: it’s going to be even better than NY, I can tell!)

I’m doing something different this trip: instead of staying in an expensive hotel, I’ve booked a room with someone else.  I used airbnb to find a private room near the convention center.  I found Shelly’s apartment, and she’s letting me crash there for the few days I’m around.  It’s just under a mile from the center, but at $55 / night, I can afford the walk (and it’s good exercise!) or take a cab (because I’m lazy!).

I’ve never done anything like room sharing before, but I’m always willing to try something new, and I’ve heard great things about airbnb, so I’m going to take a chance on it.  Shelly’s already contacted me about the reservation, so I’m pretty sure my hostess will be fantastic.

At any rate, I’ll be speaking on WordPress (as per usual) and making the most out of a WordPress blog.  I’m going to do it a bit differently though, so look to this blog for feedback on what to cover and things of that nature.

Here’s to a fantastic end to the year’s conferences with Blogworld!

(PS: If you want to attend BlogWorld, then by all means do it! – it’s worth every penny to go, and they’re discounted until September 21st!)

I’ve seen a lot of hateful comments on TechCrunch regarding their new design.  I’m going to officially go on-record and say that (from a design standpoint) I really like where they’re going with the new style.  But, beyond that, under the surface, there’s a few other things that appear to be going on (I say appear because I don’t have access to the backend system, so I can’t tell you exactly what’s going on) that are fantastic uses of new WordPress technology.  My favorite thing, however, is the use of multiple “post layouts” on their archive/index pages.

I think TechCrunch has stumbled onto something that I may use in future designs.  If you scroll down their home page, their articles are differentiated between two or three different layouts (I count two so far, other than a third that I’ll mention specifically in a minute).

Looking at the photo above, those are both in the same loop, but have completely different layouts.  I love this idea.  It gives a bit of depth to the site and allows the author to customize the article for his/her own style.

That said, it’s super easy to do something like this in your own blog.

The Code

First thing’s first – if you’re like me, you love using great plugins, so download the “More Fields” plugin and create yourself a new write panel in the options menu.  There are plenty of tutorials on how to do this, but the end result should be a write panel with a drop down menu and two options (We’ll call them layout 1 and layout 2 with values of layout1 and layout2 respectively). Your meta key can be called whatever you want – mine will be “layout” for ease of use.

Next, we’re going to split the loop up into two different pieces – one for layout1, and one for layout2  (this is a very simplified layout, mind you).  We first have to define a variable for our custom field data (handled via a handy-dandy drop down).  Then, we can use IF THEN statements to get the data based on which value is passed:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<?php $snvlayout = get_post_meta($post->ID, ‘layout’, true) ?>
<?php if ($snvlayout == “layout1″) { ?>

<!–LOOP STYLE 1 GOES HERE–>

<?php } else { ?>

<!–LOOP STYLE 2 GOES HERE–>

<?php } ?>

<?php endwhile; ?>

<div class=”navigation”>
<div class=”alignleft”><?php next_posts_link(‘&laquo; Older Entries’) ?></div>
<div class=”alignright”><?php previous_posts_link(‘Newer Entries &raquo;’) ?></div>
</div>

<?php else : ?>

<h2 class=”center”>Not Found</h2>
<p class=”center”>Sorry, but you are looking for something that isn’t here.</p>

<?php endif; ?>

Once again, this is more to show you where the new code is going – everyone’s loop styles will be different.  Combine this with Post Formats (like TechCrunch’s third style – the status update) and you can showcase all sorts of post styles – all without leaving the comfort of your post loop.

These loops also translate over to single posts, archive pages, and any other style you need.  Want a drop down menu that will control a full column vs standard page layout?  Doable with this code – and a few modifications.  The possibilities are endless!

There was a post titled (albeit linkbatingly) “Tumblr is Killing WordPress” on the Smedio blog about a week ago.  The comments have kept coming in one by one, with the majority of commenters showing their support for WordPress.  However, one comment that came up struck me as sort of telling on how the story stands thus far:

From Matthew:

I agree. But where WordPress fails in comparison to Tumblr is in ease of publishing. While I can enable WP to be Tumbl-like, I still can’t use the official iOS app to post using those post formats. The Tumblr app supports these formats with ease. While I wish I could export the content, it’s a minor issue because of the to how easily I can create said content.

And you know what? I agree. (at least with the bold statement above – the rest… eh…)

The WordPress iOS App

Let’s face it – the iOS app does a great job in getting your WordPress blog on your iDevice.  Unfortunately, that’s about all it does.  Media remains cumbersome to upload.  Images work well enough, but audio and video support is next to nonexistent – with good reason, mind you.  Tumblr has those supported at the site level, whereas WordPress needs plugins to do them effectively.  What’s left is a great app that’s lacking some pretty substantial features to really be a go-to app for on-the-go blogging.

Express

The guys over at WooThemes released Express not too long ago, and it does fill a bit of a gap by utilizing the post formats built into their themes and any theme running the WooTumblog plugin.  It still doesn’t do audio/video, but it makes the experience more seamless – images are treated as a separate post type and are allowed to be formatted as such.

It still lacks video/audio support… and it still has a hole that needs to be filled.

The Big Secret of the iOS App

Apple’s apps aren’t known for being open gateways, but WordPress has lovingly open-sourced the app that it holds.  What does that mean? If you love WordPress and iOS development, they NEED you to get in there and make the app what you want it to be.  I would venture to say that they would give you whatever help you needed (within reason) to make the iOS app shine.

With the right third party support (YouTube, for example), you could build into the app a pretty easy way to get video from your phone to WordPress.  Even hooking into WordPress’ own VideoPress would be a step in the right direction, even though the service is pay-for – the people that need it know they do, and would more than likely pay for such a great service.  Same goes for audio.

So, if you love WordPress, and are fluent in the iOS world, jump in and start working.  There’s an untapped potential that exists that will turn a good app into a fantastic one.  It’s one of the major stumbling blocks keeping quite a few tumblr fans from jumping over.

Edit: Forgot to show you guys where to go to get involved.  The iOS team has a site set up with instructions on how to get in on their Trac system to help with development. You can find it here: http://ios.wordpress.org/development/.

I love getting my hands dirty with new plugins.  I love beta-testing what I think are the up-and-coming rockstar plugins that everyone can get use out of.  And I especially love when they actually do something that’s just… well, plain awesome!

Enter Stencies.

Pretty nice, huh? All I had to do was click the Insert Stencie button in my theme, find the one I want, and drop it in.  And it adds all of the visual styles in right away.

Also, you can create (at least you will be able to) new stencies you can use over and over again.  Want a two column stencie?  Done.  Want to drop the same graphics into a post every time?  Easy.  It really works well.

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; ?>