• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Wordpress » Customize Wordpress Comment Form with Bootstrap

Customize WordPress Comment Form with Bootstrap

By Sigit Prasetya Nugroho ∙ July 15, 2015 ∙ Wordpress ∙ 4 Comments

Share : TwitterFacebookTelegramWhatsapp

Continuing my article on “Create a WordPress Theme with Bootstrap And underscores Step by Step“, I forgot to added how to change template on the wordpress comment form. In order to wordpress comment form can be adapted with bootstrap framework, it needed a wordpress function called ” comment_form() “. Using comment_form() function is quite easy and safe for your wordpress. For explanation comment_form() function can be read directly from codex.wordpress.org.

Customize WordPress  Comment Form with Bootstrap

Let’s start the tutorial to customize the comment form wordpress with bootstrap framework. Actually there are many blogs that discuss about wordpress comment form. I’ll just review a little step to use this function to continue my previous article on how to create wordpress template with bootstrap framework and underscore. Here’s a bit of discussion about Function Reference / comment_form() that I took from the site codex.wordpress.org According codex.wordpress.org :

comment_form() description is tag outputs a complete commenting form for use within a template.

The point is to use comment_form() function , you can customize the look of the standard form belongs wordpress comment form in accordance with your imagine without change of the main core of wordpress itself.

Related Articles :

  • Upgrade Responsive Bootstrap Table Using Footable Plugin
  • [Resolved] SweetAlert Prompt Not Working On Modal Dialog Bootstrap In Firefox
  • Change Bootstrap Modal Dialog Effect With Animate.css

For those of you who don’t have the raw of wordpress theme that I have made in previous articles, please read the article and download the file in “Create WordPress Theme with Bootstrap And Underscores Step by Step“. Please open the file in comments.php and find the following code

1
// You can start editing here -- including this comment!

On these lines you can added scripts to customize the comment form on a wordpress theme. Copy the following line

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$fields =  array(
 
  'author' =>
    '<p class="comment-form-author"><div class="form-group"><label for="author">' . __( 'Name', 'domainreference' ) . '</label> ' .
    ( $req ? '<span class="required">*</span>' : '' ) .
    '<input id="author" class="form-control" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
    '" ' . $aria_req . ' /></div></p>',
 
  'email' =>
    '<p class="comment-form-email"><div class="form-group"><label for="email">' . __( 'Email', 'domainreference' ) . '</label> ' .
    ( $req ? '<span class="required">*</span>' : '' ) .
    '<input id="email" name="email" class="form-control" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) .
    '" ' . $aria_req . ' /></div></p>',
 
  'url' =>
    '<p class="comment-form-url"><div class="form-group"><label for="url">' . __( 'Website', 'domainreference' ) . '</label>' .
    '<input id="url" name="url" class="form-control" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
    '"   /></p>',
);
    $comments_args = array(
 
        // change "Leave a Reply" to "Comment"
        'title_reply'=>'Discuss this post ?',
        'fields' => apply_filters( 'comment_form_default_fields', $fields ),
        'comment_field' =>  '<p class="comment-form-comment"><div class="form-group"><label for="comment">' . _x( 'Comment', 'noun' ) .
            '</label><textarea id="comment" name="comment" class="form-control"  rows="8" aria-required="true">' .
            '</textarea></div></p>',
             'comment_notes_after' => ' ');

and then find  function

1
comment_form();

change with

1
comment_form($comments_args);

Save and see the results, wordpress comment form with bootstrap framework is ready to use.

Thus my article on WordPress Comment Form Customize with Bootstrap, may be useful

Another WordPress Related Post :

  • How To Create The Fastest Social Share Button WordPress Without Plugin
  • Create WordPress Slider Without Javascript
  • The Point Responsive WordPress Theme For Blogging
  • The Doctors Free WordPress Responsive Theme For Medical
  • Develop Your Site With Start Blogging The Responsive WordPress Theme
  • Zerius Theme The Free WordPress Responsive Theme

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Comments

  1. Avatar for AmeerAmeer says

    March 4, 2016 at 6:50 am

    where to drop this code? function.php or comment.php ?

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      March 4, 2016 at 3:55 pm

      comment.php 🙂

      Reply
  2. Avatar for SimonSimon says

    November 26, 2016 at 5:46 pm

    Thanks! I have used this script, works fine!

    Reply
  3. Avatar for Ifiokobong Nsuhoreidem AkpanIfiokobong Nsuhoreidem Akpan says

    April 10, 2017 at 11:54 am

    thank you guy

    Reply

Leave a Reply Cancel reply

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

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for Ifiokobong Nsuhoreidem AkpanThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) lumen api (4) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (8) Publisher Tips (5) react (6) Reactjs (9) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2022 Seegatesite.com