large shade tree

Navigation

Information

Recent Posts

Shade Tree Sites |Building Better Websites

Step by Step Guide to WordPress Post Formats

Have been scouring the web for info on how to add support for the new WordPress post formats to themes.   I’m not a php coder and was really hoping for something that just spelled it out – what I found were several interesting discussions and methods  (see below for links).

All have merits and are well thought out by people with a lot more knowledge than me – honestly many were simply over my head.     After examining and comparing several themes and some trail and error – this is what worked for me.

First:  Add theme support.

Open your functions.php file and insert (you can add all or just the ones you want):

add_theme_support( 'post-formats', array( 'aside', 'audio', 'gallery', 'image', 'link', 'video', 'status', 'quote', 'chat' ) );
Second:  Add post classes for styling.
 
Replace <div id=”post-<?php the_ID(); ?>”> (or something similar)  in the index.php, single.php, archive.php, page.php and search.php files with:

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

This creates the following  css classes to use later for styling with css:
  • .format-aside
  • .format-link
  • .format-status
  • .format-quote
  • .format-audio
  • .format-video
  • .format-chat
  • .format-image
  • .format-gallery
Third:  Format the post formats.
 
I choose to go a route similar to the elseif statements in my archives.php and adapted it for post formats – has worked for me.   This is where you decide what information is displayed and in what order for each type of post format.  The final else statment  is what will be displayed for any standard (default) posts.
Basic parts:   these are what I have used others could be added depending on what you wish to display – haven’t gotten my head around the gallery format just yet
   <?php if ( has_post_format( 'post format name here' )) { ?>   - starting point 1st one is "if", next are "elseif" and last is "else"
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> - displays the title 
   <?php the_content('Read More &rsaquo;'); ?> - displays the content
<div><small>Tags: <?php the_tags('', ', '); ?></small></div> - displays the tags

I replaced the original loop in my single.php and index.php files with:

[header and navigation stuff here]

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
   <?php if ( has_post_format( 'aside' )) { ?>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php the_content('Read More &rsaquo;'); ?>
<?php } elseif ( has_post_format( 'link' )) { ?>
   <?php the_content('Read More &rsaquo;'); ?>
<?php } elseif ( has_post_format( 'status' )) { ?>
<?php the_content('Read More &rsaquo;'); ?>
   <?php } elseif ( has_post_format( 'chat' )) { ?>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php the_content('Read More &rsaquo;'); ?>
   <?php } elseif ( has_post_format( 'quote' )) { ?>
<?php the_content('Read More &rsaquo;'); ?>
   <?php } elseif ( has_post_format( 'image' )) { ?>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php the_post_thumbnail( 'medium' ); ?>
   <?php } elseif ( has_post_format( 'video' )) { ?>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php the_content('Read More &rsaquo;'); ?>
   <?php } elseif ( has_post_format( 'audio' )) { ?>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php the_content('Read More &rsaquo;'); ?>
   <?php } else { ?>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php the_content('Read more &rsaquo;'); ?>
   <div><small>Tags: <?php the_tags('', ', '); ?></small></div>

 <?php } ?>
</div>

[comments, sidebar and footer stuff  here]
 
Fourth:   Style the post formats. 

Below is what I’ve added, so far, to the bottom of my css.style file using the classes created above, will probably make changes and play with this more but it’s a start:

/* post formats */

.format-aside {
padding-left: 20px;
background: #ffffff url(images/image.png) no-repeat top right;
min-height: 70px;
}
.format-link {
padding-left: 200px;
background: #ffffff url(images/image.png) no-repeat top left;
min-height: 110px;
}
.format-quote {
padding-left: 65px;
background: #b0d6b0 url(images/image.png) no-repeat center left;
min-height: 85px;
color: #ffffff;
border: 2px solid #808080;
font-family: Verdana;
}
.format-standard {
padding-left: 10px;
background: #d8d8d8;
min-height: 85px;
}

Resources

Comment Pages

There are 1 Comments to "Step by Step Guide to WordPress Post Formats"