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:

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]


[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’


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 } ?>

Show Description for Header Images in Twenty Eleven

This code is for a child theme of Twenty Eleven, because the direct editing of the default theme is not recommended.

Since wp3.4, the function get_custom_header() takes care of some of the information of the header images, such as width, height, and also the description or attachment id.

If added in header.php of the child theme, before:

<?php endif; // end check for removed header image ?>

the code below extracts the description information and outputs it below the header image:

if ( function_exists( 'get_custom_header' ) && is_child_theme() ) :
if( get_custom_header()->description ) {
$header_description = get_custom_header()->description;
} elseif ( is_singular() && has_post_thumbnail( $post->ID ) && ( /* $src, $width, $height */ $header_img = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, max($header_image_width,$header_image_height) ) ) ) && $header_img[1] >= $header_image_width ) {
$header_img_details = get_posts(array('p' => get_post_thumbnail_id( $post->ID ), 'post_type' => 'attachment'));
$header_description = $header_img_details[0]->post_content;
} elseif( $att_id = get_custom_header()->attachment_id ) { 
$header_img_details = get_posts(array('p' => $att_id, 'post_type' => 'attachment'));
$header_description = $header_img_details[0]->post_content;
if( $header_description ) echo '<span class="header-description">' . $header_description . '</span>'; 

A commented version of the code is in pastebin .