Cómo dar un estilo diferente a cada entrada de WordPress

53 comentariosDeja una respuesta

1. Rafael

   Nice article. I guess I could use something like this to check the category of a post and place a custom CSS to change the style of part of the website according to the category, right?

   I’m looking to set different colors only to the background of the Title of the Post for each Category in a Blog.

   Responder

2. Kany

   Hi, great article. How to custom css style latest blog news? Just the latest one, any idea? Tnx.

   Responder

   • WPBeginner Support

     Your theme would need to add something that can be targeted by CSS, at the moment we do not have a recommended method for adding that.

     Responder

     Administrador

3. Les

   Great article. I wanted to set the default Font size per category and followed the instruction by adding the code to the Style.css file but when I added a new post the font was the old size. See code? What am I missing?

   /* Begin Additional CSS Styles */
   .art-blockheader .t, .art-vmenublockheader .t {white-space: nowrap;}
   .desktop .art-nav-inner{width: 1200px!important;}

   .category-firstg {
   font-size: 18px;
   font-style: bold;
   }
   /* End Additional CSS Styles */

   Responder

4. William D

   Great article, thank you very much. Could the read more button color/text color also be changed in a similar manner? Something (I probably did) has changed my buttons in a very unpleasant way and I’m having a heck of a time trying to figure out how to make them pleasant again.

   Thanks in advance for any help you might provide!

   Responder

5. Matus

   Great tutorial. Simple and clear explanation.

   Responder

6. Neon Emmanuel

   Hello, if i include this in single.php it echo back the current post title, but works fine in index.php, any suggestion to this?

   Responder

7. MayMyatKhine

   Hello,Please send to me the new event to use the wordpress.

   Responder

8. marisa

   This is a great article but I’m having trouble with placing
   ID, ‘post-class’); ?>

   Where exactly in the loop do I put it? I am using underscore.me with foundation 5 and my new class isn’t appearing.

   Responder

9. Alberto Hartzet

   Perfect!, ty. What about the first and “the last” post? any ideas?

   Responder

10. Nadeem

    Thanx alot bro..its very helpful

    Responder

11. RW

    yet another bookmark! great post! thank you…

    Responder

12. Payal

    Very informative, thank you. I’ve bookmarked this page.

    I also have a question: What if I wanted to style the first (latest) post differently — so that the post displayed at the top of my index page shows up differently?

    Responder

13. James

    Hey there, I’m struggling with this atm..

    My post loop doesnt seem to have a post_class function so I cant figure out where to place the above code…

    This is the loop I use for posts, where would I place the above code? Or how could I get custom fields to work using this?

    Responder

    • Editorial Staff

      You have to add something like this on your post loop:

      <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

      Hosted with ❤️ by WPCode

      
      1-click Use in WordPress

      Responder

      Administrador

14. Jon Fuller

    Hello, I am quite new to making WordPress themes and I am looking for a way to display each post in a box of its own which is seperated by a margin top and bottom. Please explain how this is possible.

    Thanks

    Responder

    • Editorial Staff

      By default each post is inside its own div element. You just have to use CSS to add margin-top and bottom.

      Responder

      Administrador

15. Shaun

    Curious, how could this be applied to adding a CSS class to only posts posted that have the same “meta value” or “meta value number”?

    Thanks for the great tutorial by the way!
    Best

    Responder

    • Editorial Staff

      We showed how to do it with custom fields, but that’s being done by key. But if you have the same key with multiple values, then you should get_post_custom_values function.

      Responder

      Administrador

16. Em

    Just found this post and it is great, clear, succinct and spot on, many thanks

    Responder

17. Jim

    I would like to do something where post one gets the class “1”, post two gets “2” post three gets “3”, and then it repeats this order, so post four gets “1” again.

    Any tips? it’s just repeating three different classes every three posts.

    Responder

    • Editorial Staff

      You would have to use the super loop option.

      Responder

      Administrador

18. Brit

    What I’m trying to do specifically is just make it so when someone lands on my blog, that the thumbnail (which is just a circle with the post title) is a different color for ONLY the most recent post. I’m at a loss of how to make this happen. Everything I’ve found is category or order specific. Thoughts?

    Responder

    • Editorial Staff

      Brit, you would have to use the last method “Super Loop”. That is probably the only way of doing it because all what you would do is on the first post, you add a unique class such as “first-post” , and then style that using your CSS file.

      Responder

      Administrador

19. Jayaseelan Arumugam

    It is very Nice and useful post. Especially I like the way to Style Posts based on Custom Fields. Thanks.

    Responder

20. Kathleen

    Thanks for this great article! It’s exactly what I searched for and so much helpful!

    Responder

21. dina

    How do I add unique class to the 3rd, 6th, 9th, and 12nd posts in super loop. Thanks!

    Responder

22. vajrasar

    Well, that is a very good piece. I got what you said, but can you shed some light on how am gonna implement this on my Genesis driven News Child theme, as I am supposed to do all this with function.php

    I would like to style category specific posts differently. Thanks a lot for this piece. very informative.

    Responder

    • Editorial Staff

      So if you are just using the post class method, then Genesis has the field under their Layout settings for each post. You can enter a custom class and style it that way. The rest can get pretty complicated depending on all the hooks and such. We don’t necessary do genesis specific articles here.

      Responder

      Administrador

