Mini SEO – a Meta Description Field for Posts and Pages

Modern search engines do not rely on meta descriptions and meta keywords anymore for your ranking.

However, they do preferably show a proper added meta description instead of the first few words of the post or page.

If you can enter this meta description into your WordPress blog or CMS, specifically for each post and static page, you can fine tune what you would like your customers to see with the search results.

Most users would download and install one of the many SEO plugins, which often come with a lot of unwanted features.

With a bit of programming, you can add your own ‘Meta Description Field’ below the post/page editor.

The first part of the code needs to be added into functions.php of your theme:

// 'Custom Meta Description' field below post/page editor
add_action('admin_menu', 'custom_meta_desc');
add_action('save_post', 'save_custom_meta_desc');
function custom_meta_desc() {
add_meta_box('custom_meta_desc', 'Add meta description <small>(if left empty, the first 200 characters of the excerpt will be used)</small>', 'custom_meta_desc_input_function', 'post', 'normal', 'high');
add_meta_box('custom_meta_desc', 'Add meta description <small>(if left empty, the first 200 characters of the excerpt will be used)</small>', 'custom_meta_desc_input_function', 'page', 'normal', 'high');
}
function custom_meta_desc_input_function() {
global $post;
echo '<input type="hidden" name="custom_meta_desc_input_hidden" id="custom_meta_desc_input_hidden" value="'.wp_create_nonce('custom-meta-desc-nonce').'" />';
echo '<input type="text" name="custom_meta_desc_input" id="custom_meta_desc_input" style="width:100%;" value="'.get_post_meta($post->ID,'_custom_meta_desc',true).'" />';
}
function save_custom_meta_desc($post_id) {
if (!wp_verify_nonce($_POST['custom_meta_desc_input_hidden'], 'custom-meta-desc-nonce')) return $post_id;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
$customMetaDesc = $_POST['custom_meta_desc_input'];
update_post_meta($post_id, '_custom_meta_desc', $customMetaDesc);
}

The second part will be added into header.php, below the <title> tag:

<meta name="description" content="<?php
if( is_single() || is_page() ) :
$text = get_post_meta($post->ID,'_custom_meta_desc',true);
if(!$text) $text = ($post->post_excerpt) ? $post->post_excerpt : substr($post->post_content, 0, 200).'...';
echo esc_attr(strip_tags(apply_filters('get_the_excerpt',$text)));
else :
/* optional area to program meta descriptions for index and archive pages, etc */
endif; ?>" />

meat description input field
'Meta Description Input' for posts and pages

The new input field will show directly below the post or page editor window.

Simply add your meta description text into the field, and press the usual ‘update’ button;
if left empty, the meta description will show the first 200 characters of the post or page.

Page Template Sidebar Overwrite Theme Options in Twenty Eleven

example of left and right sidebars in static pages of Twenty Eleven
Sidebar on the left or on the right within one Twenty Eleven child theme

Twenty Eleven already comes with a page template to add a sidebar to static pages. However, this sidebar will always be on the same side as the sidebar on the front  page, ruled by the ‘theme options’.
On some pages, you might want to show the sidebar on the opposite side.
This freedom of choice is possible with some special page templates and some coding in functions.php of the theme.

The following codes refer to a child theme of Twenty Eleven.

If you don’t want to follow the steps outlined in the Codex, you can download a ready-made child theme from quirm.net.

First step: in your child theme folder, create two new page templates – one for a fixed sidebar on the left, and the other for the sidebar on the right.

To begin with, copy the code of sidebar-page.php, and save it as sidebar-left-page.php and sidebar-right-page.php, resp.

The file names are important as they refer to the same names in the code for functions.php.

Second step: Change the line ‘ * Template Name: Sidebar Template’ to ‘ * Template Name: Left  Sidebar Template’ and ‘ * Template Name: Right Sidebar Template’, resp.; save the files.

Third step: add the following code to functions.php of your child theme:

