WordPress has a nice feature called Post Formats that can help you to differentiate certain posts to others in a WordPress theme. So far in our series of learning about how to customize WordPress Themes, we have seen how to create and style several posts in our system, but they all pretty much look the same. Of course we were able to create custom pages, but Post Formats work a little differently. What if we want to be able to apply that same type of customization to a post that is included in the main post stream? We can do this by using different Post Formats to apply different types of presentation styles to different types of presentation content in our theme. Let’s see how to use Post Formats in WordPress right now.
The 10 Standardized Post Formats
Built into the WordPress core software are 10 different post format types. They are as follows:
- aside: an aside post format is used for brief snippets of text that aren’t quite whole blog posts. Longer than a status, but shorter than the standard post format.
- gallery: you can use Image galleries as a great way to share your pictures with the readers of your blog.
- link: you can use this post format to simply share a great link.
- image: is intended for single image posts, like a picture of your high score on Pac man.
- quote: you can really make a quote stand out with this post format.
- status: It’s like Twitter, but on your WordPress Blog.
- video: Want to make your latest post just a great video? Use this post type.
- audio: use the audio post format for your favorite songs or podcasts.
- chat: can be used as a sort of archive of a great chat you had with someone.
- standard: is the default WordPress post format, a basic blog post. You can also add video, images, galleries, and whatever else you would like to a regular Text post.
It is interesting to note that even though WordPress itself has the ability to assign a post format to a post, the real responsibility of enabling post format support lies with whatever theme you choose to use, whether your own custom built theme or otherwise. So in other words, WordPress Post Formats are a Theme Feature. So our goal for the remainder of this tutorial will be to enable post formats support in our custom theme, and then create custom styling presentation for different post format types.
How To Enable Post Format Support In Your WordPress Theme
To enable post formats in the theme that we have been building so far, we need to visit our functions.php file and add some code. We can again make use of the handy add_theme_support() function which we have used in a prior tutorial, but we will pass it a different argument.
functions.php
<?php
function custom_theme_assets() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'custom_theme_assets' );
register_nav_menus( [ 'primary' => __( 'Primary Menu' ) ] );
function get_the_top_ancestor_id() {
global $post;
if ( $post->post_parent ) {
$ancestors = array_reverse( get_post_ancestors( $post->ID ) );
return $ancestors[0];
} else {
return $post->ID;
}
}
/* sets the excerpt length */
function customize_the_excerpt_length() {
return 30;
}
add_filter( 'excerpt_length', 'customize_the_excerpt_length' );
/* Add Featured Image Support To Your WordPress Theme */
function add_featured_image_support_to_your_wordpress_theme() {
add_theme_support( 'post-thumbnails' );
add_image_size( 'small-thumbnail', 100, 100, true );
add_image_size( 'single-post-image', 960, 250, true );
add_theme_support( 'post-formats', [
'aside',
'gallery',
'link',
'image',
'quote',
'status',
'video',
'audio',
'chat',
'standard'
] );
}
add_action( 'after_setup_theme', 'add_featured_image_support_to_your_wordpress_theme' );
You can see in this snippet of code that the first argument we pass to the add_theme_support() function is the string of ‘post-formats’. The second argument is used to specify which post formats you would like to turn on, or register. We went ahead and passed in an array of all the different post formats available. Now again, be aware that the theme developer has the responsibility of providing the code to handle these different post formats. This first step here is simply registering them in our theme. With this code now in place, if we visit our WordPress installation and go ahead and begin to add a new post, you will see we now have a new section in the dashboard which allows us to choose a post format.
How To Create An Aside Post Type In WordPress
Now that we have all the post formats to choose from, let’s go ahead and start using some of them! The first one we will try out is the aside post format. Notice that we do not fill in the title area, and we choose ‘aside’ in the post format area.
So let’s go ahead and once again visit our website and see what this new aside post format type looks like.
Admittedly, this is a bit under whelming. In fact, it is underwhelming but here is the thing to now be aware of. This post is differentiated from our standard post type, and as such, we can now target this type of post independently for special styling and presentation in our theme. How might we do this? Well this ties in nicely with the work we have recently done with the get_template_part() function. Let’s revisit our index.php file now.
index.php
<?php
get_header();
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
get_template_part( 'theposts' );
}
} else {
echo '</p>
<p>There are no posts!</p>
<p>';
}
get_footer();
?>Recall that in the while loop, we are making use of that get_template_part() function to handle rendering our posts. We put the logic to do this in a file named theposts.php. Well now we are going to pass a second argument to the get_template_part() function. The second argument is itself a function, and it is called get_post_format(). So our updated index.php file will look as follows:
<?php
get_header();
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
get_template_part( 'theposts', get_post_format() );
}
} else {
echo '</p>
<p>There are no posts!</p>
<p>';
}
get_footer();
?>What this line of code will now do is, instead of always looking for a file named theposts.php to handle rendering posts in the loop, WordPress will now try to figure out the post format and dynamically choose which file to use to render the post. So since our main file to handle this is theposts.php, to work with asides we will use the file name of theposts-aside.php. Let’s go ahead and create that file now.
theposts-aside.php
<article class="post post-aside">
<?php the_content() ?>
</article>We can see that this is very simple. All we do is set up an article tag and use the_content() function to output the content. What is important to note however is that the article tag has a class of .post-aside applied to it. This means that we can style aside post formats differently than actual standard blog post formats. Let’s go ahead and do that now by adding some custom css to our style.css file.
style.css
.post-aside {
font-size: 130%;
background-color: #fdffdc;
padding: 25px;
border-radius: 10px;
}With this in place, let’s visit our website one more time. We can see that now, things look quite different! Our standard blog posts are using the standard style associated with them. Notice however that the aside post format that we added looks very different. This is a great way to really give the site visitor an easy way to distinguish between various post formats.
How To Create A Link Post Type In WordPress
The process to add new post formats is quite the same for the other types. In order to add an aside, we created a file named theposts-aside.php. Can you guess what file we will create to handle the Link type post format? Yes that’s right, we are going to need a file named theposts-link.php. So let’s go ahead and whip that up straight away.
theposts-link.php
<article class="post post-link">
<a href="<?php echo get_the_content() ?>"><?php the_title() ?></a>
</article>Ok this looks simple enough. Again however, we have a custom style attribute applied to the article tag of .post-link which allows us to specifically target the link post type. We can now add custom styling to our stylesheet to make link post formats look different from standard posts, aside posts, or any of the other types of posts.
.post-link {
font-size: 160%;
background-color: #d1ecff;
padding: 25px;
border-radius: 10px;
}Visiting the website shows us that the link post format is different from the aside post format, which are both different from the standard post format of our prior posts. Very cool!
How To Create An Image Gallery In WordPress
We go ahead and add a new post, selecting the ‘Gallery’ as the post format type. In the title area, we will simply type out ‘Gallery Tutorial’. To add the gallery, all we need to do is click on the ‘Add Media’ button and then click on the ‘Create Gallery’ link on the left hand side of the media UI.
We select the images we want, and then click on ‘Create a new gallery’ on the bottom right.
Finally, we can add a caption to each image, choose the number of columns to use, and then click ‘Insert Gallery’.
We can visit that post and see our gallery looks pretty good!
So it seems that even without a custom file to handle outputting a gallery, WordPress will still display it properly. To follow along with how we have been adding our own files to deal with different types of post formats, we can again add a new one here. Let’s go ahead and add a file of theposts-gallery.php to our theme now.
theposts-gallery.php
<article class="post post-gallery">
<h2><?php the_title() ?></h2>
<?php the_content() ?>
</article>Once again, we have a custom style attribute applied to our article tag. This means we can target that in our style.css file like so:
style.css
.post-gallery {
background-color: #333333;
color: #ffffff;
padding: 25px;
text-align: center;
}If we view our website now, can see some of our standard posts near the bottom of the page. Our most recent posts however are of three different formats. We added a post with an ‘aside’ format, a post with a ‘link’ format, as well as our most recent post of format type ‘gallery’. Excellent!
Making sure our other views implement various post format types
A final thing to mention when talking about post formats in WordPress is that it might be nice for the custom styling we have applied to carry over to different views on the site. What we mean by this is that right now, the only time our custom files of theposts-aside.php, theposts-link.php, and theposts-gallery.php will come into play is when we are somehow making use of the index.php file. This is because this is the only file that is passing the get_post_format() function as the second argument to the get_template_part() function. Remember, it is this combination of functions that decides which file to make use of as we learned. It turns out we are also using the get_template_part() function in both our archive.php and search.php files. It might be nice to update those files like so now:
archive.php
<?php
get_header();
if ( have_posts() ) {
?>
<h2><?php
if ( is_category() ) {
single_cat_title( 'Category Archive: ' );
} elseif ( is_tag() ) {
single_tag_title( 'Tag Archive: ' );
} elseif ( is_author() ) {
the_post();
echo 'Author Archives: ' . get_the_author();
rewind_posts();
} elseif ( is_day() ) {
echo 'Daily Archives: ' . get_the_date();
} elseif ( is_month() ) {
echo 'Monthly Archives: ' . get_the_date( 'F Y' );
} elseif ( is_year() ) {
echo 'Yearly Archives: ' . get_the_date( 'Y' );
} else {
echo 'Archives: ';
}
?></h2>
<?php
while ( have_posts() ) {
the_post();
get_template_part( 'theposts', get_post_format() );
}
} else {
echo '<p>There are no posts!</p>';
}
get_footer();
?>search.php
<?php
get_header();
if ( have_posts() ) {
?>
<h2>Search results for query: "<?php the_search_query(); ?>"</h2>
<?php
while ( have_posts() ) {
the_post();
get_template_part( 'theposts', get_post_format() );
}
} else {
echo '<p>No search results found!</p>';
}
get_footer();
?>If we view a search result, our post format is in tact!
If we view the archives of a particular month, once again all post formats are in tact thanks to the implementation of the get_post_format() function.
WordPress Post Formats Summary
In this tutorial, we learned all about Post Formats in WordPress. We learned about the ten different kinds of post formats such as aside, gallery, image, video, audio, link, quote, status, chat, and standard. These are guidelines for you the WordPress theme developer to build upon to meet the particular requirements you may be facing. These custom post formats make it possible to have specialty posts which can look different than the standard post, or have a unique layout that suits the page best. We learned how to register post formats in our functions.php file, how to add new files to our theme to render these posts, as well as how to style different post formats in unique ways.