23. jim

    What do you mean index.php in the loop. which index.php. Mine has nothing like yours. This is the 10th post I’ve read where no one has explained this basic concept properly. And what about the CSS. Last 10 posts didn’t explain that either. Internet is getting worse and worse.

    Responder

    • Editorial Staff

      Hey Jim,

      Every WordPress theme does things differently. The concept of loop is pretty well explained in the WordPress Codex. It requires a simple google search: Loop WordPress which will take you to: http://codex.wordpress.org/The_Loop

      Because every theme varies, some utilize a separate loop.php file others are child themes which don’t even have index.php files. It is really hard to explain all of those concepts. When we put tutorials in a theme category, we expect the users to have a fair knowledge of how WordPress themes work (even if you don’t know PHP).

      Responder

      Administrador

24. Haider E Karrar

    I think you should be using filters instead in combination with the template tags here http://codex.wordpress.org/Conditional_Tags

    For example

    function my_post_css_filters($content) {
    if(is_category(…))
    return ” $content “;
    else if (something else)
    ….

    }

    add_filter(‘the_content’, ‘my_post_css_filters’, 1) — (priority 1, not sure what else it may affect).

    Responder

25. Hossein

    Hi..

    How i can wrap every 4 posts in a div ?

    Responder

26. gashface

    Nevermind got that working, but NOW it doesn’t style each post differently, it just styles them all according to the first post author it finds?

    Responder

27. gashface

    Is there a way to specificy a tag like H2 is styled by author I am trying .username h2{} for example but it won’t work?

    Responder

28. gashface

    This doesn’t show the author with me just a blank space, pasted your exact code, any ideas? posts made by admin and are private, does that make a difference?

    Responder

    • wpbeginner

      @gashface not it doesn’t make a difference whether the post is private or public… If it is returning a white page, then you are pasting the code in a wrong place.

      Responder

      • gashface

        I realised it was because I was putting the code before the call to the loop, I thought you meant before the if have posts etc.. when it needs to go after that, thanks for the heads up

        Responder

29. KimeeDoherty

    This was a little helpful, but I am still lost Not sure how to include the loop file in order to override the template. You started the <div> tag but not ended them, what’s inside the div? I’m lost

    Responder

30. kristelvdakker

    Thank you so much for this post! It has been very helpful.

    Responder

31. Stuart

    Hi, thanks for the ideas – especially the super loop – pleased to have got it working on my site.

    But I wonder, complete php beginner here, so is there a way to adapt the code so each subsequent page of posts doesn’t get the styling that posts 1, 2, 3, & 4 get on the first page.

    In other words, I only want the first four posts on the first page to look any different to the rest.

    Cheers,
    Stu

    Responder

    • Editorial Staff

      Yes. You can use is_paged() conditional tag, so it only shows up on the first page, but not the others. You can also use is_home() … so only on the homepage.

      Responder

      Administrador

      • Stuart

        Cool – thank you. Looks like is_paged() is the one for me – but unfortunately, my novice abilities mean I’m struggling to work out how to integrate it in to the code.

        Responder

      • Stuart

        Got there in the end…

        Responder

32. Michael

    If you wanted to use this approach to separate posts visually based on their published date. How would you go about it? For example: style the 5 posts published on the 1st with a black background, and then style the posts published on the 2nd with a red background? Thanks in advance!

    Responder

    • Editorial Staff

      The best way to do this is using the superloop method. Where you use the counter variable to set the post class values.

      Responder

      Administrador

33. Dale

    I am trying to style each authors name a different colour on our wordpress website and I have followed your code as below:

    Whilst this code is kind of working on my wordpress theme it is putting end quotation marks after class-2 but before the authors name so the class is being closed without the name in it. I only found this out by putting that php inside the body where you can see the full string.

    Does anyone have any ideas why this is happening?

    Responder

    • Dale

      Sorry it stripped out the php I posted but here is the class output of styling my posts by the authors name. The author here is called admin, and as you can see the closing tag is before the author name admin.

      “post-395 post type-post hentry category-uncategorized class-1 class-2″admin

      Responder

34. Bec

    Great post! That info is awesome for adding those extra special custom features to your design.

    Responder

35. Adam W. Warner

    Indeed a great post, hats off! However, I couldn’t help but keep thinking about when it’s time to upgrade the theme you’re making all these custom edits to. I try to use the functions file whenever possible to avoid overwrites.

    I would think it would be better to roll these loop edits into a function. I know that with Parent Themes like Thematic, Hybrid, Genesis, etc…that it’s possible (and advisable) to filter the loop and thus add these changes.

    @Ken – Maybe your plugin would negate the need for any functions altogether?

    Anyway, just my two cents and congrats Syed and the team on your continuing excellence on this site!

    Responder

36. Azad Shaikh

    Very useful post indeed. Why don’t you publish some wordpress themes with your awesome ideas and functionality. I would be great success.

    Thanks!

    Responder

37. Ken

    Your article has giving me a few ideas on how to improve my plugin, thanks for that!

    I just wrote a plugin (Scripts n Styles) for adding CSS directly to the head element from the post/page editing screen. (Only admin users can do this though.) It’s not as robust (or rather, doesn’t address the same thing) as your solution because the CSS only appears on the single view, not in the lists (archives).

    I’m considering adding the functionality to include a class name into post_class, but via a meta box on the admin screen. Then, the admin would only have to add the css to his theme. (Or, perhaps a setting screen to facilitate this?)

    Anyway, the Super Loop seems useful for theming in general, I’ll have to include that in my next one!

    Responder

38. Connor Crosby

    Wow, that is a great post! Perfect timing since I am making a new Wordpress theme

    Responder