comments template – bbird.me

How to create custom comment walker class in WordPress

Bruno Kos — Fri, 03 Jun 2016 20:29:46 +0000

There are several walker classes in WordPress – I don’t actually know how many there are because I tend to browse the source code only if I need to change something, just as others I guess :). Regardless, I’m sure that custom navigation walker class is probably the most used and customized WordPress walker class. But recently I had a project where I needed to change meta info which appears next to Gravatar image in the comments section. When it comes to any walker classes in WordPress, I guess that the main idea is that you take the whole code, put it into functions.php or elsewhere and use function callback to call it. I guess…

So first things first – the function which calls comments is wp_list_comments() which also accepts number of parameters. One of them is ‘walker’. In order to call walker, it would be nice to create one. You can call it like this:

wp_list_comments( array(
  'style'       => 'ol',
  'short_ping'  => true,
  'avatar_size' => 82,
  'walker' => new bruno_walker_comment
) );

But as I said, we need a walker:

That’s a lot of code, right? But don’t worry, About 99% of that code is copy-paste from class-walker-comment.php file, which lives in wp-includes folder. The only change I did was this:



user_id;
?>

I used this code to get some data ( biographical info and user URL) from Users section. So to conclude, if you want to make some bigger changes in the comments section, walker class is the way to go. All you need to do is copy the original walker and extend it with your own changes.

Post How to create custom comment walker class in WordPress je prvi puta viđen na bbird.me.

How to style and change comment form in WordPress

Bruno Kos — Sat, 25 Jul 2015 12:37:29 +0000

The WordPress function comment_form() is used for generating commenting form within WordPress theme. The great thing about this function is that it has wide range of parameters you can use to perform fine tuning. You could do something as simple as changing the wording (“Leave a reply”), or you could also create advanced layouts. For example, why would you have author and email input fields both in single line, given that in wider layouts on higher resolutions commenter will not fill even 50% of the input field?

As for available parameters, if you check official WordPress documentation, you will find the following:

‘fields’ (array) { Default comment fields, filterable by default via the ‘comment_form_default_fields’ hook.
‘author’ (string) Comment author field HTML.
’email’ (string) Comment author email field HTML.
‘url’ (string) Comment author URL field HTML. }
…and many others.

Most of these can be changed only by adding new items into functions’ array, such as (make sure you include text domain for translation purposes):

comment_form(array(
    'label_submit' => __('Post my Comment', 'bbird-under'),
    'title_reply' => __('Have something to say?', 'bbird-under'),
));

But if you look at the list of parameters closely, you’ll find ‘fields’ => $fields. You may omit this one at first, but as it turns out, this could be the most important parameter for any advanced layout change. Let’s check on how it looks like and WordPress core:

function comment_form( $args = array(), $post_id = null ) {
...
    $commenter = wp_get_current_commenter();
    $user = wp_get_current_user();
    $user_identity = $user->exists() ? $user->display_name : ''; 
... 
    $req      = get_option( 'require_name_email' );
    $aria_req = ( $req ? " aria-required='true'" : '' );
    $html_req = ( $req ? " required='required'" : '' );
    $html5    = 'html5' === $args['format'];
    $fields   =  array(
        'author' => '' . '' . __( 'Name' ) . ( $req ? ' *' : '' ) . ' ' .
                    '',
        'email'  => '' . __( 'Email' ) . ( $req ? ' *' : '' ) . ' ' .
...
$fields = apply_filters( 'comment_form_default_fields', $fields );
...
    $defaults = array(
        'fields'               => $fields,
        'comment_field'        => '
' . _x( 'Comment', 'noun' ) . ' ',
...

By the quick look, $fields array is what does the magic – if determines how the layout of default form will look like. Also, in order to avoid PHP warnings and notices (undeclared variable), you will also need to redeclare $req, $aria_req, etc.

Finally, this is how it would look like implemented into comments.php template file:

 '' . '' . __('Name', 'bbird-under') . ($req ? ' *' : '') . ' ' . '',
    'email' => '' . __('Email', 'bbird-under') . ($req ? ' *' : '') . ' ' . '',
    'url' => '' . __('Website', 'bbird-under') . ' ' . ''
);

comment_form(array(     
    'fields' => $fields,
    'label_submit' => __('Post my Comment', 'bbird-under'),
    'title_reply' => __('Have something to say?', 'bbird-under'),
    'title_reply_to' => __('Respond to %s', 'bbird-under'),
    'comment_notes_before' => '' . __('(No worries, we will keep your email safe! Also, make sure you fill in email and name fields before posting a comment.)', 'bbird-under') . ''
));
?>

BUT, if you were careless as I was, you likely omitted the fact that $fields is filterable via ‘comment_form_default_fields’ hook. If unsure how to use filters, check on my quick tutorial.

Implementation through filters is easy and would look like this:

function bbird_under_comment_form_layout ($fields) {
    
$commenter = wp_get_current_commenter();
$req       = get_option('require_name_email');
$aria_req  = ($req ? " aria-required='true'" : '');
$html_req  = ($req ? " required='required'" : '');
$html5     = 'html5';

$fields = array(
    'author' => '' . '' . __('Name', 'bbird-under') . ($req ? ' *' : '') . ' ' . '',
    'email' => '' . __('Email', 'bbird-under') . ($req ? ' *' : '') . ' ' . '',
    'url' => '' . __('Website', 'bbird-under') . ' ' . ''
);
   return $fields;  
   
}
add_filter( 'comment_form_default_fields', 'bbird_under_comment_form_layout' );

While our comment_form function call would look like this:

 __('Post my Comment', 'bbird-under'),
    'title_reply' => __('Have something to say?', 'bbird-under'),
    'title_reply_to' => __('Respond to %s', 'bbird-under'),
    'comment_notes_before' => '' . __('(No worries, we will keep your email safe! Also, make sure you fill in email and name fields before posting a comment.)', 'bbird-under') . ''
));
?>

