Style WordPress comments in bootstrap

in  Building the blog, Wordpress
4 minutes read

With creating your own WordPress theme you will have to style comment section. For that purpose you will have to add a bit of own styling. In my case I used bootstrap CSS framework that makes life easier for programmers that are not that proficient with front end styling. This will make sure that your page will be responsive on all devices and browsers without enormous effort and testing.

CSS in real life meme

To style we will need to find template called comments.php. Take a look at the bootstrap documentation on how to style forms. Find what you like and let us begin. Comment form is rendered with WordPress function comment_form that takes an array as argument. You might have guessed that different arguments can access and override default form HTML code that will be rendered. The default values that are used in the comment_form function are:

 		'comment_notes_after'  => '',
        'action'               => site_url( '/wp-comments-post.php' ),
        'id_form'              => 'commentform',
        'id_submit'            => 'submit',
        'class_container'      => 'comment-respond',
        'class_form'           => 'comment-form',
        'class_submit'         => 'submit',
        'name_submit'          => 'submit',
        'title_reply'          => __( 'Leave a Reply' ),
        /* translators: %s: Author of the comment being replied to. */
        'title_reply_to'       => __( 'Leave a Reply to %s' ),
        'title_reply_before'   => '<h3 id="reply-title" class="comment-reply-title">',
        'title_reply_after'    => '</h3>',
        'cancel_reply_before'  => ' <small>',
        'cancel_reply_after'   => '</small>',
        'cancel_reply_link'    => __( 'Cancel reply' ),
        'label_submit'         => __( 'Post Comment' ),
        'submit_button'        => '<input name="%1$s" type="submit" id="%2$s" class="%3$s" value="%4$s" />',
        'submit_field'         => '<p class="form-submit">%1$s %2$s</p>',
        'format'               => 'xhtml',

This will give you an idea what is used inside the function. Also similar default values for fields:

'email'  => sprintf(
            '<p class="comment-form-email">%s %s</p>',
            sprintf(
                '<label for="email">%s%s</label>',
                __( 'Email' ),
                ( $req ? ' <span class="required">*</span>' : '' )
            ),
            sprintf(
                '<input id="email" name="email" %s value="%s" size="30" maxlength="100" aria-describedby="email-notes"%s />',
                ( $html5 ? 'type="email"' : 'type="text"' ),
                esc_attr( $commenter['comment_author_email'] ),
                $html_req
            )
        ),

Example above shows how the email field is done and passed as an array which contains all fields used in the comment form.

Once you have this read you can come up with something similar to what I have done for this page.

comment_form(
		array(
			'logged_in_as'       => null,
			'title_reply'        => esc_html__( 'Leave a comment', 'mtn' ),
			'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title">',
			'title_reply_after'  => '</h2>',
			'id_submit' => 'submitcomment',
			'class_submit'          => 'g-recaptcha btn btn-primary',
			'name_submit'          => 'submitbutton',
			'class_form' => 'row',
			'submit_button'        => '<button name="%1$s" id="%2$s" class="%3$s" data-sitekey="FOR_RECAPTCHA_V3" 
			data-callback="onSubmit" data-action="submit">%4$s</button>',
			'comment_field'        => sprintf(
				'<div class="col-12 my-2  comment-form-comment">%s %s</div>',
				sprintf(
					'<label class="form-label" for="comment">%s</label>',
					_x( 'Comment', 'noun' )
				),
				'<textarea id="comment" class="form-control" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea>'
			),
			'fields' => array(
				'author' => sprintf(
					'<div class="col-12 col-lg-6 my-2  comment-form-author">%s %s</div>',
					sprintf(
						'<label class="form-label" for="author">%s%s</label>',
						__( 'Name' ),
						( $req ? ' <span class="required">*</span>' : '' )
					),
					sprintf(	
						'<input class="form-control" id="author" name="author" type="text" value="%s" size="30" maxlength="245"%s />',
						esc_attr( $commenter['comment_author'] ),
						$html_req
					)
				),
				'email'  => sprintf(
					'<div class="col-12 col-lg-6 my-2  comment-form-email">%s %s</div>',
					sprintf(
						'<label class="form-label" for="email">%s%s</label>',
						__( 'Email' ),
						( $req ? ' <span class="required">*</span>' : '' )
					),
					sprintf(
						'<input class="form-control" id="email" name="email" %s value="%s" size="30" maxlength="100" aria-describedby="email-notes"%s />',
						( $html5 ? 'type="email"' : 'type="text"' ),
						esc_attr( $commenter['comment_author_email'] ),
						$html_req
					),
					
				),
				'url'    => sprintf(
					'<div class="col-12 col-lg-6 my-2 comment-form-url">%s %s</div>',
					sprintf(
						'<label class="form-label" class="form-label" for="url">%s</label>',
						__( 'Website' )
					),
					sprintf(
						'<input class="form-control" id="url" name="url" %s value="%s" size="30" maxlength="200" />',
						( $html5 ? 'type="url"' : 'type="text"' ),
						esc_attr( $commenter['comment_author_url'] )
					)
				),
				'cookies' => sprintf(
					'<div class="col-auto my-2 comment-form-cookies-consent"><div class="form-check">%s %s</div></div>',
					sprintf(
						'<input class="form-check-input" id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"%s />',
						$consent
					),
					sprintf(
						'<label class="form-check-label" for="wp-comment-cookies-consent">%s</label>',
						__( 'Save my name, email, and website in this browser for the next time I comment.' )
					)
				)

			)
		)
	);
	?>

Hope this little tutorial will help you with your own stylish comment form, that will make everybody want to leave comment on your page. How to fight spam in your comments see the blog post Adding recaptcha v3 to your wordpress page, which will help to get rid of it for once and all (hope so).

in  Building the blog, Wordpress

Beware! Work in progress

1 minute read

Page is in the works and, therefore you might see it changing time to time or perhaps sometimes experiencing weird errors. It’s all good it’s part of this project and the journey to get a blog and I am on the road to document it all. February 2022 Recaptcha v3 updated as spam still happened […]

Continue reading
in  Building the blog, Wordpress

Adding recaptcha v3 to wordpress page

4 minutes read

As owner of a blog that is around for a while with any traffic, you will find sooner or later annoying amount of spam comments taking your blog by storm. If the akismet is not your cup of tea and you do not want to pay for possible license (commercial use), then I can show […]

Continue reading
in  Building the blog

Building blog from “scratch”

1 minute read

This is the first post from the series on how I built, or more precisely on how I will build this blog. Before you will start to build your own blog, well right after you chose your hosting provider and buy your domain, you will have to decide technology, CMS or blogging platform. Of course […]

Continue reading
in  Building the blog

Hello world!

1 minute read

This is the martechnotes’ first post. So why not start by saying something about who we are and what you will find on our blog. We are MarTech (Marketing Technology) professionals and we have been working for 8+ years in this industry. As my father used to say: Professional is somebody who gets paid for […]

Continue reading