Title Attribute for Post Thumbnail

two men shake hands - bronze statues in Calagary/BCThe ‘featured image’ in WordPress automatically outputs the image alt attribute, but no title attribute.

Those two attributes are used for different reasons:
– the alt attribute is used to output alternative information if the image is inaccessible, for instance if the user has opted not to show images in the site, or for screen readers for accessibility reasons;
– the title attribute would present additional information about the image, and is shown by some browsers when you hover over the image.

For a WordPress ‘featured image’, the code below is taking the image title as you see it in the media library,  to be used as the title attribute.

The influence on search engine optimisation is not clear – it seems that the alt attribute is given more importance than the title attribute.

Back to the coding – To add the image title of the featured image as the title attribute to the img tag, a little filter function is needed, added  to the  ‘post_thumbnail_html’ filter.

Instead of just adding the code to functions.php of your theme, where it would get lost when you switch themes, it is more universal to create a basic plugin:

<?php
/*
Plugin Name: Featured Image Title Attribute Output
Plugin URI: n/a
Description: adds the image title as the title attribute to the 'featured image' output.
Version: 1.0
Author: alchymyth
Author URI: http://www.transformationpowertools.com/wordpress
License: GPL2
*/

add_filter('post_thumbnail_html','add_post_thumbnail_title_attribute',10,3);

function add_post_thumbnail_title_attribute($html, $post_id, $post_thumbnail_id) {

if( $html == '' ) {
return $html;
} else {
$out = $html;
$thumbnail_image = get_posts(array('p' => $post_thumbnail_id, 'post_type' => 'attachment'));

if ($thumbnail_image && isset($thumbnail_image[0])) {

$title = $thumbnail_image[0]->post_title;
if($title) {
$output = ' title="' . esc_attr($title) . '" ';
$out = str_replace( 'class=', $output . 'class=', $html );
}
}
}
return $out;
}
?>

Upload this as a appropriately named file into the plugins folder of your WordPress installation, and activate it like any other plugin from dashboard – plugins.

Posts in Two Or Three Columns – Twenty Twelve

If your index and archive pages are getting too long, or if you want to compact the information within those pages a little bit, for instance because the featured images above each post are just too large, consider to change the template to show the posts in two columns.

This is easier done than said, with some useful css classes injected into the output of the ‘post_class()’ in the div of each post, together with some rather simple css.

For instance, to change the category archive into two columns, without editing category.php itself, add a filter function into functions.php (as always with the default themes of WordPress, this  is done within a child theme):

add_filter('post_class','category_two_column_classes');

function category_two_column_classes( $classes ) {
global $wp_query;
if( is_category() ) :
$classes[] = 'two-column-post';
if( $wp_query->current_post%2 == 0 ) $classes[] = 'two-column-post-left';
endif;
return $classes;
}

The minimum css for this is:

.two-column-post { width: 47%; float: left; margin-left: 5.9%; }
.two-column-post-left { clear: left; margin-left: 0; }

If you want to apply the same principle for instance to the posts page or other archives, replace

is_category()

with another conditional tag like

is_home()

.
The code is easily adapted to three columns (or actually any number of columns) by changing the number in the modulus operator:

add_filter('post_class','category_three_column_classes');

function category_three_column_classes( $classes ) {
global $wp_query;
if( is_category() ) :
$classes[] = 'three-column-post';
if( $wp_query->current_post%3 == 0 ) $classes[] = 'column-post-left';
endif;
return $classes;
}

the css for three columns would be:

.three-column-post { width: 30%; float: left; margin-left: 4.9%; }
.column-post-left { clear: left; margin-left: 0; }

Page-Of-Posts Template for Twenty Twelve

Page templates are a good way of customising the layout of WordPress sites – and the Codex contains the example code of a ‘Page Of Posts’ page template for the current default theme Twenty Eleven. With the future default theme – Twenty Twelve – of the soon to be released next version of WordPresss already published, there is a need for a new example.

As usual, start by creating a child theme of Twenty Twelve.

The ‘Page Of Posts’ page template is straight forward code:

Please use the code from the pastebin http://pastebin.com/yeGnRkbR

