One solution proposed on Fancybox’s Tips & Tricks page, is to apply the lightbox only to those <a> tags whose href attribute ends with .jpg, .png or .gif:

$("a[href$=.jpg],a[href$=.png],a[href$=.gif]").fancybox();

This may work for many situations, but it could have unintended consequences depending on your content, so I chose a different approach.

The lightbox I ended up going with is Colorbox, but many others exist, and this article should apply to a majority of them with minimal modification.

If you’ve read any of my other articles you know I usually prefer to avoid using plugins, especially for these simple tasks.

Once you’ve downloaded the lightbox of your choice, choose a location to place the javascript and accompanying stylesheet, in this example I’ve placed both in /js. Then place the following in functions.php. This example uses a child theme, if you’re not, you should replace get_stylesheet_directory_uri() with get_template_directory_uri().

function tgc_scripts_method() {
    wp_register_script( 'jquery.colorbox',
                        get_stylesheet_directory_uri() . '/js/jquery.colorbox-min.js',
                        array( 'jquery' ) );
    wp_enqueue_script( 'jquery.colorbox' );
}

add_action( 'wp_enqueue_scripts', 'tgc_scripts_method' );

Next you’ll need to add the relevant css and javascript to header.php, as in functions.php above, this assumes a child theme. If you’re using a parent theme, replace the stylesheet_directory parameter with template_directory in the bloginfo function.

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_directory' ); ?>/js/colorbox.css" />
<script>
    jQuery(document).ready(function () {
        jQuery('a[rel="colorbox"]').colorbox({ rel:"nofollow" });
    });
</script>

Last, we need to modify our <a> tags to include a rel attribute with the value of colorbox. We do this by adding a filter to the_content. This avoids having to update each post or modify the database. Additionally, if we change our mind on which lightbox we want to use, or how we’re invoking it, the modifications will be a lot simpler.

The regular expression we will use targets <a> tags which link to an image (.jpg, .png, or .gif) and where the link text is an <img> tag of the same image. For example:

<a href="image.jpg"><img src="image-1024x701.jpg"/></a>

Here is what you’ll need to add to functions.php

function tgc_colorbox_content_filter( $content ) {
        $url_regex = '/(<a .*href="(.*)\.(jpg|png|gif)")(.*><img .*src="\2.*\.\3".*><\/a>)/i';
        $url_replace = '$1 rel="colorbox" $4';

        return preg_replace( $url_regex, $url_replace, $content );
}

add_filter( 'the_content', 'tgc_colorbox_content_filter' );

As I’ve mentioned in previous articles, you’re strongly encouraged to tackle this using child themes.

First we begin by inspecting the current theme with Firebug. Since the navigation bar is the element we’re interested in, that’s the one we’ll inspect with Firebug. We’re interested in the layout as seen in the image below.

As it turns out, the height of the navigation bar is 43px, that gives us all the information we really need to know to move the navigation bar.

Here’s what our child theme’s style.css looks like.

/*
Theme Name: iamtgc Theme Development
Description: Child theme for the Twenty Eleven theme
Author: tgc
Template: twentyeleven
*/

@import url("../twentyeleven/style.css");

#branding { padding-top: 43px; }

#branding #searchform { padding-top: 43px; }

#access { position: absolute; top: 0; }

And here’s what our new theme looks like once it’s activated.

Once you begin populating the fields, your changes are reflected in the code window. As you may notice, the URLs you’re Pinning will need to be URL encoded.

In order to implement this code generation in WordPress, we’ll get the URL of the webpage the pin is on using

<?php echo urlencode( get_permalink() ); ?>

The URL of the image to be pinned using the post’s full sized featured image.

<?php echo urlencode( wp_get_attachment_url( get_post_thumbnail_id() ) ); ?>

And for the optional Description of the Pin, we’ll use the post’s title

<?php echo urlencode( get_the_title() ); ?>

When we put it all together, here’s what the relevant excerpt of our loop-single.php will look like. If you want to include the Pin Count along with the “Pin It” button, you can change the count-layout attribute to either horizontal or vertical.

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="entry-title"><?php the_title(); ?>
     <a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink()); ?>&media=<?php echo urlencode(wp_get_attachment_url(get_post_thumbnail_id())); ?>&description=<?php echo urlencode( get_the_title()); ?>" class="pin-it-button" count-layout="none">Pin It</a>
     <script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
</h1>

<div class="entry-meta">
<?php twentyten_posted_on(); ?>
</div><!-- .entry-meta -->

