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.

Insert the Featured Image into the Post Content with Shortcode

Somebody asked today, how to insert a ‘featured image’, aka post thumbnail, into the content of a post.
Obviously this cannot be done with the usual WordPress function ‘the_post_thumbnail()’ as the php code would not get rendered in the post’s content.

For me, the best way seemed to be to programm a shortcode for this purpose;
in the most basic form this would be:

add_shortcode('thumbnail','thumbnail_in_content');
function thumbnail_in_content( $atts ) {
global $post;
return get_the_post_thumbnail( $post->ID );
}

However, this is not very user friendly and does not alllow for setting the image size and alignment.

Shortcodes allow for a number of attributes, so I integrated the attributes ‘size’ and ‘align’ to the shortcode, together with some validity checks and default values.

The usage for the [thumbnail] shortcode is, for example:

[thumbnail size=medium align=right]

or

[thumbnail size='array( 300, 200)' align=center]

Any input errors would revert to size= ‘post-thumbnail’ and/or align=’none’.

The final code – see pastebin ‘featured image in post – shortcode’

references:
http://codex.wordpress.org/Shortcode_API
http://codex.wordpress.org/Function_Reference/get_the_post_thumbnail
http://codex.wordpress.org/Function_Reference/get_intermediate_image_sizes

Sidebar on the Left – Twenty Twelve

A quick fix to move the sidebar location in a child theme of Twenty Twelve;

add these styles to style.css of the child theme:

@import url('../twentytwelve/style.css');

/*-- move sidebar to the left --*/
@media screen and (min-width: 600px) {
	.site-content {
		float: right;
	}
	.widget-area {
		float: left;
	}
}

/* for IE8 and IE7 ----------------*/
.ie .site-content {
	float: right;
}
.ie .widget-area {
	float: left;
}

caveat: this simplified set of styles has some problems with the formatting of the widgets in the ‘front-page’ template, when viewed in older browsers such as IE7.

possible helpful styles:

.ie .template-front-page #secondary.widget-area { width: 100%; }
.ie .template-front-page #secondary.widget-area .first.front-widgets { width: 50.1%; margin-right: 3%; background: #f4f4f4; }
.ie .template-front-page #secondary.widget-area .second.front-widgets { width: 46.8%; margin-right: 0; background: #f4f4f4; }
.ie .template-front-page #secondary.widget-area .widget { width: 100%; }

Show Page Title and Content of the ‘Posts Page’ in WordPress

When you set a static front page and at the same time set a Posts Page, WordPress will automatically use index.php (or home.php *) to display the Posts Page; as described in the Codex, you’ll lose the output of the title and content of that page.
To show this information on the Posts Page, for instance as an introduction for the posts, add some code to index.php (or home.php):

<?php //this is to output the page title and content for a 'page for posts' page as set under  'settings' - 'reading'
	if( is_home() && !is_paged() && get_option('page_for_posts') ) { 
	$posts_page_id = get_option('page_for_posts'); ?>			
	<header class="entry-header">
		<h1 class="entry-title"><?php echo get_the_title($posts_page_id); ?></h1>
	</header><!-- .entry-header -->
	<?php $posts_page = get_page( $posts_page_id ); ?>
	<div class="entry-content posts-page-entry-content">
	<?php echo apply_filters('the_content', $posts_page->post_content); ?>
	</div><!-- .posts-page-entry-content -->	
<?php } ?>