Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak stylizować każdy wpis WordPress w inny sposób?

Czy chcesz nadać inny styl każdemu wpisowi WordPress na twojej witrynie internetowej?

Być może natknąłeś się na witryny internetowe, które wyróżniają przypięte wpisy za pomocą własnego tła lub stylizują każdy wpis kategorii na unikatowy wygląd. Ty również możesz to zrobić, aby mieć wpływ na różne rodzaje treści i stworzyć atrakcyjne wizualnie doświadczenie dla użytkowników.

W tym artykule pokażemy, jak w prosty sposób nadać inny styl każdemu wpisowi WordPress.

Style Each WordPress Post Differently

Uwaga: Ten poradnik wymaga dodania własnego CSS w WordPress. Będziesz także musiał być w stanie korzystać z narzędzia Inspect i mieć podstawową wiedzę na temat CSS, więc może nie być odpowiedni dla zupełnie początkujących.

Plusy i minusy stylizowania każdego wpisu na WordPressie w inny sposób

Jeśli masz bloga WordPress, stylizowanie każdego wpisu w inny sposób może stworzyć unikatowe wrażenia wizualne, w których różne kolory są powiązane z różnymi kategoriami lub typami treści.

Na przykład, możesz użyć innego koloru tła dla wszystkich list, wpisów na blogu i poradników na twojej witrynie internetowej. Może to natychmiast przyciągnąć uwagę użytkowników i zwiększyć zaangażowanie.

Należy pamiętać, że takie rozwiązanie może mieć również pewne poważne wady. Na przykład, będziesz musiał regularnie dbać o wygląd każdego wpisu WordPress, co może być czasochłonne.

Ponadto może to zapewnić niespójne wrażenia użytkownika i nie pomoże w budowaniu tożsamości Twojej marki. Wynika to z faktu, że musisz używać tych samych kolorów na całej witrynie internetowej, aby stworzyć obrazek Twojej firmy.

Jeśli jesteś początkującym, to dodanie własnego CSS do stylizacji każdego wpisu może być również trudne. Powiedziawszy to, zobaczmy, jak można łatwo nadać inny styl każdemu wpisowi WordPress.

Jak stylizować poszczególne wpisy w WordPressie?

WordPress dodaje domyślne klasy CSS do różnych elementów na twojej witrynie internetowej. Motywy używają rdzennej funkcji WordPressa o nazwie post_class(), aby powiedzieć WordPressowi, gdzie dodać te domyślne klasy CSS dla wpisów.

Jeśli przejdziesz na twoją witrynę internetową i użyjesz narzędzia Inspect w przeglądarce, będziesz mógł zobaczyć te klasy dodane dla każdego wpisu.

Use the Inspect tool to view the CSS classes

Poniżej znajdują się klasy CSS dodawane domyślnie w zależności od tego, którą stronę zobaczy użytkownik:

  • .identyfikator wpisu
  • .wpis
  • .attachment
  • .przypięty
  • .hentry (strony mikroformatu hAtom)
  • .category-ID
  • .category-name
  • .tag-name
  • .format-{format-name}
  • .type-{nazwa-typu-wpisu}
  • .has-post-thumbnail

Przykładowe dane wyjściowe wyglądają następująco:

<article id="post-412" class="post-412 post type-post status-publish format-standard hentry category-news">

Każdy wpis WordPress można stylizować w inny sposób za pomocą odpowiednich klas CSS lub identyfikatorów. Aby to zrobić, należy najpierw znaleźć identyfikator wpisu dla danego wpisu.

W tym celu musisz przejść na stronę Wpisy ” Wszystkie wpisy z kokpitu WordPress i najechać kursorem myszy na wpis.

Adres URL wpisu pojawi się teraz w lewym dolnym rogu twojego ekranu. Tutaj można znaleźć identyfikator wpisu, patrząc na liczbę między „post=” i „&action”.

W poniższym przykładzie identyfikator wpisu to 25.

Gdy już to zrobisz, musisz dodać klasę CSS wraz z własnym kodem do plików motywu lub w konfiguratorze motywu. Może to być jednak ryzykowne i zepsuć twoją witrynę jednym błędem.

Dlatego zamiast tego zalecamy korzystanie z WPCode. Jest to najlepsza wtyczka do fragmentów kodu WordPress i najbezpieczniejszy sposób na dodanie własnego kodu do twojej witryny.

