Die individuelle Gestaltung jedes WordPress-Beitrags ist eine intelligente Methode, um Ihre Website hervorzuheben. So können Sie bestimmte Inhalte hervorheben und das Design an die Ausstrahlung Ihrer Marke anpassen.
Einige Websites verwenden individuelle Hintergründe für oben gehaltene Beiträge oder geben jeder Kategorie ihren eigenen Stil. Diese kleinen Änderungen tragen dazu bei, dass Ihre Inhalte übersichtlicher und visuell ansprechender werden.
Aber das kann knifflig sein. Ohne die richtigen Werkzeuge und Schritte könnten Sie Stunden mit Versuchen und Fehlern verschwenden – oder schlimmer noch, versehentlich das Layout Ihrer Website zerstören.
Wir haben für Sie recherchiert und einige einfache Methoden gefunden, um Beiträge anders zu gestalten.
Mit WPCode, dem besten Plugin für Code-Snippets für WordPress, können Sie Ihren Beiträgen ganz einfach individuelle Stile hinzufügen und für jeden Beitrag ein einzigartiges Aussehen erstellen – ohne ins Schwitzen zu kommen.
Hinweis: Für dieses Tutorial müssen Sie benutzerdefinierte CSS in WordPress hinzufügen. Sie müssen auch in der Lage sein, das Inspect-Tool zu verwenden, und einige grundlegende CSS-Kenntnisse haben, so dass es möglicherweise nicht für absolute Anfänger geeignet ist.
Vor- und Nachteile der unterschiedlichen Gestaltung jedes WordPress-Posts
Wenn Sie einen WordPress-Blog haben, können Sie jeden Beitrag anders gestalten und so ein einzigartiges visuelles Erlebnis schaffen, bei dem unterschiedliche Farben mit verschiedenen Inhaltskategorien oder -typen verbunden sind.
Sie könnten beispielsweise eine andere Hintergrundfarbe für die Listenartikel, Blogbeiträge und Anleitungen auf Ihrer Website verwenden. Dies kann die Aufmerksamkeit der Nutzer sofort wecken und das Engagement steigern.
Bedenken Sie aber, dass dies auch einige große Nachteile haben kann. Zum Beispiel müssen Sie das Design jedes WordPress-Beitrags regelmäßig pflegen, was zeitaufwändig sein kann.
Außerdem kann dies zu einem inkonsistenten Nutzererlebnis führen und ist nicht förderlich für Ihre Markenidentität. Das liegt vor allem daran, dass Sie auf Ihrer gesamten Website die gleichen Farben verwenden müssen, um das Image Ihres Unternehmens zu etablieren.
Wenn Sie ein Anfänger sind, kann das Hinzufügen von benutzerdefiniertem CSS zur Gestaltung jedes Beitrags auch schwierig sein. Deshalb zeigen wir Ihnen, wie Sie jeden WordPress-Beitrag ganz einfach anders gestalten können.
Hier ist ein kurzer Überblick über alle Themen, die wir in diesem Leitfaden behandeln werden:
Fangen wir an.
Wie man einzelne Beiträge in WordPress gestaltet
WordPress fügt verschiedenen Elementen auf Ihrer Website Standard-CSS-Klassen zu. Themes verwenden eine WordPress-Kernfunktion namens post_class(), um WordPress mitzuteilen, wo diese Standard-CSS-Klassen für Beiträge hinzugefügt werden sollen.
Wenn Sie Ihre Website besuchen und das Inspektionstool in Ihrem Browser verwenden, können Sie diese für jeden Beitrag hinzugefügten Klassen sehen.
Im Folgenden sind die CSS-Klassen aufgeführt, die standardmäßig hinzugefügt werden, je nachdem, welche Seite ein Benutzer anzeigt:
- .post-id
- .post
- .attachment
- .klebrig
- .hentry (hAtom-Mikroformatseiten)
- .Kategorie-ID
- .kategorie-name
- .tag-name
- .format-{format-name}
- .type-{post-type-name}
- .has-post-thumbnail
Eine Beispielausgabe würde wie folgt aussehen:
<article id="post-412" class="post-412 post type-post status-publish format-standard hentry category-news">
Sie können jeden WordPress-Beitrag mithilfe dieser CSS-Klassen oder IDs unterschiedlich gestalten. Dazu müssen Sie zunächst die Beitrags-ID für einen einzelnen Beitrag finden.
Dazu müssen Sie im WordPress-Dashboard die Seite Beiträge ” Alle Beiträge aufrufen und mit der Maus über einen Beitrag fahren.
In der linken unteren Ecke des Bildschirms wird nun eine URL für die Bearbeitung des Beitrags angezeigt. Hier können Sie die Beitrags-ID finden, indem Sie die Zahl zwischen “post=” und “&action” betrachten.
Im folgenden Beispiel ist die Post-ID 25.
Danach müssen Sie die CSS-Klasse zusammen mit dem benutzerdefinierten Code in Ihre Themendateien oder in den Theme-Customizer einfügen. Das kann jedoch riskant sein und Ihre Website mit nur einem Fehler zerstören.
Deshalb empfehlen wir, stattdessen WPCode zu verwenden.
Nach gründlichen Tests haben wir festgestellt, dass es der einfachste und sicherste Weg ist, individuellen Code zu Ihrer Website hinzuzufügen. Um mehr über unsere Erfahrungen mit dem Plugin zu erfahren, lesen Sie unsere Rezension zu WPCode.
Zunächst müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Anleitung für Einsteiger zur Installation eines WordPress-Plugins.
Hinweis: Wenn Ihnen die kostenlose Version gefällt, können Sie mit einem Upgrade auf WPCode Pro die nächste Stufe erreichen. Die Premium-Version ermöglicht den Zugriff auf mehr als 100 von Experten geprüfte Codeschnipsel, intelligente bedingte Logik, geplante Codeänderungen und vieles mehr
Besuchen Sie nach der Aktivierung die Seite Code Snippets ” + Snippet hinzufügen im WordPress-Dashboard. Klicken Sie hier auf die Schaltfläche “Snippet verwenden” unter der Option “Eigenen Code hinzufügen (neues Snippet)”.
Dies führt Sie zur Seite “Benutzerdefiniertes Snippet erstellen”, wo Sie zunächst einen Namen für Ihr Code-Snippet eingeben können. Danach wählen Sie aus dem Dropdown-Menü auf der rechten Seite “CSS Snippet” als Codetyp aus.
Dann müssen Sie die CSS-Klasse und die ID Ihres individuellen Beitrags wie folgt in das Feld “Codevorschau” eingeben:
.post-13 { }
Danach können Sie zwischen den Klammern einen beliebigen benutzerdefinierten CSS-Code hinzufügen, um Ihren Beitrag zu gestalten.
Wenn Sie zum Beispiel die Hintergrundfarbe eines einzelnen Beitrags ändern möchten, können Sie den folgenden benutzerdefinierten CSS-Code hinzufügen. Beachten Sie, dass Sie die Post-ID in diesem Code durch Ihre eigene ID ersetzen müssen. Wo dies .post-13 ist, könnte Ihre .post-23873 sein.
Sie können auch den Hex-Code für die Hintergrundfarbe in eine beliebige Farbe Ihrer Wahl ändern:
.post-13 {
background-color: #FF0303;
color:#FFFFFF;
}
Schalten Sie dann den Schalter “Inaktiv” oben auf “Aktiv” um und klicken Sie auf die Schaltfläche “Snippet speichern”, um Ihre Einstellungen zu speichern.
Der benutzerdefinierte CSS-Code wird nun bei der Aktivierung des Snippets automatisch für Ihren individuellen Beitrag ausgeführt.
Besuchen Sie Ihren WordPress-Blogbeitrag, um die Änderungen in Echtzeit zu sehen.
Sie können auch andere benutzerdefinierte CSS-Codefragmente im Feld “Codevorschau” hinzufügen, um die Farbe der Textauswahl, die Textfarbe, die Farbe der internen Links und vieles mehr zu ändern.
Weitere Informationen finden Sie in unserem Leitfaden für Einsteiger zum Anpassen von Farben in WordPress.
Wie man Beiträge in einer bestimmten Kategorie gestaltet
Wenn Sie alle Beiträge, die zu einer bestimmten Kategorie gehören, gestalten wollen, können Sie das auch mit WPCode tun.
Besuchen Sie die Seite Code Snippets ” + Snippet hinzufügen und wählen Sie die Option “Eigenen Code hinzufügen (neues Snippet)”.
Fügen Sie dann einen Code-Snippet-Namen auf der neuen Seite hinzu und wählen Sie “CSS Snippet” als Codetyp. Danach geben Sie die CSS-Klasse einer bestimmten Kategorie in das Code-Vorschaufeld ein, indem Sie den Permalink der Kategorie nach dem Bindestrich verwenden:
.category-books { }
Danach können Sie ein beliebiges benutzerdefiniertes CSS-Snippet in das Feld einfügen und es auf alle Beiträge in verschiedenen Kategorien anwenden.
Wenn Sie beispielsweise die Schriftgröße und den Schriftstil für alle Beiträge in einer bestimmten Kategorie ändern möchten, können Sie das folgende Code-Snippet verwenden. Denken Sie nur daran, den Kategorienamen entsprechend Ihrer Website zu ersetzen.
category-books {
font-size: 18px;
font-style: italic;
}
Als Nächstes müssen Sie oben den Schalter “Inaktiv” auf “Aktiv” umstellen.
Klicken Sie anschließend auf die Schaltfläche “Snippet speichern”, um Ihre Einstellungen zu speichern.
Sie können nun alle Beiträge einer bestimmten Kategorie besuchen, um die Änderungen zu sehen, die mit CSS-Code vorgenommen wurden.
So sah es auf unserer Demo-Website aus:
Wie man Beiträge je nach Autor unterschiedlich gestaltet
Die von der Funktion the_posts() generierten Standard-CSS-Klassen enthalten den Autorennamen nicht als CSS-Klasse.
Wenn Sie den Stil jedes Beitrags auf der Grundlage des Autors anpassen möchten, müssen Sie zunächst den Namen des Autors als CSS-Klasse hinzufügen.
Um dies mit WPCode zu tun, können Sie die Option “Add Your Custom Code (New Snippet)” auswählen.
Dies führt Sie zur Seite “Benutzerdefiniertes Snippet erstellen”, wo Sie einen Namen für das Code-Snippet eingeben und “PHP Snippet” als Codetyp auswählen müssen.
Danach fügen Sie einfach den folgenden benutzerdefinierten Code in das Feld “Codevorschau” ein und ersetzen “user_nicename” durch den Namen des Autors.
$author = get_the_author_meta('user_nicename'); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $author );
Schließlich können Sie den Schalter “Inaktiv” auf “Aktiv” umschalten und auf die Schaltfläche “Snippet speichern” klicken, um Ihre Einstellungen zu speichern.
Sie sollte folgendermaßen aussehen:
Dieser Code fügt nun den Nicknamen des Benutzers als CSS-Klasse hinzu. Nicename ist ein URL-freundlicher Name, der von WordPress verwendet wird. Er enthält keine Leerzeichen und alle Zeichen sind in Kleinbuchstaben, was ihn perfekt für die Verwendung als CSS-Klasse macht.
Jetzt müssen Sie die Seite Code Snippets ” + Snippet hinzufügen erneut aufrufen und die Option “Eigenen Code hinzufügen (neues Snippet)” wählen.
Auf dem nächsten Bildschirm fügen Sie einen Namen für Ihren benutzerdefinierten Code hinzu und wählen im Dropdown-Menü auf der rechten Seite “CSS Snippet” als Codetyp aus.
Sie können dann den Namen des Autors in das Feld “Codevorschau” einfügen, etwa so:
.sarahclare
Der nächste Schritt ist das Hinzufügen des benutzerdefinierten CSS-Codes, um die Hintergrundfarbe, die Größe des Rahmens, die Textfarbe und vieles mehr zu ändern.
Mit dem folgenden Code können Sie die Hintergrundfarbe der Beiträge eines Autors ändern und einen Rahmen für den Inhaltsbereich hinzufügen.
.sarahclare {
background-color:#EEE;
border:1px solid #CCC;
}
Sobald Sie fertig sind, klicken Sie oben auf die Schaltfläche “Snippet speichern”.
Vergessen Sie dann nicht, den Schalter “Inaktiv” auf “Aktiv” umzuschalten.
Der benutzerdefinierte Code wird bei der Aktivierung automatisch ausgeführt.
Sie können nun den Beitrag eines bestimmten Autors besuchen, um die Änderungen zu sehen.
Stilisierung von Beiträgen nach Popularität mit Hilfe der Kommentaranzahl
Sie haben vielleicht schon Websites mit Widgets für beliebte Beiträge gesehen, die manchmal auf der Anzahl der Kommentare basieren. In diesem Beispiel zeigen wir Ihnen, wie Sie Beiträge anhand der Anzahl der Kommentare anders gestalten können.
Zunächst müssen wir die Anzahl der Kommentare ermitteln und ihnen eine Klasse zuordnen.
Um die Anzahl der Kommentare zu erhalten, müssen Sie den folgenden Code in Ihre Themedateien einfügen, oder Sie können ein Code-Snippets-Plugin wie WPCode verwenden.
Wählen Sie einfach die Option “Benutzerdefinierten Code hinzufügen (neues Snippet)”, um die Seite “Benutzerdefiniertes Snippet erstellen” in WPCode aufzurufen.
Wählen Sie hier “PHP Snippet” als “Code-Typ” aus und fügen Sie den folgenden Code in das Feld “Code-Vorschau” ein:
<?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';
}
?>
Klicken Sie anschließend auf die Schaltfläche “Snippet speichern” und schalten Sie den Schalter “Inaktiv” auf “Aktiv” um, um Ihre Einstellungen zu speichern.
Dieser Code prüft die Anzahl der Kommentare für den angezeigten Beitrag und weist ihnen einen Wert auf der Grundlage der Anzahl zu.
So erhalten Beiträge mit weniger als 10 Kommentaren die Klasse “neu”, Beiträge mit weniger als 20 Kommentaren werden als “neu” bezeichnet und Beiträge mit mehr als 20 Kommentaren als “beliebt”.
Nun müssen Sie die Anzahl der Kommentare als CSS-Klasse zur post_class-Funktion hinzufügen. Öffnen Sie dazu erneut die Seite “Benutzerdefiniertes Snippet erstellen” und wählen Sie die Option “PHP Snippet” aus dem Dropdown-Menü.
Dann können Sie den folgenden benutzerdefinierten Code in das Vorschaufeld einfügen:
<article id="post-<?php the_ID(); ?>" <?php post_class( $my_comment_count ); ?>>
Danach klicken Sie einfach auf die Schaltfläche “Snippet speichern”.
Dann können Sie den Schalter von “Inaktiv” auf “Aktiv” umschalten.
Dadurch werden neue, aufkommende und beliebte CSS-Klassen zu allen Beiträgen hinzugefügt, basierend auf der Anzahl der Kommentare, die jeder Beitrag hat. Sie können jetzt benutzerdefinierte CSS hinzufügen, um jeden Beitrag auf der Grundlage seiner Popularität zu gestalten.
Sie können zum Beispiel den folgenden Code verwenden, um unterschiedliche Rahmenfarben für Beiträge hinzuzufügen, die von der Anzahl der geposteten Kommentare abhängen:
.new {border: 1px solid #FFFF00;}
.emerging {border: 1px dashed #FF9933;}
.popular {border: 1px dashed #CC0000;}
Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche “Snippet speichern” zu klicken, um Ihre Einstellungen zu speichern.
Bonus: Anzeige einer anderen Seitenleiste für jeden Beitrag in WordPress
Nachdem Sie jeden Beitrag unterschiedlich gestaltet haben, können Sie auch eine eigene Seitenleiste für jeden Beitrag hinzufügen. Auf diese Weise können Sie spezifische Inhalte zu diesem Artikel präsentieren, die für die Nutzer von Interesse sein könnten.
Wenn Sie z. B. einen Reiseblog haben und einen Blogbeitrag über Sehenswürdigkeiten in Florida veröffentlicht haben, können Sie eine spezielle Seitenleiste mit Florida-Reiseangeboten erstellen. Alternativ könnten Sie ein Anmeldeformular für eine von Ihnen organisierte Florida-Reise anzeigen.
Mit SeedProd, dem besten Seitenerstellungs-Plugin für WordPress, können Sie für jeden Beitrag eine andere Seitenleiste anzeigen.
Die Drag-and-Drop-Oberfläche, mehr als 320 vorgefertigte Vorlagen und die Integration mit E-Mail-Marketingdiensten machen es zu einer hervorragenden Wahl.
Nach der Aktivierung des Plugins können Sie eine benutzerdefinierte Seite als Design für Ihre Landing Page und ein Layout mit einer Seitenleiste auswählen.
Danach können Sie ganz einfach Blöcke Ihrer Wahl aus der linken Spalte ziehen und ablegen, darunter Kontaktformulare, Archive, Werbegeschenke, Suchfelder, Kommentare und mehr.
Wenn Sie fertig sind, klicken Sie einfach auf die Schaltflächen “Speichern” und “Veröffentlichen” im Dropdown-Menü oben.
Sie haben nun erfolgreich eine spezifische Seitenleiste für einen WordPress-Beitrag oder eine Seite entworfen.
Weitere Details finden Sie in unserem Tutorial darüber, wie Sie für jeden Beitrag und jede Seite in WordPress eine andere Seitenleiste anzeigen können.
💡 Erhalten Sie eine individuelle, leistungsstarke WordPress Website, ohne sich zu quälen! Mit unserem Dienst für WordPress-Website-Design erhalten Sie einen engagierten Projektmanager, der Ihre Visionen zum Leben erweckt und eine von Experten erstellte Website schnell liefert. Konzentrieren Sie sich auf Ihr Geschäft, während wir uns um das Design kümmern – vereinbaren Sie noch heute einen kostenlosen Beratungstermin!
Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie Sie jeden WordPress-Beitrag anders gestalten können. Vielleicht interessieren Sie sich auch für unsere Anleitungen für Anfänger zum Hinzufügen eines Favicons und zum Hinzufügen von Schneeflocken zu Ihrem WordPress-Blog.
Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.
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.
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.
Admin
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 */
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!
Matus
Great tutorial. Simple and clear explanation.
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?
MayMyatKhine
Hello,Please send to me the new event to use the wordpress.
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.
Alberto Hartzet
Perfect!, ty. What about the first and “the last” post? any ideas?
Nadeem
Thanx alot bro..its very helpful
RW
yet another bookmark! great post! thank you…
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?
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?
Editorial Staff
You have to add something like this on your post loop:
1-click Use in WordPress
Admin
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.
Admin
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.
Admin
Em
Just found this post and it is great, clear, succinct and spot on, many thanks
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.
Editorial Staff
You would have to use the super loop option.
Admin
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.
Admin
Jayaseelan Arumugam
It is very Nice and useful post. Especially I like the way to Style Posts based on Custom Fields. Thanks.
Kathleen
Thanks for this great article! It’s exactly what I searched for and so much helpful!
dina
How do I add unique class to the 3rd, 6th, 9th, and 12nd posts in super loop. Thanks!
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.
Admin
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).
Admin
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).
Hossein
Hi..
How i can wrap every 4 posts in a div ?
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?
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?
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
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 
kristelvdakker
Thank you so much for this post! It has been very helpful.
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.
Admin
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.
Stuart
Got there in the end…
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.
Admin
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
Bec
Great post! That info is awesome for adding those extra special custom features to your design.
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!
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!
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!
Connor Crosby
Wow, that is a great post! Perfect timing since I am making a new WordPress theme