Starting off you will want to register the two “sidebar” widget areas in the function.php file of your theme. Something to note, the terminology of “sidebar” with respect to widget areas is really a throwback in that this was the original use of widget areas. But, like most things, it quickly was utilized to create widget areas in most any position within a page. The following code registers the widget areas:

function my_child_theme_widgets() {
	// Define the Home page widget areas
	register_sidebar( array(
		'name' => __( 'Home Widget Area - Left' ),
		'id' => 'home-widget-area-left',
		'description' => __( 'The home page left widget area' ),
		'before_widget' => '',
		'after_widget' => '',
		'before_title' => '<h2 class="widget-title">',
		'after_title' => '</h2>',
	) );
	register_sidebar( array(
		'name' => __( 'Home Widget Area - Right' ),
		'id' => 'home-widget-area-right',
		'description' => __( 'The home page right widget area' ),
		'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h2 class="widget-title">',
		'after_title' => '</h2>',
	) );
}
// Execute the widget registration function
add_action( 'widgets_init', 'my_child_theme_widgets' );

More details about the register_sidebar method can be found in the WordPress Documentation.

Next we need to ensure that the get_sidebar method is included in the page.php or template file being used for the home page. In the case of my Child Theme, the page.php file is as follows:

<?php>get_header(); ?>
<div id="container" class="one-column">
<div id="content" role="main">
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="entry-title"><?php the_title(); ?></h1>
<div class="entry-content">
						<?php the_content(); ?>
						<?php wp_link_pages( array( 'before' => '
<div class="page-link">' . __( 'Pages:' ), 'after' => '</div>
' ) ); ?>
						<?php edit_post_link( __( 'Edit' ), '<span class="edit-link">', '</span>' ); ?>
					</div>
<!-- .entry-content -->
				</div>
<!-- #post-## -->
				<?php comments_template( '', true ); ?>
<?php endwhile; ?>
</div>
<!-- #content -->
		</div>
<!-- #container -->
<?php get_sidebar( 'home' ); ?>
<?php get_footer(); ?>

You’ll notice that the call to get_sidebar is at the bottom of the page. If no parameter is specified then the standard sidebar.php file is included as a result of this call. If a name is specified, then the sidebar-name.php file will be called. For example, my call to get_sidebar(‘home’); will result in the sidebar-home.php file being included. More details on the get_sidebar method can be found in the WordPress Documentation.

We now need to define the sidebar-home.php code so the output formats the widget properly, even if no widget is assigned to the widget area defined in the function.php file. In this case, we are creating two side-by-side widget areas specifically for the home page. The following is the code from the sidebar-home.php file:

if (is_front_page())
{
?>
<div id="home-page-widget-left" class="widget-area" role="complementary">
<ul class="xoxo">
<?php dynamic_sidebar( 'home-widget-area-left' ) ?>
			</ul>
</div>
<!-- #home-page-widget .widget-area -->
<div id="home-page-widget-right" class="widget-area" role="complementary">
<ul class="xoxo">
<?php dynamic_sidebar( 'home-widget-area-right' ) ?>
			</ul>
</div>
<!-- #home-page-widget .widget-area -->
<?php } ?>

For more details on the dynamic_sidebar method refer to the WordPress Documentation.

The final parts to get all of this working is to create a static page for use as your home page. I created one called “Home”. No contents would be entered. Another static page titled “Blog” also was created with no contents.

Now, within the Admin area of WordPress, go to Settings/Reading and specify the “Front page displays” settings by selecting the “A static page” radio button and then selecting the “Home” page as the “Front Page” and the “Blog” page as the “Posts Page”. Don’t forget to save these settings.”

Finally, actually assign widgets to these areas from the “Appearance / Widgets” WordPress Admin screen. In the case of the sample No-Nonsense TwentyTen child theme, I used a text widget containing html code to define the left widget area and then the “Recent Posts” widget and a custom “Recent News” widget for the right widget area.

That’s all there is to it! Go forth and widgetize your pages!

You also may find this WordPress Documentation on customizing your sidebars of interest.

Adding a Stylesheet with function.php

In my No-Nonsense Child Theme I needed to add some IE styling. This meant that I needed a stylesheet that only applied to IE. This can be done in a couple of ways. One method is to modify the head.php file to add the stylesheet link code and the other is to use a function to insert the stylesheet link code into the rendered page. I prefer the second method as you leave the header.php file untouched.

To use the function.php file to add the stylesheet I needed to add the following within the <head> section of the page:

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" media="all"
    href="http:// ... /lte-ie7-styles.css" />
<![endif]-->

To do this I added the following code to the function.php file within my Child Theme folder:

function set_lte_ie7_css() {
	?>
<!--[if lte IE 7]>
     <link rel="stylesheet" type="text/css" media="all"
     href="<?php bloginfo( 'stylesheet_directory' ); ?>/lte-ie7-styles.css" />
<![endif]-->
<?php
}
add_action('wp_head', 'set_lte_ie7_css');

The function is pretty simple in that it just prints out the <link> HTML needed for defining the stylesheet reference. The function utilizes the bloginfo(‘stylesheet_directory’) WordPress function to define the URL path less the stylesheet name. This is the correct way to do this. In the case of a Child Theme this will point to the Child Theme folder.

The set_lte_ie7_css function is then called at the correct time, that is, within the <head> section of the page by the add_action line of code below the function. The ‘wp_head’ parameter instructs WordPress to fire the function during the building of the <head> section of the page.

Removing Parent Theme Functions

Another use of the function.php file can be to remove Parent Theme functions. To do this one would simply write a remove_action or remove_filter call. For example, the following removes the formatting that the Twenty Ten theme would use for post excerpts:

remove_filter( 'excerpt_more', 'twentyten_auto_excerpt_more' );
remove_filter( 'get_the_excerpt', 'twentyten_custom_excerpt_more' );

Well, it was meant to but it didn’t. Figuring out the issue and then remedying it can be challenging. The issue in this case was that the removal in the Child Theme function.php file was being executed before the Parent Theme had added the filters. To determine the issue some debugging code was added to the removal code as follows:

$remove1 = remove_filter( 'excerpt_more', 'twentyten_auto_excerpt_more' );
$remove2 = remove_filter( 'get_the_excerpt', 'twentyten_custom_excerpt_more' );
printf ('$remove1=%1$s
$remove2=%2$s
',$remove1,$remove2);

The above then spit out the variable labels without a value, meaning the remove_filter calls were not executing successfully. Now that I knew that the call I was making to remove these filters was failing because it was being called before the Parent Theme had run the code to create the filters, I had to write my code to ensure it occurred after the Parent Theme instantiated the filters. The way to deal with this was to craft a function that would run later in the evaluation tree. The following is the resulting function, which was then called via the add_action line of code. The add_action $tag parameter was specified to invoke the function at the end of the WordPress code that builds the <head> section. The following is this code:

function remove_tt_excerpt_filters() {
	remove_filter( 'excerpt_more', 'twentyten_auto_excerpt_more' );
	remove_filter( 'get_the_excerpt', 'twentyten_custom_excerpt_more' );
}
add_action('wp_head', 'remove_tt_excerpt_filters');

At this point all was good and I was able to add the excerpt filters that I wanted.

I hope this Post has got you started a bit on how you might use the function.php file in a Child Theme. You may also find the WordPress Function Reference handy while working on the function.php file.

When I first started using WordPress I wasn’t familiar with Child Themes and I would go to great pains to document what I was changing so that, should the theme get updated, I could go back in and re-apply my changes.  Well, don’t even go down that path as there is a much, much better way to deal with customizing a theme that will allow you to still update the base theme should an update come along.

Child Theme Creation Steps

It is really quite easy to create a child theme.  In this discussion I will be creating a child theme based upon the “TwentyTen” theme that was released along with WordPress 3.0.  TwentyTen has some great functionality but I wanted to change some of the styling and create a custom home page.  The process for creating a child theme has these major steps:

1. Create a new theme folder in the theme directory; wp-content/themes
2. Copy the style.css file from the Parent Theme to the new “Child Theme” folder and update the header to “turn it into” a Child Theme
3. Make any styling changes to the copy of style.css
4. Copy any other files that you want to adjust from the Parent Theme (e.g., header.php, page.php) and make your updates
5. Create an empty function.php file and add new functions or remove Parent Theme actions or filters as necessary
6. Create any new templates that you need that were not in the original Parent Theme

Customize the style.css to Create the Child Theme

To start the Child Theme development process create your new theme folder within the wp-content/themes directory.  I’ve named my theme folder “no-nonsense” in keeping with what I’m naming my new theme.  I then copied the style.css file from the parent and opened it up for editing.  The TwentyTen theme’s style.css header looks as follows:

/*
 Theme Name: Twenty Ten

 Theme URI: http://wordpress.org/

 Description: The 2010 theme for WordPress is stylish, customizable, simple, and
    readable -- make it yours with a custom menu, header image, and background.
    Twenty Ten supports six widgetized areas (two in the sidebar, four in the footer)
    and featured images (thumbnails for gallery posts and custom header images for
    posts and pages). It includes stylesheets for print and the admin Visual Editor,
    special styles for posts in the "Asides" and "Gallery" categories, and has an
    optional one-column page template that removes the sidebar.

 Author: the WordPress team

 Version: 1.1

 Tags: black, blue, white, two-columns, fixed-width, custom-header,
    custom-background, threaded-comments, sticky-post, translation-ready,
    microformats, rtl-language-support, editor-style

 */

It’s pretty easy to convert this to a Child Theme.  The first step is to change the “Theme Name” to the name you’ve chosen for your theme.  In my case I’ve settled on “No Nonsense”.

Next, change the Theme URI, Description and Author to those appropriate for your new theme.

Now comes the magical part.  Add the following line:

Template: twentyten

This both flags this theme as a Child Theme and also defines what theme is the Parent Theme.  The Parent Theme name should align with the name of the Parent Theme’s directory.  In this case, twentyten.

The header of your new child theme should now look something like the following:

/*

 Theme Name: No Nonsense

 Theme URI: http://webphysiology.com/website-development/customizing-wo…heme-right-way/

 Description: Extension of the TwentyTen WordPress default theme to provide a
    somewhat cleaner look and customized home page.

 Author: Jeff Lambert

 Template: twentyten

 Version: 1.0

 Tags: black, blue, white, two-columns, fixed-width, custom-header,
    custom-background, threaded-comments, sticky-post, translation-ready,
    microformats, rtl-language-support, editor-style

 */

WordPress Child Theme Hierarchy

Something very important to understand about Child Themes, and WordPress in general, is the way in which the various files are evaluated. In it’s simplest form a Child Theme can consist of just the updated style.css file.  Starting out the style.css file is a copy of the Parent Theme with the header updated to define the new theme and the fact that it is a child of another theme.  Moving forward the Child Theme’s style.css file will be used and the Parent Theme’s style.css file will be ignored. Any updates the publisher makes to the parent style.css will not affect your copy of the file. The fact that your style.css file isn’t updated moving forward is a good thing as you wouldn’t want your theme’s styling changes to be compromised if the parent style.css file were updated.

The next thing to understand is that if you copy any other file from the Parent Theme into your Child Theme, with one exception noted later, your copy wins.  That is, like the style.css file, if you have a page.php file in your Child Theme folder, it will be used instead of the Parent Theme’s page.php file.  Again, if the Parent Theme is updated, and changes are made to its page.php file, you won’t receive those changes. If something is updated that you want, you’ll manually have to update your copy of the file or delete your copy and revert back to the parent’s copy.

For an better understanding of the WordPress Template Hierarchy, check out this WordPress Template Hierarchy diagram.

Function.php

Another powerful file to be aware of is function.php. When you step into this file you will need to up your technical skills a bit. While you don’t have to be a heavy weight PHP developer, it helps to be able to read the code enough to be able to alter it as necessary to suit your needs.

Function.php is the one Parent Theme file that remains active should you also have a function.php file in your Child theme. What’s important to know is that, starting out, the function.php file within your Child Theme should be a completely empty file, and not a copy of the Parent Theme’s file.

The fact that the Parent Theme function.php file remains active is beneficial as future updates will be available to your Child Theme. The reason this is beneficial is because updates to this file will likely be to fix a defect or to keep it up-to-date with the most current version of WordPress. If there is some action or filter in the Parent Theme that you don’t want active in your Child Theme you can simply write some code in your Child Theme’s function.php file to remove these actions/filters. The primary purpose for having a function.php file in your Child Theme is to allow you to add your own functions. Look for our future function.php post that will cover how to remove a Parent Theme action/filter, including some debugging of this process.

Final Spit & Polish

Now, to add the polishing touch to your Child Theme, take a screenshot of your new theme’s home screen and size it down to a width of 240 pixels. Name it screenshot.png and place it into your theme’s folder. This image will be displayed in the “Appearance Themes” admin page along with your Child Theme. You should now be ready to take on the world, one site at a time.

Admin Manage Themes Screen

Additional Sources of Information

Another good source of Child Theme information is that available within the WordPress Codex itself: WordPress Child Themes. Information on WordPress Theme Development in general is available in the WordPress Theme Development documentation. Information on available functions you might want to use within the Template files or the function.php file can be found in the WordPress Function Reference documentation.

Oh, and if you want to see my No Nonsense TwentyTen Child Theme, you can check it out here: http://NoNonsense.blogwip.com.

And check out the next post in this series “Child Themes and the function.php File“.

Using WordPress – A No Brainer

When JVHM, Inc. launched WEBphysiology.com it was because we wanted to start steering our resources toward Web development.  At the same time we settled on WordPress as our primary core development platform as it was designed well, had a high availability of third party plugin tools and also supported our firm’s principles of delivering cost-effective tools that an end-client could help maintain.  WordPress allows us to provide cost effective solutions because of the following:

• The WordPress software is free and runs great on a variety of hosting platforms
• The two additionally required software components, MySQL and PHP, are free, highly available and stable
• The infrastructure is easy to install and maintain
• Third party plugins exist that provide a great deal of additional functionality and these are largely free
• Basic setup and design time can be quite quick depending upon the tools installed
• Organizations can opt to maintain the content, and some look-and-feel aspects, of their site such that it remains fresh without developer intervention

Custom Development

Well, with the recent release of WordPress 3.0 our decision has been reinforced in that the WordPress publishing environment steps into even more of a CMS realm with the addition of custom post types and custom taxonomies.  To ensure that WEBphysiology.com is getting the most out of the WordPress environment, we seized on the opportunity to test out these new features and exercise our custom development skills.

To do this we took on building a child theme based upon the new TwentyTen theme.  In addition, we started development of a new plugin that covers many other aspects of the new functionality.  I don’t know as we’ll publically release the plugin we are working on but perhaps, as we make time to better clean it up, we will.  This custom plugin covers a new custom post type for “News Articles”.  The plugin contains the following functionality:

• Defines and creates the “News Articles” custom post type and registers it
• Includes an Admin interface for defining the output content related to News Articles
• Includes custom templates for the summary News page and the single-post News Article
• Provides a widget for displaying a list of recent News Articles
• Includes functions for retrieving and displaying formatted News Article content

News Article Plugin Admin Settings Scren

News Articles Widget Settings

While more work is needed to pull some styling aspects out of this plugin, such that it plays nicely with other themes, it has been a great learning experience and an opportunity to really feel the power that was generated by the release of WordPress 3.0.  If you are interested in seeing our work-in-progress, you can check out our sandbox, http://NoNonsense.blogwip.com.  You’ll notice the News widget in the home page sidebar as well as the “News” summary page from the top navigation menu followed by the single News Article page when you click to read more of the Article or click an Article from the home page sidebar widget listing.  The overall look is our “No Nonsense” theme based upon the new TwentyTen WordPress theme. Feel free to provide feedback.

Giving Back

Throughout the course of August we hope to share some of what we’ve done to create the News Articles post type and related functionality. So that you don’t miss out, make certain to sign up for one or more of the following:

• RSS – Feed and/or Email
• Twitter
• Facebook
• Monthly Newsletter
• YouTube

I always have a few WordPress plugins incorporated into my website designs. Why wouldn’t I? They save me time, which equates to my clients’ money, and often provides solutions that are more robust or integrated than I would have the time to code myself. Suppose my feelings follow along the train of thought of why re-invent the wheel, though, one can perhaps build a better mousetrap (if one has the time and stomach for it).

Some plugins that I use are really just no brainers, like Akismet for spam control. Others, like W3 Cache and Automatic WordPress Backup, add functionality or process management that is necessary on every website. This article will lay out the plugins I use fairly often and recommend you take a look at when you have a need that they meet. There is no way that I’m familiar with every plugin or every function that someone has dreamt up, but these will handle much of what you need. I’ll try to manage this post to keep it current as the tides change, so, check back periodically.

If you are new to WordPress and not certain how to add or update plugins, check out these two videos: Adding Plugins to WordPress, Updating WordPress Plugins.

WordPress Plugins I Use

• Analytics360 (MailChimp): Allows you to pull Google Analytics and MailChimp data directly into your dashboard, so you can access robust analytics tools without leaving WordPress.
• Auto Thickbox (Denis de Bernardy): This plugin adds a very configurable method for displaying a full-size image in a polished, isolated window within your post when a user clicks on the image.
• Automatic WordPress Backups (Dan Coulter): This awesome plugin handles data and file backups utilizing the very inexpensive Amazon Web Simple Storage Services (S3) resource.
• Akismet (Automattic): This is a comment spam checker that is included (though not activated) with every install of WordPress. It’s definitely worth utilizing.
• All in One SEO Pack (Michael Torbert): A great tool that adds SEO fields to each post and page such that you can define an SEO title, description… as you build the content.
• Broken Link Checker (Janis Elsts): A great way to audit the links on your web site to ensure they continue to direct visitors to viable pages.
• Digg Digg (Yong Mook Kim): Adds social vote buttons (e.g., Digg, Reddit, Yahoo Buzz, TweetMeme…) to your posts, making it much easier for you to build inbound links and get more exposure.
• Google Analytics for WordPress (Joost de Valk): This plugin makes it simple to add Google Analytics with extra search engines and automatic clickout and download tracking to your WordPress blog. I’ve started using this in place of specifying the Google Analytics tracking codes within a theme’s setting.
• Google XML Sitemaps (Arne Brachhold): This plugin will generate a special XML sitemap that will help search engines like Google, Yahoo, Bing… better index your site.
• Ozh Admin Drop Down Menu (Ozh): This plugin helps out with the managing of the many menus within the WordPress Admin console by placing them along the top of the screen where they are easily accessed.
• Remove Stopwords from Slug (Alberto Varela): A great little configurable plugin that removes the small, unnecessary, no SEO value words from your Page and Post URLs.
• Robots Meta (Joost de Valk): This plugin adds robot meta fields to your pages and posts so that you can specify the indexing actions of search robots on a given piece of site content.
• Smart Youtube (Vladimir Prelovac): This is the plugin that I’ve chosen to use to embed YouTube videos into my Posts. It works great!
• Twitter Tools (Alex King): This little gem adds the ability to auto-generate a tweet from a blog Post when it is published, relieving you of the overhead of having to manually do this. If you’re so inclined, you also can have it generate Posts based upon your tweets.
• W3 Total Cache (Frederick Townes): This highly rated plugin turns on and manages the caching features built into WordPress in an effort to increase the performance of your web site.
• WP Greet Box (Thaya Kareeson): This plugin will present a link within your blog Post allowing a visitor to subscribe to your feed. It is well integrated (aka, non-intrusive) within the UI and is personalized based upon where the user has navigated from.
• Yet Another Related Post (mitcho): This plugin will build a list of other related Posts that a reader may want to check out and add this to the bottom of a Post or feed.
• Yoast Breadcrumbs (Joost de Valk): If you are working with a WordPress theme that hasn’t included a breadcrumb then you should check out this plugin. Breadcrumbs not only assist your visitors site navigation experience, it also can help with SEO.

So, what’s new in WordPress 3.0? Here’s a few new features:

• Customizable menus (one of my favorite updates)
• Custom post types (hurray!)
• Custom taxonomies
• One code base with WordPress MU and WordPress code being combined (awesome!)
• Custom Header and background API’s
• Bulk updating
• and much, much more!

Check out this article for a comprehensive list of changes included in WordPress 3.0. Or start from the beginning with this WordPress 3.0 Release Announcement article.

WEBphysiology handles many things “Web”, including the building of web sites based upon the WordPress publishing foundation. We’ve found this to be a great platform in that it allows our clients to much more easily make changes to their site, which provides the important benefit of keeping the site current without the need to chase down a developer. If you would like to have a site built, or migrated to use WordPress as its platform, please let us know. We love helping people!

Even though I haven’t headed down the video sitemap path yet, I did want to at least share a short post by Joost de Valk entitled “Video SEO and WordPress“. One reference Joost shares is Creating a Video Sitemap, located on Google’s Webmaster Central, which is an overall great resource site.

As I dig deeper into the area of Video Sitemaps I’ll be certain to share.

Just how easy is it to create a YouTube Video playlist? Well, spend 4 minutes watching this how-to video that steps you through creating a YouTube playlist and you’ll be an expert.

www.youtube.com/watch?v=pW9TqKe9ITU

All of the websites I build have a backup process in place but, up until now, it has been a mix of an automated database backup along with a manual backing up of the actual website files. This is very tedious and lends itself to holes as one may not get around to performing the manual backup. While it is true that most web hosting providers are performing backups, these are only meant to restore a web server should a catastrophe befall it. It does not cover for issues where a web designer makes a change that results in bringing down or otherwise hobbling the site he is working on. It also doesn’t cover for an editor deleting a Post or making some other configuration change that causes irreversable damage to the site or its content.

I was extremely happy when I stumbled onto the Automatic WordPress Backup plugin because now I can put in place a fully automated backup process. This plugin will back up your database and then copy the database backup file, along with the physical website files, to an Amazon Web Services S3 (Simple Storage Services) storage facility. If you aren’t aware of this Amazon service it is an extreme value, easy to set up and a great facility for storing and sharing data in the cloud.

So, if you are looking for a great backup process, check out the Automatic WordPress Backup plugin by Dan Coulter.

To see how this backup process is all pulled together, check out this instructional video:

www.youtube.com/watch?v=i0RuOuTkEPw

So, you are writing a Post in WordPress and are including an image that isn’t yours and doing so requires that you include the proper credits and, possibly, a link. Or maybe it is yours and you want to include your photo credit / copyright . Well this can be difficult within WordPress if you are using the standard image manager and trying to add a link within the caption. This is because WordPress strips out any HTML code within the caption. Why are they doing this? My guess is because the “Caption” also is being used as the value for the image’s “alt” text and, as such, cannot include other HTML element tags. It would be nice if WordPress only stripped out the HTML code from the “alt” attribute and left it for the caption below the image but….

Have you figured out how to include a linked caption? Have you tried to find a plugin to help with this? Had any luck? If so, let me know. If not, don’t worry, you’re not alone. So, what can a non-developer do? This post covers one solution that isn’t the most elegant but it gets the job done. In subsequent posts I’ll discuss other options and image sources.

The first step in the process is the one you are use to, use the <Add an Image> button like you always do. The only difference is that you’ll put in the copyright or other image credit text in the “Caption” field along with any caption text you want. Here’s an image that I’ve inserted as centered and medium in size along with the full caption that I want.

Tower Bridge at Night (photo copyrighted by Jeff Lambert)

What I want to do next is to make the photographer’s name, Jeff Lambert, a link to a web page that explains the copyright terms of the photograph. What this will require is switching the post editor from Visual mode to HTML mode followed by the manual manipulation of the image’s HTML code. Once I perform this action the photograph will no longer be formatted and positioned within the post editor, that is, it will go from looking like the above image to the one below:

View of How the Image Appears in the Post Editor Before and After Adjusting

As such, you’ll want to fully complete your post, including the insertion of images positioned as you’d like them, before you update the photo’s HTML code to update the caption. That way you can tell if things look okay from a positional, sizing perspective.

Manipulating the HTML

The following shows what you will see within the HTML view of the post once you insert an image and how you need to adjust it to add a link to a portion of the text:

Essentially, what you are doing is what the WordPress code behind the scenes is doing when it processes an image within the post’s text that is encapsulated by tags. To prove this, do a preview of the post and then look for the image within the pages Source. You should find something quite similar if not the same as what we are changing the code to within the HTML editor. One item of note is that you’ll change the width reference in the outer <div> element to add 10 to it. So, in the example here, I changed 300 to 310.

To further clean this caption up, I pushed the copyright line down to a second line and also made it slightly smaller than the caption text by adding the following HTML between the first line and second line of text:

The resulting image will look as follows:

Tower Bridge at Night

(photo copyrighted by Jeff Lambert)

Of course, my example shows how to center align an image with a linked caption. What happens if you want to position it to the right or left? Well, it’s pretty simple. Just change any position word to the desired position.

Tower Bridge at Night

(photo copyrighted by Jeff Lambert)

This image is on the left. I also scaled it down 70%. This meant that I needed to do two things after inserting the image and adjusting it as I did above. First, I used the image edit button (hover over the image and click the picture button) to select the 70% size from the image size scale. This updated the size of the image in the HTML view. I checked to see what this changed to, added 10 and then updated the outer <div> width to this new value, in this case, 220px. The outer <div> class also reads class=“wp-caption alignleft” instead of class=”wp-caption aligncenter”.

Tower Bridge at Night

(photo copyrighted by Jeff Lambert)

To position the image on the right it was as simple as changing the class to class=”wp-caption alignright”.

The one thing I did find when putting an image at the end like this is that the author box would slip under the image, so, I simply added some extra lines to the end of the text to push things down.

In re-printing this Post on this website I found that the theme I’m using here threw some wrenches into the mix. Most notably was that the captions on the left and right aligned images also had the text aligned to the same side. Pretty bad when you are dealing with captions. Also, the padding around the paragraphs of the wp-caption’d div’s were different in this theme than they were in the WordPress theme I used for blogWIP.com. The fix for this was fairly simple and I decided to apply it to the CSS stylesheet as it was applicable across the website. The following is what I added:

.wp-caption p, .wp-caption p.wp-caption-text {
    text-align: center;
    font-size: 0.8em;
    margin: 0;
    padding: 0;
}

Moral of the story, as with most articles that instruct you on how to perform a certain task, you will need to make adjustments.

Best of luck