Category Archives: Code Snippets

Adding a thumbnail to the WordPress Loop

This post will demonstrate how to create a loop like the one pictured below.

loop1

Our example uses the Twenty Eleven theme so this might not apply to your choice of theme. Twenty Eleven uses the content.php file by default to display content and we will be editing that file to add a thumbnail.

Let’s first look at the existing code of content.php:

<?php
/**
 * The default template for displaying content
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?>

	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
		<header class="entry-header">
			<?php if ( is_sticky() ) : ?>
				<hgroup>
					<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
					<h3 class="entry-format"><?php _e( 'Featured', 'twentyeleven' ); ?></h3>
				</hgroup>
			<?php else : ?>
			<h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
			<?php endif; ?>

			<?php if ( 'post' == get_post_type() ) : ?>
			<div class="entry-meta">
				<?php twentyeleven_posted_on(); ?>
			</div><!-- .entry-meta -->
			<?php endif; ?>

			<?php if ( comments_open() && ! post_password_required() ) : ?>
			<div class="comments-link">
				<?php comments_popup_link( '<span class="leave-reply">' . __( 'Reply', 'twentyeleven' ) . '</span>', _x( '1', 'comments number', 'twentyeleven' ), _x( '%', 'comments number', 'twentyeleven' ) ); ?>
			</div>
			<?php endif; ?>
		</header><!-- .entry-header -->

		<?php if ( is_search() ) : // Only display Excerpts for Search ?>
		<div class="entry-summary">
			<?php the_excerpt(); ?>
		</div><!-- .entry-summary -->
		<?php else : ?>
		<div class="entry-content">
			<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?>
			<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
		</div><!-- .entry-content -->
		<?php endif; ?>

		<footer class="entry-meta">
			<?php $show_sep = false; ?>
			<?php if ( is_object_in_taxonomy( get_post_type(), 'category' ) ) : // Hide category text when not supported ?>
			<?php
				/* translators: used between list items, there is a space after the comma */
				$categories_list = get_the_category_list( __( ', ', 'twentyeleven' ) );
				if ( $categories_list ):
			?>
			<span class="cat-links">
				<?php printf( __( '<span class="%1$s">Posted in</span> %2$s', 'twentyeleven' ), 'entry-utility-prep entry-utility-prep-cat-links', $categories_list );
				$show_sep = true; ?>
			</span>
			<?php endif; // End if categories ?>
			<?php endif; // End if is_object_in_taxonomy( get_post_type(), 'category' ) ?>
			<?php if ( is_object_in_taxonomy( get_post_type(), 'post_tag' ) ) : // Hide tag text when not supported ?>
			<?php
				/* translators: used between list items, there is a space after the comma */
				$tags_list = get_the_tag_list( '', __( ', ', 'twentyeleven' ) );
				if ( $tags_list ):
				if ( $show_sep ) : ?>
			<span class="sep"> | </span>
				<?php endif; // End if $show_sep ?>
			<span class="tag-links">
				<?php printf( __( '<span class="%1$s">Tagged</span> %2$s', 'twentyeleven' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list );
				$show_sep = true; ?>
			</span>
			<?php endif; // End if $tags_list ?>
			<?php endif; // End if is_object_in_taxonomy( get_post_type(), 'post_tag' ) ?>

			<?php if ( comments_open() ) : ?>
			<?php if ( $show_sep ) : ?>
			<span class="sep"> | </span>
			<?php endif; // End if $show_sep ?>
			<span class="comments-link"><?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'twentyeleven' ) . '</span>', __( '<b>1</b> Reply', 'twentyeleven' ), __( '<b>%</b> Replies', 'twentyeleven' ) ); ?></span>
			<?php endif; // End if comments_open() ?>

			<?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?>
		</footer><!-- .entry-meta -->
	</article><!-- #post-<?php the_ID(); ?> -->

We will be removing a lot of the code to create a much simpler content.php file.

  • First we need to check if the post has a thumbnail (i.e. featured image). To accomplish this we will use get_the_post_thumbnail() function and not has_post_thumbnail(). The function has_post_thumbnail() seems to fail in many cases and as mentioned in the WordPress Codex our method is now recommended.
  • If the post has a thumbnail we will output a post_class “thumbnail” so we have more granular control when styling this with CSS.
  • Inside a thumbnail div we output the_post_thumbnail(‘thumbnail’) where you could replace the “thumbnail” value with a different standard WordPress image size or a custom size you have added.
  • After the thumbnail div we will open a containing div for the post body with our thumbnail.
  • Then we need to finish up our if else statement with an else condition for when there is no thumbnail. In this case we will output the normal article div used in Twenty Eleven. Alternatively you could create a default thumbnail image to be displayed when no featured image is set.

Note we have also modified a lot of other parts of the content.php file but that is outside the scope of this simple tutorial.

