Style and Structure Posts Differently on Homepage based on Custom Post Type

  • Resolved ruhelamin

    (@ruhelamin)


    12 years, 10 months 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(
                      'videos',
                      'recipes',
                      'events',
                   ),
                  '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:
    https://www.ruhelamin.com/wp-org-forum-help-post-example.jpg

    Thanks.

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.

    Thread Starter ruhelamin

    (@ruhelamin)

    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.

    Thread Starter ruhelamin

    (@ruhelamin)

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

    Thread Starter ruhelamin

    (@ruhelamin)

    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.

Tags