A short tutorial intended to teach people how to integrate LESS CSS and Semantic.gs with their WP themes.

This is a wordpress tutorial designated for Matches That Matter on how to update the text area for upcoming events. Feel free to take a look if you need help with a similar situation. arkudawebdesign.com

Tutorial on how to make a new page on WordPress arkudawebdesign.com

The WordPress team brought a new feature in WordPress 3.1 version, called the post-formats.
What is it? How is it different from a post category or a post tag? why do we need another characteristic to be associated with a post?
Lets try to learn about them in this post.

What is it?

A Post Format is a piece of information you specify about a post, which can be used by the theme to decide how to display it.
If the post’s format is set to “status”,then the theme could decide to just show the post’s content and the date.
In my theme CoffeeTime, I have added support for all of the post-formats that are supported by WordPress.

What are the type of post-formats that WordPress support?

WordPress supports the following post-formats.

• aside
• gallery
• link
• image
• quote
• status
• video
• audio
• chat

These post-formats will be shown on the WordPress’s Add Post / Edit Post section, if the theme that you are using supports them.

Adding support for Post Formats in a WordPress Theme

Themes should include the following code in their functions.php file if they support Post Formats.

add_theme_support( 'post-formats', array( 'aside','image','quote','status','video','audio','chat' ) );

If you are using my theme ‘CoffeeTime’ then you would see the Write Post area to have the following options.

Styling Posts differently according to the post format selected

Once we added the support for post formats, the user can select a post-format for a blog post.
Then the theme has to style the posts differently.
For that, we make sure we add post_class() method to the article tag within the loop.
Something like

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

Then we will get something like this for each article.

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

Just like this, we would get format-aside, format-image or format-gallery, depending on the post-format assigned to the post.
Now when we want to style things differently depending upon the post-format, we can add style definitions for these class names in our style.css
In my CoffeeTime theme, I added the code that looks like

.format-aside .titlearea { background:url(images/pf/aside.png) no-repeat left top;}
.format-audio .titlearea { background:url(images/pf/audio.png) no-repeat left top;}
.format-chat .titlearea { background:url(images/pf/chat.png) no-repeat left top;}
.format-standard .titlearea { background:url(images/pf/standard.png) no-repeat left top;}
.format-gallery .titlearea { background:url(images/pf/gallery.png) no-repeat left top;}
.format-image .titlearea { background:url(images/pf/image.png) no-repeat left top;}
.format-link .titlearea { background:url(images/pf/link.png) no-repeat left top;}

This will make sure we display a specific image in the title area of each post depending on the post-format specified for the post. It will look like the following.

Related Links

• Codex Link
• Free Icons by StudioPress

This is the first ever HTML5 WordPress Theme that I created.
It also uses CSS3 for some of the new CSS features like Opacity, Shadow etc.
It has a nice and big header image and it supports Post Formats feature when used with WordPress 3.1 and above.

CoffeeTime WordPress Theme.
It supports all the usual features like Tags, Gravatar, Threaded Comments etc.
If you like the theme, please share it with people you know.