WordPress.org

Ready to get started?Download WordPress

Ideas

Simplify comments HTML from wp_list_comments

  1. richarduk
    Member

    To reduce the sea of divs that is the current default output and to reduce that sea of divs even when using a simplified callback, I suggest the following which will greatly help in styling:

    There is no need to nest divs e.g. depth-1, depth-2 etc.are currently nested one within another. The nesting is redundant. Divs can be indented according to depth-1, depth-2 etc. e.g.

    div.depth-1 {margin:0;}
    div.depth-2 {margin:0 0 20px 0;}
    div.depth-3 {margin:0 0 40px 0} etc.

    This makes styling hugely easier.

    Although user information is output as classes e.g byuser comment-author-admin this isn't much use when you want to style a comment e.g. a comment by comment-author-admin can't be styled at depth-1 depth-2 depth-3 etc. when each depth is a different width and there are pretty background images.

    Therefore it would be better to still include the classes depth-1 depth-2 etc. as normal but in addition have classes such as depth-1-admin depth-2-admin depth-3-admin etc. That would remove one div class from the custom callback.

    Here is the HTML that my callback currently produces. I shall probably have to add in another div. to style authors, as mentioned above.

    <div class="comment even thread-even depth-1" id="comment-23">
    
    <div class="comment-body"><!--Contains background image for body of comment-->
    
    <p class="comment-top">&nbsp;</p><!--Contains top background image-->
    
    <img alt='' src='http://www.gravatar.com/avatar/c6dbamp;d=http%3A%2F%2Fwww.gravatar.com%2Favatar%2Fa2&r=G' class='avatar avatar-32 photo' height='32' width='32' />
    
    <cite class="fn">ninth comment<span class="says">says:</span></cite> 
    
    <p class="comment-meta"><a href="http://www.mysite.com/yrdy/comment-page-1/#comment-23">
    
    February 24, 2010 at 6:36 pm</a>
    
    <a class="comment-edit-link" href="http://www.mysite.com/wp-admin/comment.php?action=editcomment&c=23" title="Edit comment">(Edit)</a></p>
    
    <p>this is a load of text</p>
    <p>this is a load of text</p>
    
    <p class="reply"><a rel='nofollow' class='comment-reply-link' href='/yrdy/comment-page-1/?replytocom=23#respond' onclick='return addComment.moveForm("comment-23", "23", "respond", "110")'>Reply</a></p>
    
    <p class="comment-bottom">&nbsp;</p><!--Contains bottom background image-->
    
    </div><!--Close comment-body-->
    
    </div><!--Close comment-->
    Posted: 4 years ago #
  2. richarduk
    Member

    Sorry, should have simplified this:

    <?php wp_list_comments(); ?> should have an extra parameter to choose between the user-name or user-ID which should be appended to the depth classes.

    <?php wp_list_comments(); ?> shouldn't output nested divs as they are redundant since CSS can indent them.

    Posted: 4 years ago #
  3. What kind of link do or no follow.

    Posted: 4 years ago #
  4. Gtechsweeper
    Member

    Is this applicable for any version of wp?

    Posted: 4 years ago #
  5. richarduk
    Member

    For those who're interested, a fuller (and more coherent) explanation can be found here: alchemweb.co.uk/how-to-style-comments-in-wordpress/

    I've left this as a 'dead' link - hope that's okay

    Posted: 4 years ago #
  6. thanks it's works

    Posted: 3 years ago #
  7. I must say that I literally had no idea as to what has to be done in order to get the exact result. Anyway, it was kind of you to provide us with a link. However, I have a situation. Adding another div does not seem to be a bit of problem in the theoretical world! However when it is applied practically, there seems to be an error popping up. Is it just me or does anyone else have an error pop up message. And one more doubt. Does the battery health of my laptop have to do anything with that?

    Posted: 3 years ago #
  8. IP PBX
    Member

    I must say that I literally had no idea as to what has to be done in order to get the exact result. Anyway, it was kind of you to provide us with a link. However, I have a situation. Adding another div does not seem to be a bit of problem in the theoretical world! However when it is applied practically, there seems to be an error popping up. Is it just me or does anyone else have an error pop up message. And one more doubt. Does the battery health of my laptop have to do anything with that?

    Posted: 3 years ago #
  9. RachelO
    Member

    Thank you for this solution. Are the comment links already no follow or do I have to insert some more code. I would be grateful if you could advise me what needs to be done.

    Posted: 3 years ago #
  10. pmu
    Member

    Good one thanks i am trying to simplfy every .php for get good speed in my websit

    Posted: 3 years ago #

RSS feed for this topic

Reply

You must log in to post.

  • Rating

    12345
    6 Votes
  • Status

    This idea is under consideration