Both approaches seem to be working, but given that WordPress core developers added filter here, conclusion is simple – use filter!

Post How to style and change comment form in WordPress je prvi puta viđen na bbird.me.

Editing wp_list_comments() output

Bruno Kos — Wed, 22 Jul 2015 23:00:20 +0000

WordPress Codex says that wp_list_comments() “displays all comments for a post or page based on a variety of parameters including ones set in the administration area”. But headaches begin if you want to change the comment HTML inside theme files – if you ever tried this, but wasn’t able to find any element that appears inside comments’ HTML (try theme string search for comment-author vcard class e.g., and you’ll quickly realize what are we talking about), the reason was simple – it’s not there. This whole code is generated from comment-template.php, which itself is a part of WordPress core.

Function wp_list_comments() accepts several parameters – callback is one of them. In case you didn’t know, in WordPress ecosystem callback actually means “take the code from WordPress core, modify according to my needs, insert everything into functions.php and use callback to make me look like a WordPress guru”. Just kidding :).

If your theme supports HTML5 comments, it will also mean that html5_comment function will generate the comment HTML. So let’s have a look on how it looks like, taken directly from WordPress core:

protected function html5_comment( $comment, $depth, $args ) {
        $tag = ( 'div' === $args['style'] ) ? 'div' : 'li';
?>
        < id="comment-" has_children ? 'parent' : '' ); ?>>
            
                
                    
                        
                        says:' ), sprintf( '%s', get_comment_author_link() ) ); ?>
                    

 
                    
                        
                            
                                
                            
                        
                        ', '' ); ?>
                    

 
                    comment_approved ) : ?>
                    
                    
                

 
                
                    
                

 
                 'div-comment',
                    'depth'     => $depth,
                    'max_depth' => $args['max_depth'],
                    'before'    => '',
                    'after'     => ''
                ) ) );
                ?>
            

In order to edit this, all you need to do is insert this code into functions.php, make few adjustments to get it all working, modify according to your needs and use callback parameter so the WordPress will use your custom function. This is how you call a custom function:
 bbird_under_comments,           
) );
     ?>
And this is my example of callback function – I wanted to implement Foundation grid system into comment section and rearrange some elements. You are free to modify the code as you wish. Oh, and just so you know, $comment is WordPress globals object…
function bbird_under_comments($comment, $args, $depth) {

$tag = ( 'div' === $args['style'] ) ? 'div' : 'li'; ?>
   < id="comment-" >
            
                
  
      
          
      

  
      
                 
                    
                        
                        %s', get_comment_author_link() ) ); ?>
                    

 
                    
                        
                            
                                
                            
                        
                     

 
                    comment_approved ) : ?>
                    
                    
                
                   
                    
                

  
 


  
 
                 'div-comment',
                    'depth'     => $depth,
                    'max_depth' => $args['max_depth'],
                    'before'    => '',
                    'after'     => ''
                ) ) );
                ?>
      
      
            

 
 
Post Editing wp_list_comments() output je prvi puta viđen na bbird.me.