Building the blog, Wordpress

Style WordPress comments with bootstrap

Comment form with bootstrap

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).

Oh hi there 👋
I have a FREE e-book for you.

Sign up now to get an in-depth analysis of Adobe and Salesforce Marketing Clouds!

We don’t spam! Read our privacy policy for more info.

#bootstrap #programming #wordpress
Marcel Szimonisz
Marcel Szimonisz
MarTech consultant As a marketing automation consultant, I specialize in solving problems, automating processes, and driving innovation in my clients' marketing platforms.

I hold certifications in Adobe Campaign v6 (3x certified) and Salesforce Marketing Cloud (5x certified).

Additionally, I serve as a community advisor for Adobe Campaign, offering expert insights and guidance.

In addition to my professional pursuits, I also enjoy exploring various programming languages, CMSs, and frameworks, further enhancing my technical expertise and staying at the forefront of industry advancements.
Take a look at our subscription offering in case you are looking for a Marketing Automation Consultant.

Leave a comment

Your email address will not be published. Required fields are marked *

Similar posts that you may find useful

Wordpress CMS
Building the blog, Wordpress

Adding SEO and site maps to search console

less than a minute read

I have found one plugin that meets all my requirements and those are All three were satisfied with The SEO Framework. But also with this plugin I had some struggles, later I found same problems one may have with all other SEO plugins. The problem I had was that I was not able to read […]

Continue reading
Wordpress CMS tips
Wordpress

Disable google analytics when logged in as admin

2 minutes read

As the title suggests, I have no intention of tracking my admin activity on the page. The idea is to disable Google Analytics when the admin is logged in. To simply disable Google Analytics, you just need to set the ‘ga-disable’ window variable to ‘true’. I suppose this can be added anywhere on the page, […]

Continue reading
Computer workplace
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
Fade article effect on wordpress post
Building the blog, Wordpress

Fade post article effect in wordpress theme

3 minutes read

Adding visual interest and engaging design elements to your WordPress website is an essential part of creating a great user experience. One way to accomplish this is by adding a fade effect to your post articles, which can create an attractive and engaging visual transition for readers. In this blog post, we’ll show you how […]

Continue reading
Building the blog, Wordpress

Add reCAPTCHA to wordpress page form

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