Forums

Different Layouts for different Categories (7 posts)

  1. simonscout24
    Member
    Posted 1 year ago #

    Hello together.
    I know there's been some related threads, but I haven't yet found exactly what I need.
    I wanna build a site, where all the posts are displayed on the landing-page but there will be four different categories of posts. The links to those specific categories will be in the header and clicking on one of them will - naturally - filter out all the posts not in this category. Now here's the thing: The different categories are each associated with a specific color. And on the landing page I want this diversification represented in the way that depending on what category the post belongs to, it's header is of the specific color.

    So I don't need a how-to to associate different templates to category-pages or anything of that sort. I need the singular posts specified according to the category but all displayed together in one page. Could it have anything to do with the single.php? I don't have single.php in the theme I'm using (Dear Diary)

    Any help will be most appreciated!!

    Thanks! Simon

  2. alchymyth
    The Sweeper
    Posted 1 year ago #

    try and use post_class() in the div of each single post on the front page.
    http://codex.wordpress.org/Function_Reference/post_class

    edit index.php (or whatever template displays the front page) and try to locate the beginning of the loop (http://codex.wordpress.org/The_Loop_in_Action)

    locate the first <div which might have some code such as id="post-<?php the_ID(); ?>" and which might even already have the post_class in there;
    if not, add it.

    the post_class will add category-dependant css classes to the div, and you can use them to style your post.

  3. simonscout24
    Member
    Posted 1 year ago #

    Thanks for the swift answer!

    Two questions though.

    1. This is the beginning of the loop in my theme. Where would you include the post_class, 2nd or 3rd line?

    [Code moderated as per the Forum Rules. Please use the pastebin]

    2. How do I specify the post_class attribute to the category in terms of code? How would that specific tag look? And how would the classes in the stylesheet be called?

  4. alchymyth
    The Sweeper
    Posted 1 year ago #

    in this line:

    <div class="post">

    for instance change it to this:

    <div <?php post_class('post'); ?>>

    (this will always integrate the class="post" into the post div, together with the automatically generated classes)

    2.
    example for a post with one category and two tags:

    <div class="post-1 post type-post status-publish format-standard hentry category-contact tag-apples tag-bananas">

    the word(s) after .category- is the category slug;
    for a category with the title 'Going Home' this could be .category-going-home

    in your casse, with the <div id="posts"> surrounding the loop, typical styles in style.css would be, for example:

    #posts .post.category-contact { ... }
    #posts .post.category-contact h2 { ... }
    #posts .post.category-contact p { ... }

    to catch up with css:
    http://www.w3schools.com/css/

  5. simonscout24
    Member
    Posted 1 year ago #

    Thank you so so much for that help!

    One last question though. So, do I have to make a <div class=".... for every kind of class of post that might pop up (in my case, four plus the uncategorized one)?

  6. simonscout24
    Member
    Posted 1 year ago #

    ah, I think I just got it. Your code-example after 2. is just what the Loop will produce later. I only need to integrate the first little line into my index.php and then fix up the stylesheet for things I want to be displayed differently, right? Thanks again!!

  7. alchymyth
    The Sweeper
    Posted 1 year ago #

    I only need to integrate the first little line into my index.php and then fix up the stylesheet

    more an exchange than an integrate - but principally:
    yes.

Topic Closed

This topic has been closed to new replies.

About this Topic