WordPress Post Class

There are many themes that offer magazine style layouts for the WordPress platform, we thought it would be fun to create a twenty eleven child theme with some different layouts, we have also created a child theme download so you can grab that, review the code and use it as you want.

This post was the result of answering two topics on the same day over on the WordPress forum, the first topic wanted a way to style the page content for a table layout, the second wanted a different style for a set number of posts.

The Post Class

Using

tThe Post Class we can add our own custom classes to a WordPress post, that could be a post list or a page content area, we use the post class to add our own class to a themes content area otherwise known as ‘the WordPress loop’, this can be a single page, post or multiple posts.

It can be ‘easy as’ in the content loop adding a bit of code with a call to post_class(), we can easy add a new class like this, post_class(‘my-class’) then we just style the new class in our style.css.

We have the examples below as a twenty eleven child theme, you can download the theme so you can look at the example code changes, change or use the files in your own child themes, the files are meant as learning aids to work with, and not as complete solutions.

Twenty Eleven Post Class

Page Template

One feature in WordPress is our ability to create template pages, these templates can then be applied to one of our websites Pages, we will start with a page template, something quite simple for any page we will use it as a Contact Us page.

We copied two files from the twenty twelve parent theme page.php and content-page.php across to the child theme’s folder, we renamed them as page-contact.php and content-contact.php

Page Contact

We created the template page by opening page-contact.php and adding our Template Name directly after the <php tag.

<?php
/*
Template Name: Contact Us
*/

Our new page template has to call the content.php loop file we renamed to content-contact.php we call this in the code by changing one line, change ‘page’ to ‘contact’ .

<?php get_template_part( 'content', 'contact' ); ?>

In our example code we have moved the comment_template() call just below the closing content div, that is the two small changes completed.

Next we modified the content-contact.php, all we did here was to add our ‘contact-us’ style class, when WordPress renders the content it will append our new class as the last class of the article section classes.

<article id="post-<?php the_ID(); ?>" <?php post_class( 'contact-us' ); ?>>

We had a new custom class that we could style as we wanted, for our example we just styled the content area, giving it a new background color and a border.

/* = Contact Us Page - Background and border
-------------------------------------------------------------- */
.singular .contact-us {
   display: block;
   padding: 1.5em 0 0 !important;
   width: 100%;
   margin-left: -2px;
   background: #FAFAD2;
   box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
   border: 2px solid #E0E0E0;
}

We can apply the template to our page in the admin section, edit or quick edit.

post-class5

When we viewed the page we could see the class style results.

post-class1

That is a simple example completed, just to show how we can use the post_class in a template page and content loop.

Post Counter Code

The example above is great for pages, but to make the content loop more interesting, we needed a little bit of code we could add to give us more control over the output.

This code we came up with gives us control to change the classes based on a $counter.

<?php
global $wp_query;
$divisor = 5;
$counter = ($wp_query->current_post + 1) % $divisor;
$class = $counter ? 'recent-' .$counter : 'recent-' .$divisor;
?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $class ); ?>>

WordPress will give us the current post number based on our posts per page setting in Settings > Reading > Posts per Page, which has the default of 10, and $wp_query->current_post will start at zero, so ten posts returns 0 – 9

To make the code easy to use we set the $divisor to the number of styles, in this example we wanted five, others might want two for columns.

The bit of code % $divisor; will return 0 if the counter is divisible by 5, so for ten posts we get 1, 2, 3, 4, 0, 1, 2, 3, 4, 0

$class = $counter ? 'recent-' .$counter : 'recent-' .$divisor;

This line will concatenate ‘recent-‘ and $counter only if $counter != 0,if $counter == 0 it will concatenate ‘recent-‘ and $divisor.

We will get the folowing classes recent-1, recent-2, recent-3, recent-4, and recent-5

Last we add our new class with the post class post_class( $class ); WordPress will append our class ‘recent-1’ to the other post classes!

<article id="post-1" class="post-1 post type-post status-publish format-standard hentry category-uncategorized recent-1">

Content Switch

We have discussed the code now lets look at one of the examples in the download and how it is used, we copied content.php from the twenty eleven theme and renamed it as content-switch.php, all we wanted to do was to have two classes ‘setting $divisor=2’ to switch the thumbnail image left and right, you can look at the styles.css in the download to see how we styles the thumbnails.

<?php
global $wp_query;
$divisor = 2;
$counter = ($wp_query->current_post + 1) % $divisor;
$class = $counter ? 'switch-' .$counter : 'switch-' .$divisor;
?>

