[resolved] Style and Structure Posts Differently on Homepage based on Custom Post Type (6 posts)

  1. ruhelamin
    Posted 4 years ago #

    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:


  2. Amy Hendrix (sabreuse)

    Posted 4 years ago #

    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.

  3. ruhelamin
    Posted 4 years ago #

    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.

  4. Amy Hendrix (sabreuse)

    Posted 4 years ago #

    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.

  5. ruhelamin
    Posted 4 years ago #

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

  6. ruhelamin
    Posted 4 years ago #

    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 :)

Topic Closed

This topic has been closed to new replies.

About this Topic