Najpierw należy zainstalować i włączyć darmową wtyczkę WPCode. Aby uzyskać szczegółowe informacje, zapoznaj się z naszym przewodnikiem dla początkujących, jak zainstalować wtyczkę WordPress.

Po włączaniu przejdź na stronę Fragmenty kodu ” + Dodaj fragment z kokpitu WordPress. Tutaj kliknij przycisk „Użyj fragmentu” pod opcją „Dodaj swój konfigurator kodu (nowy fragment)”.

addnewsnippet

Spowoduje to przejście do strony „Utwórz własny fragment kodu”, gdzie możesz zacząć od dodania nazwy dla twojego fragmentu kodu. Następnie wybierz „CSS Snippet” jako rodzaj kodu z rozwijanego menu po prawej stronie.

Następnie należy dodać klasę CSS i identyfikator twojego wpisu w polu „Podgląd kodu” w następujący sposób:

.post-13 { }

Następnie możesz dodać dowolny własny kod CSS między nawiasami, aby nadać styl twojemu wpisowi.

Add the individual post ID in the Code Preview box

Na przykład, jeśli chcesz zmienić kolor tła pojedynczego wpisu, możesz dodać następujący własny kod CSS. Pamiętaj, że musisz zastąpić identyfikator wpisu w tym kodzie twoim identyfikatorem. Tam, gdzie jest to . wpis-13, twój może być .wpis-23873.

Możesz również zmienić kod szesnastkowy koloru tła na dowolny wybrany przez ciebie kolor:

.post-13 {
background-color: #FF0303;
color:#FFFFFF;
}

Następnie przełącz przełącznik „Nieaktywny” u góry na „Aktywny” i kliknij przycisk „Zapisz fragment kodu”, aby zapisać twoje ustawienia.

Własny kod CSS będzie teraz automatycznie wykonywany w twoim indywidualnym wpisie po włączaniu fragmentu kodu.

Activate the CSS code snippet for the individual post

Przejdź na swój wpis na blogu WordPress, aby zobaczyć zmiany w czasie rzeczywistym.

Możesz także dodać inne własne fragmenty kodu CSS w polu „Podgląd kodu”, aby zmienić kolor zaznaczenia tekstu, kolor tekstu, kolor odnośników wewnętrznych i wiele więcej.

Background color preview for an individual post

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem dla początkujących na temat dostosowywania kolorów w WordPress.

Jak stylizować wpisy w określonej kategorii

Jeśli chcesz stylizować wszystkie wpisy należące do określonej kategorii, możesz to również zrobić za pomocą WPCode.

Musisz przejść na stronę Code Snippets ” + Add Snippet i wybrać opcję „Add Your Custom Code (New Snippet)”.

Następnie utwórz nazwę fragmentu kodu na nowej stronie i wybierz „CSS Snippet” jako rodzaj kodu. Następnie wpisz klasę CSS określonej kategorii w polu podglądu kodu w następujący sposób, używając uproszczonej nazwy kategorii po myślniku:

.category-books { }

Gdy już to zrobisz, możesz dodać dowolny własny fragment kodu CSS w polu, aby zastosować go do wszystkich wpisów w różnych kategoriach.

Add the category CSS class and name in the code preview box

Na przykład, jeśli chcesz zmienić wielkość i styl czcionki dla wszystkich wpisów w określonej kategorii, możesz użyć poniższego fragmentu kodu. Pamiętaj tylko, aby zastąpić nazwę kategorii zgodnie z twoją witryną internetową.

category-books {
    font-size: 18px;
    font-style: italic;
}

Następnie przełącz przełącznik „Nieaktywny” na „Aktywny” u góry.

Następnie kliknij przycisk „Zapisz fragment kodu”, aby zapisać twoje ustawienia.

Preview of all the styled posts in a specific category

Możesz teraz przejść na wszystkie wpisy w określonej kategorii, aby zobaczyć zmiany, które zostały zastosowane za pomocą kodu CSS.

Tak to wyglądało na naszej witrynie demonstracyjnej.

Preview of all the styled posts in a specific category

Jak nadać wpisom różny styl w zależności od autora?

Domyślne klasy CSS generowane przez funkcję the_posts( ) nie zawierają nazwy autora jako klasy CSS.

Jeśli chcesz dostosować styl każdego wpisu na podstawie autora, musisz najpierw dodać nazwę autora jako klasę CSS.