One of the most eye catching features of twentyeleven are it’s header images, but if you really want to make the theme your own, you may want to remove the stock header images in favor of your own. Today we will do just that as we continue to explore customizing twentyeleven via a child theme.

First, let’s see how twentyeleven loads it’s header images. Here is a portion of twentyeleven’s functions.php, abbreviated for brevity.

add_action( 'after_setup_theme', 'twentyeleven_setup' );

if ( ! function_exists( 'twentyeleven_setup' ) ):
...
function twentyeleven_setup() {
...
    register_default_headers( array(
        'wheel' => array(
            'url' => '%s/images/headers/wheel.jpg',
            'thumbnail_url' => '%s/images/headers/wheel-thumbnail.jpg',
            /* translators: header image description */
            'description' => __( 'Wheel', 'twentyeleven' )
        ),
...
    ) );
}
endif; // twentyeleven_setup

By looking at this, we know the headers are loaded with register_default_headers, in the twentyeleven_setup function, which is had been added to the after_theme_setup hook via add_action.

Since the twentyeleven_setup() function has other goodies we want to keep, rather than rewrite the entire function, we create our own function to unregister_default_headers, and add it to the same after_theme_setup hook with a higher priority (the default is 10) so it will run after than the parent function.

Here we edit (or create) our child theme’s functions.php

<?php
function remove_default_headers() {
        unregister_default_headers(
                array(
                        'wheel',
                        'shore',
                        'trolley',
                        'pine-cone',
                        'chessboard',
                        'lanterns',
                        'willow',
                        'hanoi'
                )
        );
}

add_action( 'after_setup_theme', 'remove_default_headers', 11 );
?>

Note: If you are uncertain of which action is best to hook into, you should refer to the Plugin API/Action Reference at the WordPress Codex.

Now, when you browse the header section in the dashboard, you should be greeted with the following

Now that all of the default headers are gone, we can edit our child theme’s functions.php to add our own header. In this example, we’ve copied our header and a thumbnail, into images/headers under the child theme’s directory.
i.e.
twentyeleven-child/images/headers/header.jpg
and
twentyeleven-child/images/headers/header-thumbnail.jpg

<?php
function remove_default_headers() {
    unregister_default_headers(
        array(
            'wheel',
            'shore',
            'trolley',
            'pine-cone',
            'chessboard',
            'lanterns',
            'willow',
            'hanoi'
        )
    );
    register_default_headers( array(
        'tgcheader' => array(
            'url' => get_stylesheet_directory_uri() . '/images/headers/header.jpg',
            'thumbnail_url' => get_stylesheet_directory_uri() . '/images/headers/header-thumbnail.jpg',
            /* translators: header image description */
            'description' => __( 'tgcheader', 'twentyeleven-child' )
        )
    ) );
}

add_action( 'after_setup_theme', 'remove_default_headers', 11 );
?>

You should also note how we’re using get_stylesheet_directory_uri() to refer to our child theme’s path, instead of %s, which would reference the parent theme’s path.

Others have pointed out viable solutions, however I wanted to stick to best practices and keep my parent theme unmodified.

Here I will explore how to add the sidebar to a twentyeleven child theme in only half a dozen lines of code.

Note: More information on creating a child theme can be found here.

We’ll begin by adding the sidebar back to your posts, by copying single.php to our child theme and modifying it.

            </div><!-- #content -->
        </div><!-- #primary -->

<?php get_footer(); ?>

Add the get_sidebar() function directly above get_footer() like so

            </div><!-- #content -->
        </div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

The same can be done for page.php if you want the sidebar to appear on your pages as well.

Now, the other tutorials I’ve seen advise you to edit twentyeleven’s functions.php and comment out the remove_twentyeleven_body_classes() function and it’s accompanying add_action(). You can certainly do so, but it goes against best practices, and you risk losing your modifications if you update twentyeleven.

In your child theme, create or modify your functions.php to contain the following.

<?php
function remove_twentyeleven_body_classes() {
    remove_filter( 'body_class', 'twentyeleven_body_classes' );
}
add_action( 'after_setup_theme', 'remove_twentyeleven_body_classes' );
?>

Here we are removing the filter that is added in twentyeleven’s functions.php, but since the child theme’s files are processed prior to the parents, simply removing the filter is not adequate and would be overridden by the parent function. As a result we need to add an action to remove the filter during the after_setup_theme action.

Save your files, and assuming it wasn’t already, activate the theme.
That’s it. Now you have your sidebar.