We only wanted the excerpt and thumbnail so we removed the conditional content code and added the thumbnail call, again please look in the download and compare the file to content.php

We have a new content-switch.php loop and we will use it in the archive.php file, we copied the archive.php from the parent to the child themes folder and changed this line.

get_template_part( 'content', 'switch' );

 

post-class2

This switch pattern will repeat for all posts on each page for the archive.php.

Content Color

Another of the examples in the download, we copied content.php from the twenty eleven theme and renamed it as content-color.php,  we wanted to have seven classes ‘$divisor=7’ to color the post background and added a border, again we only wanted the thumbnail and excerpt, you can look at the full code and styles.css in the download.

<?php
 global $wp_query;
 $divisor = 7;
 $counter = ($wp_query->current_post + 1) % $divisor;
 $class = $counter ? 'color-' .$counter : 'color-' .$divisor;
 ?>

This gives classes: color-1, color-2, color-3, color-4, color-5, color-6, color-7

We copied search.php across from the parent the to the child themes folder and changed the get_template_part to call the content-color.php file.

get_template_part( 'content', 'color' );

 

post-class3

Content Category

Another of the examples in the download, we copied content.php from the twenty eleven theme and renamed it as content-category.php, we wanted to have five classes ‘$divisor=5’ to layout the posts in the Category lookup, like a magazine Two over Three, again we only wanted the thumbnail and excerpt, you can look at the styles.css in the download.

<?php
global $wp_query;
$divisor = 5;
$counter = ($wp_query->current_post + 1) % $divisor;
$last = ( !$counter || $counter == 2 ) ? ' last' : '';
$class = $counter ? 'five-' .$counter .$last : 'five-' .$divisor .$last;
?>

This gives the classes five-1, five-2, five-3, five-4, five-5

In this example we are adding two custom classes  $class ‘five-’,  $last ‘ last’, $last is added to the second and fifth posts to remove the right margin, we also added a clearing div to clear the floats on post two and five.

<?php if( $last ) : ?>
<div class="cleared"></div>
<?php endif; ?>

We copied category.php from the parent to the child theme, as we have three posts across we also remarked out the sidebar call, in the style.css we changed the margins, refer to the download to see the style changes.

<?php get_template_part( 'content', 'category' ); ?>
<?php // get_sidebar(); ?>

 

post-class4

Conclusion

This post is just meant as an introduction to post_class and offer some ways to use it in a child theme, different themes will be structured differently, we use the default WordPress theme which is available free to everyone.

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

5 thoughts on “WordPress Post Class

  1. Sorry but I don’t understand WHY we need a Loop in the Contact template. We are not displaying any Posts; just Page content. Obviously I don’t understand The Loop but I can’t find an explanation of this particular situation. Could you fill me in?

    Thanks

    • You are quite correct a page does just returns a single filtered record, however not all calls are from a page menu, if someone is not using the menu but uses the url, or it is being called from a link in a page or post somewhere.

      WordPress has to check the page->ID or post->ID is valid, so it uses the conditions, have_posts() and then the_post() so we deal with any bad url’s with a message and do not get a browser redirect to “page not found”

      The files in the download are just modified copies of the twenty eleven files, and that is the code in the original files.

      HTH

      David

        • Hi Larry,
          All pages, posts, attachements etc: are held in the WordPress wp-post table in the database

          When you use a url the post-ID, page-ID, attachment->id or {slug} are part of the request, so WordPress adds filters to the records and wp_query() will return a single record, so it ‘gets this record’

          With the index.php, search.php, category.php and archive.php, wp_query() will find a recordset of all records withing the filter, like ‘category=sport’, so it ‘gets this recordset’

          HTH

          David

  2. Hi there, can you help me please,,how to keep show the sidebar on the content category? I really like the posts layout of category but i want to keep my sidebar on the right side. Thank you so much for help 🙂

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Tips

colorizer-1_thumb.png

We thought we would use the WordPress Twenty Eleven theme and the the Farbtastic color picker to colorize our theme from the website front page instead of the admin area. We have been looking at the $_SESSION variable, so we thought … Continue reading

Read More

Posted in Twenty Eleven

pluggable-image2_thumb.png

In April 2011 we wrote a post on pluggable functions, since then we have been looking at other functions like post classes, which we used in the first release of our photo blogging theme. While loitering over on the WordPress … Continue reading

Read More