function twentyeleven_child_pagetemplates_body_classes( $wp_classes, $extra ){

  $classes = array();

  if( is_page_template( 'sidebar-left-page.php' ) ) :
  // correction for the Left Sidebar Template
    $classes[] = 'left-sidebar';
    $blacklist = array('right-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;

  if( is_page_template( 'sidebar-right-page.php' ) ) :
  // correction for the Right Sidebar Template
    $classes[] = 'right-sidebar';
    $blacklist = array('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 );

That code will correct the body_classes of the theme, which are central to the layout of your site.

Finished.

Now you will have two more page templates available in the ‘page attributes’ section when you create or edit a static page.

The sidebar position of these pages will be independant of the theme options (as long as one of the ‘content with sidebar’ options is ticked).

Styling the First Post Different

How to style the first / last / latest / newest post in a WordPress site different?

The default advice usually is to use a counter variable and a conditional statement to check for the first post in the loop; that approach obviously works fine, however requires a few lines of extra code before and in the loop.

A more condensed approach is to use $wp_query->current_post which returns the current post number in the loop, starting with 0 (zero) for the first post.

This can be combined with a check, if the page is really the first page, and not one of the paginated pages, using !is_paged().

If the goal is just to apply different css styles to the first post, it is best to add a unique css class to the post_class() which is used in most recent themes; like so: post_class($extra); to add the extra class to post_class.

All combined might look like (based on the code of content.php in Twenty Eleven):

<article id="post-<?php the_ID(); ?>" <?php $extra = ( $wp_query->current_post == 0 && !is_paged() ) ? 'specialclass' : ''; post_class($extra); ?>>

If the goal is to have a totally different output for the first post, then a conditional structure is needed (within the loop, wrapping the post output):

<?php if( $wp_query->current_post == 0 && !is_paged() ) : ?>
/*the output of the first post*?
<?php else : ?>
/*the output of all other posts*/
<?php endif; ?>

Twenty Eleven – Sidebar and Other Adaptations for Hand-held Devices

As the title says: how can you keep the sidebar on narrow screens such as the iPhone® or iPad® and set a minimum width for your site, using (a child theme of ) Twenty Eleven?

The solution lies in the responsive structure of the stylesheet.

This adaptation to the styles needs to be added at the end of style.css of (your child theme of) Twenty Eleven; some example styles, to set a lower limit to the page width, etc:

/* =Responsive Structure for narrow screens
* to keep min width and sidebar
-------------------------------------------- */
@media (max-width: 800px) {
     #page {
	   min-width: 500px;
         }
/* keep the sidebar - for right sidebar */
	.right-sidebar #main #content {
		margin: 0 29% 0 1%;
		width: 70%;
	}
	.right-sidebar #main #secondary {
		float: right;
		margin: 0 1% 0 1%;
		width: 24%;
	}
/* keep the sidebar - for left sidebar */
	.left-sidebar #main #content {
		margin: 0 1% 0 29%;
		width: 70%;
	}
	.left-sidebar #main #secondary {
		float: right;
		margin: 0 -1% 0 2%;
		width: 24%;
	}
/* correction for 'showcase' template */
	.page-template-showcase-php #main #primary.showcase {
		float: right;
		margin: 0 2% 0 2%;
		width: 96%;
	}
	.page-template-showcase-php #main #primary.showcase #content {
		margin: 0 6% 0 6%;
		width: 88%;
	}
	.page-template-showcase-php section.recent-posts {
		float: right;
		margin-right: 0pt;
		margin-left: 31%;
		width: 69%;
	}
	.page-template-showcase-php #main .widget-area {
		float: left;
		margin-right: -22.15%;
		margin-left: 0pt;
		width: 22.15%;
	}
/* correction for singular posts/pages without sidebar */
	.singular #main #content {
		margin: 0 8% 0 8%;
		width: 84%;
	}
/* keep floating footer widgets side-by-side at this size */
     #colophon #supplementary .widget-area {
          float: left;
          margin-right: 1%;
          width: 32%;
     }
}

/*to keep image alignment in narrow browsers*/
@media (max-width: 650px) {
  .alignleft { float: left; }
  .alignright { float: right; }
}

The whole css got a bit longer than expected to care for the ‘showcase’ template, and all possible layout options.

Adjust the ‘minimum width’ to fit the screen width of the targeted hand-held device.
If you are using it with an alredy customized child theme of Twenty ten, you may need to adjusts some of the values and/or add more styles.

Not actually widely tested with iPhone®, iPad® or any other tablet PCs – all feedback is very welcome.