<?php
/**
 * The default template for displaying content
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?>
	
	<?php if ( '' != get_the_post_thumbnail() ) : ?>
	
		<article id="post-<?php the_ID(); ?>" <?php post_class('thumbnail'); ?>>
					
			<div class="post-thumb">
						
				<?php the_post_thumbnail('thumbnail'); ?>
							
			</div>
			
			<div class="post-thumb-body">
						
	
	<?php else : ?>
	
		<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

	<?php endif; ?>
	
		<header class="entry-header">
		
			<?php if ( is_sticky() ) : ?>
			
				<hgroup>
				
					<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
					
					<h3 class="entry-format"><?php _e( 'Featured', 'twentyeleven' ); ?></h3>
					
				</hgroup>
				
			<?php else : ?>
			
			<h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
			
			<?php endif; ?>

			<?php if ( 'post' == get_post_type() ) : ?>
			
			<div class="entry-meta">
			
				<?php twentyeleven_posted_on(); ?>
				
			</div><!-- .entry-meta -->
			
			<?php endif; ?>

			
		</header><!-- .entry-header -->

		<?php if ( is_search() ) : // Only display Excerpts for Search ?>
		
		<div class="entry-summary">
		
			<?php the_excerpt(); ?>
			
		</div><!-- .entry-summary -->
		
		<?php else : ?>
		
		<div class="entry-content">
		
			<?php the_excerpt(); // Removed the content and replaced with excerpt ?>
			
		</div><!-- .entry-content -->
		
		<?php endif; ?>
		
		<?php if ( '' != get_the_post_thumbnail() ) : ?>
		
			</div><!-- #post-thumb-body -->
			
		<?php endif; ?>


		<div style="clear:both;"></div>
	</article><!-- #post-<?php the_ID(); ?> -->

And here is some CSS that will get you started although you will probably need to write some more styles to match your theme.

.post-thumb{
	float:left;
	padding-right:20px;
}

.post-thumb-body{
	float: left;
	width: 470px;
}

How to Stop Google from displaying the post date in the Search Results

Google shows the date next to your post because the date is in your WordPress Loop.  If your date shows on the page may show in Google SERPs.  You can remove the date or the time in your WordPress Loop and replace it with a Javascript call for the date that Google Bot won’t read.

Capture3

Replace This

<?php the_time('F jS, Y') ?>

With this

<script language="javascript"
type="text/javascript">document.write("<?php
the_time('F jS, Y')
?>");</script>

I owe the credit for this idea and the code to Quicksprout.com.

How to stop the 2011 theme from adding the body class singular to pages and single posts

Add this code to your functions.php file. you will have to add the sidebar into your PHP templates. There is more information in this turorial where I grabbed the code below. http://www.transformationpowertools.com/wordpress/twenty-eleven-sidebar-on-single-posts-and-pages

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 =&gt; $value) {
      if ($value == $val) unset($wp_classes[$key]);
      }
    endif;
  }
endif;   // Add the extra classes back untouched
return array_merge($wp_classes, (array) $extra_classes);
}	

To leave the pages as full width, and only add sidebar to single.php use this slightly different code.

add_filter('body_class', 'blacklist_body_class', 20, 2);
function blacklist_body_class($wp_classes, $extra_classes) {
if( is_single() ) :
// 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 =&gt; $value) {
      if ($value == $val) unset($wp_classes[$key]);
      }
    endif;
  }
endif;   // Add the extra classes back untouched
return array_merge($wp_classes, (array) $extra_classes);
}	

How to add new menu’s to a WordPress theme in the Functions.php file

Search for the register_nav_menus function and add some more menus to go other places in your theme.


// This theme uses wp_nav_menu() in one location.
register_nav_menus( array(
'primary' => __( 'Primary Navigation', 'twentyten' ),
'footer' => __( 'Footer Navigation', 'twentyten' ),
'sidebar' => __( 'Sidebar Navigation', 'twentyten' ),
) );

To insert your new menu somewhere in your theme files


< ?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

How to register a new Widget area in the Funtions.php file

 <!--how to register a widget area -->
 	// Area 5, located on the home page. Empty by default.
	register_sidebar( array(
		'name' => __( 'Home Page Widget Area', 'twentyten' ),
		'id' => 'home-page-widget-area',
		'description' => __( 'The home page widget area', 'twentyten' ),
		'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

Then in your template files use this code to call the widget area.

	<?php if ( is_active_sidebar( 'home-page-widget-area' ) ) : ?>
				<div id="home-second" class="home-widget-area">
					<ul class="xoxo">

						<?php dynamic_sidebar( 'home-page-widget-area' ); ?>
					</ul>
				</div><!-- #first .widget-area -->
<?php endif; ?>

How to Create a Custom post type by editing the functions.php file

/**how to register custom post type */
register_post_type('staff', array(
'label' => __('Staff'),
'singular_label' => __('Staff'),
'public' => true,
'show_ui' => true,
'capability_type' => 'post',
'hierarchical' => false,
'rewrite' => false, 'query_var' => true,
'supports' => array('title', 'editor', 'thumbnail'),
'taxonomies' => array( 'post_tag')
));