WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to Add Post-Format (12 posts)

  1. nathanielgivens
    Member
    Posted 1 year ago #

    I would like to add the post-format functionality to my blog. I've spent a couple of weeks trying to find a good how-to online, and I haven't found one that works. All I've got are contradictory how-to's that don't work.

    As far as I can tell, there are three general steps to enabling post-foramt:
    1. turn on post-format in the admin panel (easy, done)
    2. get post-format working internally (I can't figure this out)
    3. add some conditional formatting for post-format in the style sheet (I think this is easy, and I've got some sample code there to test it out)

    Here are the two main sources I've been trying to use to get this to work:

    Source 1: WordPress Codex (http://codex.wordpress.org/Post_Formats)

    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. First, I'm not sure what kind of post I should be modifying (what should the arguments be for the add_post_type_support() function?) and secondly, I've looked through the twentyeleven theme (which does use post-formats) and neither of these functions are used in functions.php (or anywhere else that I can fine).

    Source 2: WPRocks.com (http://wprocks.com/2011/09/25/what-are-post-formats-how-do-we-put-it-to-use/)

    This approach is based on adding the post_class() method to the loop.php file (I think), and I followed the instruction for Ari (which has a loop.php file), but it's not working. In addition, twentyeleven doesn't have a loop.php file, so the instructions perplex me.

    My main goal is to get post-format working (I want to use Aside, Link, and Quote primarily) on my blog, but I would appreciate any response that also helps me to understand the WordPress internals better. I've got no experience with PHP and very little with CSS, but I do Java and C# at the hobby level, so I'm willing to learn.

    My blog is at difficultrun.nathanielgivens.com, by the way.

    Thanks!

  2. wpismypuppet
    Member
    Posted 1 year ago #

    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:

    http://codex.wordpress.org/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.

  3. 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? :)

  4. nathanielgivens
    Member
    Posted 1 year ago #

    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?

  5. wpismypuppet
    Member
    Posted 1 year ago #

    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.

  6. nathanielgivens
    Member
    Posted 1 year ago #

    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.

  7. wpismypuppet
    Member
    Posted 1 year ago #

    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.

  8. nathanielgivens
    Member
    Posted 1 year ago #

    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: http://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?

  9. wpismypuppet
    Member
    Posted 1 year ago #

    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.

  10. nathanielgivens
    Member
    Posted 1 year ago #

    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!

  11. nathanielgivens
    Member
    Posted 1 year ago #

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

  12. wpismypuppet
    Member
    Posted 1 year ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic