Twenty Eleven – Sidebar on Single Posts and Pages

The new default theme of WP3.2 – Twenty Eleven – is a very versatile theme.
However, the ‘missing’ sidebar on single posts or pages is quite disturbing for some users, loosing their advertising space or the main navigation.
To get the sidebar back is not that simple – style.css is quite complex, and the layout of a single post or page is done with a clever use of a specially introduced css class in the body tag.

First step

Create a child theme.

– create a new sub-folder under the /wp-content/themes folder, for instance: twentyelevenchild;
– add a style.css file to that folder; content:

/*
Theme Name: Twenty Eleven Child
Author: alchymyth
Description: a child theme, based on the 2011 theme for WordPress
Author URI: http://wordpress.org/
Template: twentyeleven
*/

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

– add a functions.php file to that folder; to be used later;
– optional: add a screenshot.jpg image to that folder, depicting the design of your child theme.

Second step

Add the call of the sidebar back.

Edit single.php and/or page.php and add

<?php get_sidebar(); ?>

before the line

<?php get_footer(); ?>

Third step

Suppress the .singular body_class from the single post or page.

To achieve this, add a filter to your new functions.php in your child theme folder.

add_filter('body_class', 'blacklist_body_class', 20, 2);
function blacklist_body_class($wp_classes, $extra_classes) {
if( is_single() || is_page() ) :
// List of the classes to remove from the WP generated classes
$blacklist = array('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;   // Add the extra classes back untouched
return array_merge($wp_classes, (array) $extra_classes);
}

(resources:
http://dev-tips.com/featured/remove-an-item-from-an-array-by-value
http://wordpress.stackexchange.com/questions/15850/remove-classes-from-body-class )

Fourth step

Fine-tuning of style.css

For instance:

.single #author-info {
	background: #f9f9f9;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	margin: 2.2em 0% 0 0%;
	padding: 20px 35.4%;
}

There might be some more details which can be changed while customizing the styles of the child theme.

edit: thanks to member smijos of the wordpress support forum:
some more styles, for the comment section, to make the theme look good:

#respond {
width: auto;
}
.commentlist {
width: auto;
}
.commentlist > li.comment {
margin: 0px 0px 20px 102px;
width: auto;
}

PS: A Few Different Cases

(updated and expanded)

this all concerns this line of code:

if( is_single() || is_page() ) :

1) if you rather use the sidebar-page template that comes with the theme, to control if and when to show a sidebar on a static page, simply don’t edit page.php, and remove

|| is_page()

from that line.

2) Zeaks pointed out that the code also effects single attachment pages.

if you want the sidebar in these pages, edit image.php and add

<?php get_sidebar(); ?>

before the ‘get_footer’ line; also adapt the style of

.image-attachment div.attachment

.

if you want your single attachment pages without sidebar, change to:

if( (is_single() && !is_attachment()) || is_page() ) :

PPS

If you don’t like coding, please do still create the child theme; however, for the rest, there is a plugin available:
‘Twenty Eleven Theme Extensions’

Adsense Ad at the More Tag Position

Surprise your readers with a google ad after clicking the ‘read more’ link – a strategic position to catch the attention of the viewer and increase your revenue.

Advertising does not get the same attention all over your page, as this report shows, some areas are ‘hotter’ than others, and the top of your content is one of the ‘hottest’.

Many of you insert the ‘more-tag’ after a short introductionary part of your content when writing your articles – usually to keep the design of the home page clean and easy to navigate.

When  the reader clicks on the ‘continue reading’ button, this already proves that the article has so far captured his attention – and the reader is more likely to follow any targeted advertising links, particular if these are seamlessly integrated into the main post content.

Continue reading “Adsense Ad at the More Tag Position”

Highlight the post’s categories in the category list

highlighting the categories of a post in single post view is a useful trick to allow the viewer to find related posts.

there are plugins available which extend the functionality of the standard category widget to do this.

sometimes, however, it can be desirable to have the same feature with a function that you can use like you would use ‘wp_list_categories();’ – exactly with the same arguments.

/* hi_list_categories() to highlight the current categories of a post in single.php;
uses the arguments in the same way as wp_list_categories();
alchymyth 2010 / www.transformationpowertools.com/wordpress */
function hi_list_categories($args) {
//following section is extracted from http://phpxref.com/xref/wordpress/wp-includes/category-template.php.source.html#l389
$defaults = array(
'show_option_all' => '',
'orderby' => 'name',
'order' => 'ASC',
'show_last_update' => 0,
'style' => 'list',
'show_count' => 0,
'hide_empty' => 1,
'use_desc_for_title' => 1,
'child_of' => 0,
'feed' => '',
'feed_type' => '',
'feed_image' => '',
'exclude' => '',
'exclude_tree' => '',
'current_category' => 0,
'hierarchical' => true,
'title_li' => __( 'Categories' ),
'echo' => 1,
'depth' => 0
);
$r = wp_parse_args( $args, $defaults );
if ( !isset( $r['pad_counts'] ) && $r['show_count'] && $r['hierarchical'] ) {
$r['pad_counts'] = true;
}
if ( isset( $r['show_date'] ) ) {
$r['include_last_update_time'] = $r['show_date'];
}
if ( isset( $r['echo'] ) ) {
$echo_or_return = $r['echo'];
} ; $r['echo'] = 0;
if ( true == $r['hierarchical'] ) {
$r['exclude_tree'] = $r['exclude'];
$r['exclude'] = '';
}
extract( $r );
//end of extracted code
global $post;
// highlighting only for single post view
if(is_single()) :
$categories = wp_get_post_categories($post->ID);
foreach ($categories as $catid) {
$cat = get_category($catid);
$cats[] = $cat->cat_ID;
}
$cats_list = wp_list_categories( $r );
foreach($cats as $value) {
if(preg_match('#-item-' . $value . '">#', $cats_list)) {
$cats_list = str_replace('item-' . $value . '">', 'item-' . $value . ' current-cat">', $cats_list);
}
}
if($echo_or_return == 1) { echo $cats_list; }
else { return $cats_list; } ;
else :
//use default category list if not single post view
wp_list_categories( $args );
endif;
} //end of function hi_list_categories();

in the same way, as you would have used ‘wp_list_categories();’ you can now use ‘hi_list_categories();’ which will add the class ‘.current-cat’ to each of the categories of the post in single post view.