How to add a caption to featured images

Featured images are awesome and if you’ve ever wanted to add an image above the title of your post, using a feature images is the way to go.

When adding images in your posts or pages, adding a caption is easy, but if you’ve tried to do the same with featured images, then you’re out of luck. This is problematic if you want to use images from the Creative Commons where a photo credit is requested.

Faced with this problem this morning I did a quick google search and found the following answer on Stack Overflow.

Easy peasy once this snippet of code is added to your functions.php

function the_post_thumbnail_caption() {
  global $post;

  $thumbnail_id    = get_post_thumbnail_id($post->ID);
  $thumbnail_image = get_posts(array('p' => $thumbnail_id, 'post_type' => 'attachment'));

  if ($thumbnail_image && isset($thumbnail_image[0])) {
    echo '<p class="caption">'.$thumbnail_image[0]->post_excerpt.'</p>';
  }
}

Then use the following in your single.php.

<?php if ( has_post_thumbnail() ) : 
  the_post_thumbnail( 'feature' );
  the_post_thumbnail_caption();
endif; ?>

And Voila!

Setting up Custom Content Types using Stresslimit Custom Content Types plugin

When Custom Post Types (CPT) became available with the release of WordPress 3.0 everyone was super excited about this new features and many tutorials came out explaining how to use them. These were super helpful and helped us get started and I must admit, CPT have made building WordPress sites truly pleasurable.

Some folks did point out though, that to set these up, the code needed was quite cumbersome. Of course smart folks came up with handy tools and plugins to solve this.

I was reluctant at first and didn’t think that the extra code needed was that difficult to manage, but Joey introduced me to the Stresslimit Custom Content Types plugin and I’ve been hooked on it ever since. It’s super easy to use. The plugin is designed for developers, so it doesn’t simply work out of the box, but once installed all you do is add the following to your functions.php:

sld_register_post_type( 'your-post-type' );

This new function simply extends register_post_type().

So for example, if you wanted to create a new content type called Products, you would use:

sld_register_post_type( 'product' );

It also supports the same arguments as register_post_type() so if you wanted to override the default ones, you could use something like this:

$product_args = array(
	'supports' => array( 'title', 'thumbnail' ),
	'menu_icon' => get_template_directory_uri() . '/images/admin-product.png',
	'public' => false,
);
sld_register_post_type( 'slide', $product_args );

This function works perfectly and displays a nice custom content type in our admin panel with a new icon which we’ve added to our theme file.

Things do go wrong though if you’ve omitted to upload the plugin or it gets deactivated accidentally. If that happens, you get the following error on your site:

Fatal error: Call to undefined function sld_register_post_type() in ...

As a developer, that’s not a big issue. Most of us know how to read error messages and know how to fix them, but it’s much more troubling when clients accidentally get these messages. It’s happened to me in the past and I immediately got a phone call. An easy way to avoid this is to first do a check to see if the plugin is installed, then call the function. WordPress allows you to do this easily with function_exists(). The code for our Product CPT would thus be like so:

include_once( ABSPATH . 'wp-admin/includes/plugin.php' );

if (function_exists( 'sld_register_post_type' )) {

$product_args = array(
	'supports' => array( 'title', 'thumbnail' ),
	'menu_icon' => get_template_directory_uri() . '/images/admin-product.png',
	'public' => false,
);
sld_register_post_type( 'slide', $product_args );

}

That’s it. Next time you’re working on a site needing custom content type, check it out. It makes things much easier.

Build a custom image slider using a Custom Post Type

In a previous tutorial, I showed you how one can build a custom image slider using the wp_get_attachement_image function(). This method works very well, but of course there are more than one ways to build a slider. The method of choice will depend on your functionality requirement.

The wp_get_attachement_image function() is great if you want to create a slider out of one post and multiple attachments. For example, portfolio pieces would fall in that category.
But what if instead you wanted a slider to feature multiple posts, with one image each, which would link to different pages? The slider itself would work the same way, but you’ll need to set your back-end a bit differently and use a different loop in your template.

This tutorial will show you how this can be done using a custom post type. Here’s a sneak peek at the demo site. The files used to create the theme as well as the slider snippet can be downloaded here.

Read more…

Three ways to give your WordPress site a full screen background image

