How to customize responsive WordPress Comment form

This tutorial will help you how to customize responsive WordPress Comment form by using custom comment_form() function in your WordPress themes

As you know WordPress is highly customizable and can be customized up to a great extent. WordPress is also famous for a huge repository of plugins which provides you plugins for everything. Using plugin in your WordPress website is the easiest way of adding new functionality. If you don’t want to use these free plugins then you will need to code on your own. Yes customize your WordPress themes website by coding

Responsive WordPress comment form

WordPress Comment form system

The most basic function which is responsible for displaying comment box is comment_form(). You will see a call to this function in bottom section of “comments.php” file. Usually single.php, page.php, contact form template of theme call comment_form() function to display comment box. Below is the snapshot of twenty twelve theme’s “comments.php”.

Function commens_form() takes two parameters:

<?php comment_form( $args, $post_id ); ?>

$args: This contains our options for our strings and fields within the form and etc.
$post_id: Post ID is used to generate the form, if null it will use the current post.

Responsive WordPress Comment form

I’ve today modified comment form and added some CSS and noticed very big difference in my comment form. Would like to share my changes with you. If you are using Magazine themes then open comments.php file and look for below code for responsive WordPress comment form.

Here is code responsive WordPress comment form with Bootstrap framework

<?php
$args = array(
		'fields' => apply_filters(
				'comment_form_default_fields', array(
						'author' =>'<div class="row"><div class="col-lg-4 col-md-4"><p class="comment-form-author">' . '<input id="author" placeholder="Your Name (No Keywords)" name="author" type="text" value="' .
						esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' />'.
						'</p></div>'
						,
						'email'  => '<div class="col-lg-4 col-md-4"><p class="comment-form-email">' . '<input id="email" placeholder="email@domain.com" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) .
						'" size="30"' . $aria_req . ' />'  .

						'</p></div>',
						'url'    => '<div class="col-lg-4 col-md-4"><p class="comment-form-url">' .
						'<input id="url" name="url" placeholder="http://your-site-name.com" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /> ' .
						'</p></div></div>'
				)
		),
		'comment_field' => '<p class="comment-form-comment">' .
		'<textarea id="comment" name="comment" placeholder="Express your thoughts, idea or write a feedback by clicking here & start an awesome comment" cols="45" rows="8" aria-required="true"></textarea>' .
		'</p>',
		'comment_notes_after' => '',
		'title_reply' => '<div class="crunchify-text"> <h5>Please Post Your Comments & Reviews</h5></div>'
);
?>

<?php comment_form($args, $post->ID); ?>

Hope you find this helpful. Please share your thoughts and opinion below.

Share this :

Comments are closed.

Related post

Free Responsive Website templates

ThemeVina is Best site for free sharing and download Wordpress themes, Joomla templates, Responsive website templates and more HTML templates.

All template in Site are free. You can download and install for your site.

Contact us

  • Brand: Theme Vina
  • Email: admin@themevina.com
  • Website: www.themevina.com
  • Address: 367 Tran Hung Dao Street
  • Location: Thai Binh City, Thai Binh, Viet Nam

Newsletter