Support » Fixing WordPress » Style and Structure Posts Differently on Homepage based on Custom Post Type

  • Resolved ruhelamin


    Hi. I have different Custom Post Types. For example ‘Videos’, ‘Recipes’ and ‘Events’.

    On the Homepage i can display all posts from all Custom Post Types, which i can do using the following (only the opening of the loop shown):

    <?php query_posts( array(
              'post_type' => array(
                      'paged' => $paged ) // for paging links to work
      if (have_posts()) : while (have_posts()) : the_post(); ?>

    Now for what i want to do:
    I would like to display each Custom Post Type’s post in a different style and layout/structure. So the HTML output is different and also the CSS is different.

    For an illustrated demonstration, please check the following image which should hopefully make it very clear:


Viewing 5 replies - 1 through 5 (of 5 total)
  • If your theme is using post_class() correctly (as you should! It’s very cool for this kind of styling), the post-type is automatically included as class=”type-foo”. You can then style it like you would any other CSS class.

    Thanks for the quick response Amy.

    It’s not just the styling im trying to make different, its also the html structure. If you check the link i provided with the example, it should be very clear what im trying to achieve.

    You’re right — I took a glance at your image last night, but didn’t look as closely as I should’ve.

    The bit about using post_class() still stands: it’s much easier that way than assigning classes to everything by hand.

    For the different html structures, you’ll probably also want to look at using get_template_part() to set up different php templates for each post type and call them in your index as needed. (You could just set up your index with a monster loop containing a lot of if post type == 'foo', but once you look at that, you’ll want to use get_template_part() instead.) This article is a really good writeup on how to work with different formats and post types this way.

    This looks a lot more like what i need. Thanks Amy, i will confirm once i’ve implemented it.

    Well after much reading and experimentation i have achieved the aim. Wasn’t that hard in the end but it’s because i’m a beginner with php. Anyway thanks to you Amy showing me in the right direction, i’ve managed to overcome this problem, much appreciated, Thanks very much 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Style and Structure Posts Differently on Homepage based on Custom Post Type’ is closed to new replies.