There was some problem with the code below which was unfortunately somehow broken – but seems to be fixed now.

<?php
/**
 * Template Name: Page of Posts
 *
 * for a child theme of Twenty_Twelve
 */

get_header(); ?>

	<div id="primary" class="site-content">
		<div id="content" role="main">

		<?php
			$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
			$args= array(
				'category_name' => 'antiquarianism', // Change this category SLUG to suit your use; or see for query parameters http://codex.wordpress.org/Class_Reference/WP_Query#Parameters
				'paged' => $paged
);
			query_posts($args);
			if( have_posts() ) : ?>

			<?php while ( have_posts() ) : the_post(); ?>
				<?php get_template_part( 'content', get_post_format() ); ?>
				<?php comments_template( '', true ); ?>
			<?php endwhile; // end of the loop. ?>
			
			<?php twentytwelve_content_nav( 'nav-below' ); ?>
			
			<?php else : ?>
			<article id="post-0" class="post no-results not-found">
				<header class="entry-header">
					<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentytwelve' ); ?></h1>
				</header>
				<div class="entry-content">
					<p><?php _e( 'Apologies, but no results were found. Perhaps searching will help find a related post.', 'twentytwelve' ); ?></p>
					<?php get_search_form(); ?>
				</div><!-- .entry-content -->
			</article><!-- #post-0 -->

			<?php endif; wp_reset_query(); ?>

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

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

.

A Sidebar Template for a Page in the ‘One-Column’ Layout in Twenty Eleven

This article describes the necessary coding to create a page template with a sidebar within a ‘one-column’ layout of Twenty Eleven; the example is for a right sidebar.

All changes have to be made in a child theme of Twenty Eleven.

Create your own page template from a copy of the sidebar-page.php template; call it sidebar-page-right-in-one-column.php; edit the Template Name and description.

<?php
/**
* Template Name: Sidebar right in Page in 'One-Column'
* Description: A Page Template that adds a right sidebar to a static page in the 'one-column' theme option
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/

get_header(); ?>

<div id="primary">
<div id="content" role="main">

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

<?php get_template_part( 'content', 'page' ); ?>

<?php comments_template( '', true ); ?>

<?php endwhile; // end of the loop. ?>

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

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

Then make a few edits to sidebar.php and functions.php, to include the new page template into the coding;

start by editing sidebar.php to look like ( http://pastebin.com/pdqsRY8x ):

<?php
/**
* The Sidebar containing the main widget area.
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/

$options = twentyeleven_get_theme_options();
$current_layout = $options['theme_layout'];

if ( 'content' != $current_layout || is_page_template('sidebar-page-right-in-one-column.php') ) :
?>
<div id="secondary" role="complementary">
<?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>

<aside id="archives">
<h3><?php _e( 'Archives', 'twentyeleven' ); ?></h3>
<ul>
<?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
</ul>
</aside>

<aside id="meta">
<h3><?php _e( 'Meta', 'twentyeleven' ); ?></h3>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</aside>

<?php endif; // end sidebar widget area ?>
</div><!-- #secondary .widget-area -->
<?php endif; ?>

Then add this section to functions.php to readjust the body_classes ( http://pastebin.com/nubXyyty ):

function twentyeleven_child_pagetemplates_body_classes( $wp_classes, $extra ){

$classes = array();

if( is_page_template( 'sidebar-page-right-in-one-column.php' ) ) :
// correction for the Sidebar Template 'right sidebar on page in one-column layout'
$classes[] = 'right-sidebar';
$classes[] = 'two-column';
$blacklist = array('one-column','content','left-sidebar','singular');
// Filter the body classes
foreach( $blacklist as $val ) {
if (!in_array($val, $wp_classes)) : continue;
else:
foreach($wp_classes as $key => $value) {
if ($value == $val) unset($wp_classes[$key]);
}
endif;
}
endif;

return array_merge($wp_classes, (array) $extra, $classes );
}

add_filter( 'body_class', 'twentyeleven_child_pagetemplates_body_classes', 20, 2 );

Last thing is to set the max width for the .page-template-sidebar-page-right-in-one-column-php #page to 690px, to keep the narrower width for the new page template.