1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-22 18:00:06 +01:00
blog/content/articles/2008-12-13-howto-styling-author-comments-with-wordpress-27/index.md
Matthias Kretschmann 299084de93
Gatsby → Astro (#829)
* basic astro setup, kick out all gatsby configs

* move content folder

* src/pages setup

* more file reorg

* more config updates

* more reorgs

* refactor

* refactor

* bump astro

* refactor

* svg icon build system, theme switch

* remark plugin for lead paragraph, more refactor

* make images work

* post meta

* custom Picture component

* Pagination, More component, 404 fixes

* linking fixes

* add table of contents

* post actions fixes

* tag fixes

* content changes

* content changes: move media files to their posts

* more content moving, remove media folder

* refactor remark-lead-paragraph

* link css file when defined in post frontmatter

* move content up again

* kbd post update

* allow js

* downloads solution

* add astro check

* redirect_from solution

* githubLink solution

* reorg

* exif solution as prebuild step

* exif solution on each post during build

* isolate lead paragraph extraction to articles

* restore Exif components

* deploy script update

* fix redirects

* xml & json feeds

* build fix

* fix exif readout in production

* head and seo tweaks, add feeds

* tweak image display

* archive pages with single layout

* restore tags archive

* sitemap setup

* restore thanks page functionality

* reorg

* cleanup

* parallel scripts during prebuild

* restore jest setup

* remove jest, switch to vitest as test runner

* adapt CI

* test refactor

* typescript tweaks

* avatar fixes

* typings

* restore search functionality

* theme switch with nanostores

* fixes

* test fixes

* restore changelog functionality

* umami script

* border color tweak

* related posts with fuse.js

* plawright e2e testing setup

* search tweaks

* simplify typekit loading

* photo fix

* e2e tests

* related posts fix

* fix tags archive

* tweaks

* tweaks

* linux snapshots

* fix header test

* new symlink tactic

* fix dev server in codespaces

* fix yaml

* ci fixes

* changelog loading tweaks

* e2e against dev server on ci

* changelog tweaks

* ci tweaks

* ci tweaks

* ci tweaks

* docs updates

* ci tweaks

* refactor photo creation script

* package updates

* refactor search

* ci tweak

* ci tweaks

* test tweaks, more unit tests

* more unit tests

* post creation script tweaks

* refactor new scripts, test them for real life

* more tests

* refactor

* codeclimate-action update

* uses update

* limit ci runs

* fix theme toggle, test it

* more tests

* favicon files cleanup

* icon components location change

* type checking through ci

* command fixes

* ci fix

* search tweaks

* ci tweaks

* revised favicons, write post draft about it

* drafts filtering fix

* lint fix, favicon fixes

* copy changes

* fix related search images

* content updates

* new codeblock styles, copy tweaks, fixes

* package updates

* typing fixes

* lint fix

* content updates

* restore link posts

* faster theme switching

* split up astro utils

* related posts fixes

* fix

* refactor

* fixes

* copy tweaks

* fixes

* picture tweaks

* image fixes

* feed fixes, adapt for json feed v1.1

* e2e test updates

* layout tweaks

* update snaphots

* migrate to createMarkdownProcessor

* ci cache tweaks

* activate more browsers for e2e testing

* switch to macos-13 images

* build caching tweaks

* markdown fix

* set image quality

* remove avif generation

* picture tweaks

* head fixes

* add og:image:alt

* create-icons test

* new post: Favicon Generation with Astro
2023-09-18 02:16:53 +01:00

62 lines
2.8 KiB
Markdown

---
title: 'HowTo: Styling Author Comments With Wordpress 2.7+'
author: Matthias Kretschmann
date: 2008-12-13 16:47:43+00:00
tags:
- design
- tutorial
- wordpress
---
Since my update to Wordpress 2.7 I'm pretty much into all the new comments stuff. As [I've written before](/how-to-set-a-custom-gravatar-image-in-wordpress-27/), the comment functionality changed dramatically with Wordpress 2.7. This makes writing a comments template much easier but if you used Worpress prior to 2.7 you have to change some things to work again.
Beside other things this includes [Gravatar styling](/how-to-set-a-custom-gravatar-image-in-wordpress-27/) and also adding different styling to comments from the author of an article. In this article I will show you how to realize the latter with Wordpress 2.7 and above.
Let's start by looking at the code to achieve styling of author comments prior to Wordpress 2.7. On kremalicious.com I've used this code:
```php
<li class="
<?php
if ($comment->comment_author_url == "http://www.kremalicious.com")
echo 'author';
else echo $oddcomment;
?>
item" id="comment-<?php comment_ID() ?>">
<em>other comments code</em>
</li>
```
So with some php stuff we were able to check for the author name or, as I did it, for the URL of the comment author. If one of these were detected Wordpress added a new class 'author' to the `<li>` tag which we were able to style by adding a li.author to our css file:
```css
li.author {
/* css comes in here */
}
```
But with Wordpress 2.7 these steps are needless because of the [new function `<?php wp_list_comments(); ?>`](http://codex.wordpress.org/Template_Tags/wp_list_comments) which adds a class on author comments for itself!
If a comment from the author of an article is posted under this article, **Wordpress automatically adds the class 'bypostauthor' to the surrounding `<li>` tag.** So all you have to do is adding a css style of `li.bypostauthor` to your css file or just renaming your old `li.author` class or whatever you used for this:
```css
li.bypostauthor {
/* css comes in here */
}
```
And that's it for adding a different style to comments from the article author. Just add some css and there you go. Wonderful!
## Even more
Wordpress also has a special class for registered users of your site so you're able to style their comments as well. For this just use the class 'byuser':
```css
li.byuser {
/* css comes in here */
}
```
All the various classes Wordpress adds to comments are listed [in the Codex page for enhanced comments display](http://codex.wordpress.org/Migrating_Plugins_and_Themes_to_2.7/Enhanced_Comment_Display#CSS_Styling). And [here's a very nice grahical overview about everything Wordpress 2.7 adds to comments](http://www.wp-fun.co.uk/2008/12/10/27-comment-classes/).