How to Add Post-Format

Looks like you want to add this in your functions.php file:

if (function_exists('add_theme_support')) {
    add_theme_support( 'post-formats', array( 'aside', 'link', 'quote' ) );
}

I found this information here:

https://codex.www.ads-software.com/Function_Reference/add_theme_support

This should at least answer your question #2. Since you know 1 and 3, you’ll probably be all set. Let me know if you need more help.

Hi nathanielgivens,

Let’s see if we can’t help ease the pain a little bit ??

According to the Codex, I need to do a step for “Adding Post Type Support” that involves using add_post_type_support() or modifying the register_post_type() function (both in functions.php). This is confusing.

If you want to add post-format support to your theme, open up your theme’s functions.php in the editor and before the closing ?> tag, you would add something like this:

add_theme_support( 'post-formats', array( 'image', 'aside', 'gallery' ) );

The Post Formats article you mentioned has the list of all 9 post formats that you can use. You need to specify each of the ones you’d like to add support for in the array() block as I did above.

EDIT: Seems like we’re stepping on each other’s toes a bit this morning, eh wpismypuppet? ??

Thanks for the really rapid replies, wpismypuppet and Drew. I tried adding the conditional code snippet (the one suggested by wpismypuppet) in the functions.php file. I added it inside the setup() method (specifically: function ari_setup()). The good news is that nothing *broke*. The bad news is that I still have no post-format.

Right now I’ve got a few tests posts that each have a different post-format applied. I also have some basic custom formatting in style.css:

/* CUSTOM FORMATTING FOR POST-FORMAT
--------------------------------------------- */
.format-aside .titlearea { background:url(images/aside.png) no-repeat left top;}
.format-audio .titlearea { background:url(images/audio.png) no-repeat left top;}
.format-chat .titlearea { background:url(images/chat.png) no-repeat left top;}
.format-standard .titlearea { background:url(images/standard.png) no-repeat left top;}
.format-gallery .titlearea { background:url(images/gallery.png) no-repeat left top;}
.format-image .titlearea { background:url(images/image.png) no-repeat left top;}
.format-link .titlearea { background:url(images/link.png) no-repeat left top;}

Finally, I do have the images in the appropriate folder ( wp-content\themes\ari\images ). So, if post-format was working, I’d see the custom icons on my test posts, but I don’t.

What should I try next?

Interesting… just adding the bit of code I mentioned makes the “Format” meta box show throughout my entire install. Maybe your screen options has it unchecked? Try going to your posts, open any post, and click “Screen Options” in the upper right corner. Make sure “Format” is checked off.

wpismypuppet-

I don’t have any problem getting the Format box to show up. I’ve had that working for weeks. ?? I have dutifully created a couple of posts with varying post formats and–in the Dashboard–they are correctly displayed as “Standard”, “Aside”, and “Link”. (That’s all I have so far.)

The problem is that when I actually go to my site (difficultrun.nathanielgivens.com) there is no indication at the front-end of any post-format.

Based on the style.css code I copy-pasted, they should each have a customized icon, but there are no icons. There’s no different whatsoever between the posts that are Standards and the Aside and Link posts that I’ve created.

In short: I can select the post-formats when I write a new post, but it has no effect whatsoever to anyone viewing my blog, and that’s what I’m stuck on.

Thanks again for taking the time to help me.

Sorry, I was confused by previous reading, but I know see your question 1 said you accomplished this ??

In that case, remove the code I mentioned as all that does is turn on the meta box in the admin area. Since you had that working for months, this is duplicate code… you would have already had that somewhere.

I “think” what we need to do is put the classes in a container. For example, your body tag has something like this:

<body <?php body_class($class); ?>>

To use these formatting classes, you need to put them in a container. If you are using the “Aside”, I would assume you’d want something like this:

<aside <?php post_class(); ?>>

The important piece of code here is:

<?php post_class(); ?>

You’ll need to put that inside a tag where you want these classes to be outputted. If the tag has format styles, this function will pump them out. If not, no class is created. Just keep in mind, if you already have classes assigned to that tag, I believe this will break it, not add to it. So, if you had something like:

<aside class="here" <?php post_class(); ?>>

I would think it might break. Not tested, so talking out of my you know what. But try to make sure the container you are attaching the post_class() to doesn’t have a pre-existing class.

wpismypuppet-

Thanks again for taking the time to help out a n00b. So the

<?php post_class(); ??

stuff is what I read about from this tutorial: https://wprocks.com/2011/09/25/what-are-post-formats-how-do-we-put-it-to-use/

Specifically:

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

So, I went to do that and put it in the loop.php file (I don’t know why Ari has one of those), but when I went to do that I found that the code was already there:

<?php /* Start the Loop. */ ?>
<?php while ( have_posts() ) : the_post(); ?>

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

So that snippet shows the start of a while-loop and then the first line is something involving the post_class() method, so when I saw this, I thought “I guess I don’t need to add it again…”

But maybe I was wrong? Is loop.php the place where I should be adding this post_class() method, and is the current code (copy-pasted above, which obviously isn’t working) actually doing something else?

Ok… I broke down and got Ari and looked at the code, then looked at your site and viewed the source and here’s what I found:

Apparently you have done everything correct EXCEPT for the styles in the stylesheet. Looking at your code, you have divs in the content area that are showing:

<div class="post-12 post type-post status-publish format-aside hentry category-uncategorized" id="post-12">

You can see “format-aside” in there. Looking at your sylesheet, you are trying to add a background image to something with a class of “titlearea”, which doesn’t exist anywhere in your code. For testing, remove .titlearea from each of your .format-whatever styles and see if the background shows up. Then you can place the image where you need it.

I used firebug and edited the h2 tag inside this div and added a class of “titlearea” and I saw a circle button with a lowercase “a” inside.

wpismypuppet-

You, my new friend, are a gentleman and a scholar! It looks terrible when I remove the .titlearea, but it works! That’s stupendous!

I may have some questions later about how to get the formatting just right, but the question I had here was how to get the post-format working at all, and you have graciously helped me out.

Thanks so much!

(Well, you might be a gentlelady, but you get the picture. No gender-assumption was intended!)

You are welcome… but you had it right all along. You just goofed a bit on the styles. Happens to me all the time!

P.S. gentleman is correct ?? I work for a graphics and web design firm and we create almost all our sites in WordPress now… good luck and let me know if you have more questions!