New design techniques are popping up everyday and now that there are less bandwidth issues, designers have been incorporating full screen background images in their design more and more.

If you wanted to do that yourself but didn’t know how, here are a few techniques ranging from super-easy to advanced.

Super easy plugin solution

The Simple Full Screen Background Image WordPress plugin allows you to easily upload and set a full screen image as the background of your website. Once installed and activated, you’ll see in your Appearance section a new area called, Fullscreen BG Image. You can then browse for your image, upload it and insert it like you would for a blog post. Once uploaded, the plugin will do the rest and make sure that it re-sizes to fit your browser. You may need to play with the size and resolution, but using this plugin couldn’t be easier.

Read more…

Build a custom fade in fade out slideshow

In my previous blog post, I provided a step by step tutorial on how to build a custom image slider into your WordPress. This was achieve by using Nathan’s awesome slideshow plugin. Digging a bit deeper in his code and website, I discovered that he’s also included fade in fade out transition.

If you’ve downloaded the material, took a stab at the tutorial and wish to use this transition effect instead of a slider action, all you need to do is replace the jQuery function in your header with the following:

<script>
 jQuery(document).ready(function($){
	$('#slides').slides({
	preload: true,
	preloadImage: 'http://yourthemepath.com/images/loading.gif',
	effect: 'fade',
	play:5000,
	crossfade: true,
	fadeSpeed: 500,
	generatePagination: false
   });
 });
</script>

You also no longer need the next and previous arrows.

Build a custom image slider on your home page using built-in WordPress functions

Image sliders are quite popular and add a nice visual element to any website. You could use a plugin to add one to your site, but wordPress has all of the functionality built-in for you to integrate one in any theme of your liking. If you’re a theme developer, you’ll want to follow along and add this code snippets to your collection.

I recently created a site for my colleague and very good friend Barbara. You’ll see that her home page has a very simpler slider. If we ignore the header, sidebar and footer, this page is very simple. In the following tutorial, I’ll walk you through each step and show you how to integrate a slider like this.
Read more…

Custom WordPress sidebars using is_child

A common request by designers is to set up a website with a main top navigation and secondary sub nav based on the page you are on. An example of this can be found on the Out of Chaos website where once you leave the home page, the sidebar displays the different pages belonging to that section.

This can easily by done by updating your sidebar template using conditionals.
For example:

<ul>
<?php if(is_page(2) || is_child(2)) {
  wp_list_pages('child_of=2&depth=1&title_li=');
 } elseif (is_page(3) || is_child(3)) {
  wp_list_pages('child_of=3&depth=1&title_li=');
 } elseif (is_page(4) || is_child(4)) {
  wp_list_pages('child_of=4&depth=1&title_li=');
 } else (!is_page()) {
  wp_list_categories('title_li=');
}?>
</ul>

Where the # refer to the page id of your page.

Now if you run this code above, you’ll most likely get an error. This is because the is_child() function is NOT part of WordPress core. In order for the code to work we must use c.bavota’s is_child() function.

function is_child($page_id_or_slug) { 
 global $post; 
  if(!is_int($page_id_or_slug)) {
   $page = get_page_by_path($page_id_or_slug);
   $page_id_or_slug = $page->ID;
  } 
  if(is_page() && $post->post_parent == $page_id_or_slug ) {
   return true;
   } else { 
    return false; 
 }
}

Once the above code snippet is added to your function file, you can easily add as many sub navigation menus as you need.

Favourite WordPress conditional tags

Understanding conditionals is an absolute must in creating unique WordPress sites. Like its name suggests the conditional tag allows you to display content depending on a specific condition.

The best place to start when learning how conditionals can be used is with page settings.

For example if you wanted to post a message of your home page or display a specific image, the following code would be added to your template file:

<?php if(is_front_page()) {?>
	<p>This is our front page so we will do this.</p>
	<?php } else {?>
	<p>We're no longer on the front page, so we will do that instead.</p>
<?php } ?>

Display different content on your sidebar

Conditional tags also allow you to dress up your sidebar differently depending on where you are on your site. I find myself building lots of websites for clients who do not wish to modify their first level of navigation, but do have the need to modify subpages. Thus with the parent page in place, I use the following code in my sidebar to create the sidebar navigation for each section.