Aby to zrobić za pomocą WPCode, wybierz opcję „Add Your Custom Code (New Snippet)”.

Spowoduje to przejście do strony „Create Custom Snippet”, gdzie należy dodać nazwę fragmentu kodu i wybrać „PHP Snippet” jako rodzaj kodu.

Następnie dodaj następujący własny kod do pola „Podgląd kodu” i zastąp „nazwa_użytkownika” nazwą autora.

$author = get_the_author_meta('user_nicename'); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $author );

Na koniec przełącz przełącznik „Nieaktywny” na „Aktywny” i kliknij przycisk „Zapisz fragment kodu”, aby zapisać twoje ustawienia.

Powinno to wyglądać następująco.

Add the author's name as a CSS class

Ten kod doda teraz nazwę nicename użytkownika jako klasę CSS. Nicename to przyjazna dla adresu URL nazwa używana przez WordPress. Nie zawiera spacji, a wszystkie znaki są pisane małymi literami, co czyni ją idealną do użycia jako klasa CSS.

Teraz musisz ponownie przejść na stronę Code Snippets ” + Add Snippet i wybrać opcję „Add Your Custom Code (New Snippet)”. Na następnym ekranie dodaj nazwę twojego własnego kodu i wybierz „CSS Snippet” jako rodzaj kodu z rozwijanego menu po prawej stronie.

Następnie można dodać nazwę konkretnego autora w polu „Podgląd kodu” w następujący sposób:

.sarahclare

Następnie można dodać własny kod CSS, aby zmienić kolor tła, rozmiar obramowania, kolor tekstu i inne.

Add the author's name in the code preview box

Możesz użyć poniższego kodu, aby zmienić kolor tła wpisów autora i dodać obramowanie do obszaru treści.

.sarahclare {
background-color:#EEE;
border:1px solid #CCC;
}

Po zakończeniu kliknij przycisk „Zapisz fragment kodu” u góry.

Następnie przełącz przełącznik „Nieaktywny” na „Aktywny”.

Activate CSS snippet to style a specific author's posts

Dostosowany kod zostanie automatycznie wykonany po włączaniu.

Możesz teraz przejść na wpis konkretnego autora, aby zobaczyć zmiany.

Preview of a specific author's styled posts

Jak stylizować wpisy na podstawie popularności przy użyciu liczby komentarzy?

Być może widziałeś witryny z widżetami popularnych wpisów, które czasami są oparte na liczbie komentarzy. W tym przykładzie pokażemy, jak inaczej stylizować wpisy za pomocą liczby komentarzy.

Najpierw musimy pobrać liczbę komentarzy i powiązać z nią klasę.

Aby uzyskać liczbę komentarzy, musisz dodać następujący kod do plików twojego motywu lub możesz użyć wtyczki fragmentów kodu, takiej jak WPCode.

Wystarczy wybrać opcję „Add Your Custom Code (New Snippet)”, aby uruchomić stronę „Create Custom Snippet” w WPCode.

Tutaj wybierz „Fragment kodu PHP” jako rodzaj kodu, a następnie skopiuj i wklej poniższy kod w polu Podgląd kodu:

<?php 
    $postid = get_the_ID();
    $total_comment_count = wp_count_comments($postid);
        $my_comment_count = $total_comment_count->approved;
    if ($my_comment_count <10) {
        $my_comment_count = 'new';
    } elseif ($my_comment_count >= 10 && $my_comment_count <20) {
        $my_comment_count = 'emerging';
    } elseif ($my_comment_count >= 20) {
        $my_comment_count = 'popular';
    }
?>

Następnie kliknij przycisk „Zapisz fragment kodu” i przełącz przełącznik „Nieaktywny” na „Aktywny”, aby zapisać twoje ustawienia.

Kod ten sprawdza liczbę komentarzy dla wyświetlanego wpisu i przypisuje im wartość na podstawie tej liczby. Na przykład wpisy z mniej niż 10 komentarzami otrzymują klasę o nazwie new, mniej niż 20 jest określanych jako emerging, a wszystko powyżej 20 komentarzy jest popularne.

Add the comment count code snippet

Teraz musisz dodać liczbę komentarzy jako klasę CSS do funkcji post_class. Aby to zrobić, należy ponownie otworzyć stronę „Create Custom Snippet” i wybrać opcję „PHP Snippet” z rozwijanego menu.

Następnie dodaj następujący własny kod do pola podglądu:

<article id="post-<?php the_ID(); ?>" <?php post_class( $my_comment_count ); ?>>

Następnie kliknij przycisk „Zapisz fragment kodu”.

Możesz teraz przełączyć przełącznik „Nieaktywny” na „Aktywny”.

Add comment count as CSS class

Spowoduje to utwórzenie nowych, pojawiających się i popularnych klas CSS do wszystkich wpisów na podstawie liczby komentarzy, które ma każdy wpis. Możesz teraz dodać własny CSS, aby stylizować każdy wpis na podstawie jego popularności.

Można na przykład użyć poniższego kodu, aby dodać różne kolory obramowania dla wpisów w zależności od liczby zamieszczonych komentarzy.

.new {border: 1px solid #FFFF00;}
.emerging {border: 1px dashed #FF9933;}
.popular {border: 1px dashed #CC0000;}

Po zakończeniu nie zapomnij kliknąć przycisku „Zapisz fragment kodu”, aby zapisać twoje ustawienia.

Style posts based on popularity

Bonus: Wyświetl inny panel boczny dla każdego wpisu w WordPressie

Po stylizacji każdego wpisu w inny sposób, możesz również dodać unikatowy panel boczny dla każdego wpisu. Pozwoli to zaprezentować konkretne treści związane z danym artykułem, którymi użytkownicy mogą być zainteresowani.

Na przykład, jeśli prowadzisz bloga podróżniczego i opublikowałeś wpis o miejscach, które warto przejść na Florydzie, możesz utworzyć specjalny panel boczny wyświetlający pakiety turystyczne na Florydę. Alternatywnie możesz wyświetlić formularz rejestracyjny na organizowaną przez siebie wycieczkę na Florydę.

Aby wyświetlić inny panel boczny dla każdego wpisu, możesz użyć SeedProd, który jest najlepszą wtyczką do tworzenia stron dla WordPress.

SeedProd website

Posiada interfejs typu „przeciągnij i upuść”, ponad 320 gotowych szablonów i integracje z usługami e-mail marketingu, co czyni go doskonałym wyborem.

Po włączaniu wtyczki można wybrać własną stronę jako projekt strony docelowej, a następnie układ z panelem bocznym.

Choose a Layout with a Sidebar

Następnie możesz łatwo przeciągać i upuszczać wybrane przez ciebie bloki z lewej kolumny, w tym formularze kontaktowe, archiwa, rozdania, pole wyszukiwania, komentarze i inne.

Po zakończeniu kliknij przyciski „Zapisz” i „Opublikuj” z menu rozwijanego u góry. Teraz z powodzeniem zaprojektowałeś konkretny panel boczny dla wpisu lub strony WordPress.

Drag the Blocks You Wish to Use Right onto the Sidebar

Aby uzyskać szczegółowe informacje, zobacz nasz poradnik na temat wyświetlania innego panelu bocznego dla każdego wpisu i strony w WordPress.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak stylizować każdy wpis WordPress w inny sposób. Możesz również zapoznać się z naszym przewodnikiem dla początkujących, jak stylizować tagi w WordPressie i naszą listą najbardziej poszukiwanych wskazówek, sztuczek i hacków WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

54 komentarzeZostaw odpowiedź

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. 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.

  3. Kany

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

    • 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.

      Administrator

  4. 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 */

  5. 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!

  6. Matus

    Great tutorial. Simple and clear explanation.

  7. 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?

  8. MayMyatKhine

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

  9. 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.

  10. Nadeem

    Thanx alot bro..its very helpful

  11. RW

    yet another bookmark! great post! thank you…

  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?

  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?

  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

    • Editorial Staff

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

      Administrator

  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

    • 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.

      Administrator

  16. Em

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

  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.

  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?

    • 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.

      Administrator

  19. Kathleen

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

  20. dina

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

  21. 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.

    • 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.

      Administrator

  22. 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.

    • 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).

      Administrator

  23. 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).

  24. Hossein

    Hi..

    How i can wrap every 4 posts in a div ?

  25. 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?

  26. 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?

  27. 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?

    • 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.

      • 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

  28. 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 :(

  29. kristelvdakker

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

  30. 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

    • 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.

      Administrator

      • 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.

  31. 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!

    • 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.

      Administrator

  32. 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?

    • 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

  33. Bec

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

  34. 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!

  35. 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!

  36. 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!

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.