WordPress.org

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.