<ul>
<?php if(is_page(2) || $post->post_parent==2) {
	wp_list_pages('sort_column=menu_order&amp;child_of=2&amp;depth=1&amp;title_li=');
	} elseif (is_page(3) || $post->post_parent==3) {
	wp_list_pages('sort_column=menu_order&amp;child_of=3&amp;depth=1&amp;title_li=');
	} elseif (is_page(4) || $post->post_parent==4) {
	wp_list_pages('sort_column=menu_order&amp;child_of=4&amp;depth=1&amp;title_li=');
	} elseif (!is_page()) {
	wp_list_categories('title_li=');
	}?>
</ul>

The page(#) correspond to the page ID. You could also use the slug if you prefer, but don’t forget to use single quotes.

Check to see if custom field exists

Conditional tags can also be used to check for things other than being a certain page. Testing to see if a custom field exist for example can be handy:

<?php while (have_posts()) : the_post();
	$link=get_post_meta($post->ID, 'link', true);
		if($link != '') {
 		echo '<a href="'.$link.'">';
 		echo the_post_thumbnail().'</a>';
		}else {
 		the_post_thumbnail();
		}
the_content();
endwhile; ?>

A similar example would be to check to see if a featured image has been uploaded and if not display a default one.

<?php if(has_post_thumbnail()) {
 	the_post_thumbnail();
	} else {?>
 	<img src="<?php bloginfo('template_directory');?>/images/banner.gif" alt="">
<?php }?>

As you can see conditional tags are very handy. The examples above are some of my most used code snippets. Do you have any favourites?

Display random image in sidebar using Custom Post Types

I recently created a website for Vancouver’s newest Tourist Attraction, the Pink Bus Tour. Later this summer, Vancouver residents will witness the Pink Bus carrying tourists around the city. A big part of the website was to showcase the highlights of the city. These highlights are simply pages within the CMS and my goal was to randomly display a “highlight” in the sidebar.

The highlights in the sidebar were easy to make. They simply consist of an image and a link. The problem was how to pull an image and link at random AND make it easy for the staff at Vancouver Pink Bus to add new images and links once available.

Using a Custom Post Type seemed to be the easiest way to go about this. To create the custom post type, I added the following to my functions.php file:

// Custom Highlight in sidebar
   add_action('init', 'create_highlight');
     function create_highlight() {
       $highlight_args = array(
          'labels' => array(
           'name' => __( 'Highlights' ),
           'singular_name' => __( 'Highlight' ),
           'add_new' => __( 'Add New Item' ),
           'add_new_item' => __( 'Add New Highlight Item' ),
           'edit_item' => __( 'Edit Highlight Item' ),
           'new_item' => __( 'Add New Highlight Item' ),
           'view_item' => __( 'View Item' ),
           'search_items' => __( 'Search Highlight' ),
           'not_found' => __( 'No highlight items found' ),
           'not_found_in_trash' => __( 'No highlight items found in trash' )
         ),
       'public' => true,
       'show_ui' => true,
       'capability_type' => 'post',  
       'hierarchical' => false,
       'rewrite' => true,
       'menu_position' => 20,
       'supports' => array('title', 'editor')
     );
  register_post_type('highlight',$highlight_args);
}
add_filter("manage_edit-highlight_columns", "highlight_edit_columns");
add_action("manage_posts_custom_column",  "highlight_columns_display");

function highlight_edit_columns($highlight_columns){
   $highlight_columns = array(
      "cb" => "<input type=\"checkbox\" />",
      "title" => "Title",
   );
  return $highlight_columns;
}

Once this code in place, the highlights were ready to be populated. Now when a new sidebar image is needed, the folks at Vancouver Pink Bus simply upload a new polaroid image, link it to the page (made so much easier now WordPress 3.1 internal linking feature) and that’s it.

The final step is to display, at random, one of these custom post types. This was done by adding the following to my sidebar:

<h3>Highlights Include</h3>
<?php
 $loop = new WP_Query(array(
  'post_type' => 'highlight', 
  'posts_per_page' => 1, 
  'orderby'=>'rand'
 ));
?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
  <?php the_content(); ?>
<?php endwhile; ?> 

To find out more about Custom Post Types, I highly recommend Justin’s post and Devin’s Portfolio Theme. With both this tutorial and theme, you’ll be on your way to creating multiple Custom Post Types.