• About Us
    • New York
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
  • About Us
    • New York
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
September 21, 2011

Adding Extra Fields to WordPress Comments

Posted by Christopher Davis

WordPress comes built in with a full featured, robust commenting system. If you write a blog, you probably want to interact with your readers. Comments give you a way to do that.

But WP’s built in comments might come in handy for other purposes. For instance, if you’re running a small ecommerce store on WordPress, you could use the commenting system to do customer reviews. You could also turn the comments into a sort of forum.

This tutorial is not going to be about specific usage, but, rather, a general how to for adding fields to comments on both the front end and back end of WordPress. We’ll be using the default Twenty Eleven theme here.

1. Adding Front End Form Fields

A few versions back WordPress standardized the comments form for theme authors with the creatively named comment_form function. Because it’s part of the core, the function comes loaded with hooks for plugin/theme authors to use to customize the form’s contents.

We’re going to use a few of those hooks: comment_form_logged_in_after and comment_form_after_fields. They will add something after the “You’re logged in as…” message or the name, email and website fields respectively.

The Future Comment Field Site

We’ll just call add_action for each of our hooks and in our hooked function spit out form code we want.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
<?php
add_action(‘comment_form_logged_in_after’,‘pmg_comment_tut_fields’);
add_action(‘comment_form_after_fields’,‘pmg_comment_tut_fields’);
functionpmg_comment_tut_fields()
{
    ?>
    <pclass=“comment-form-title”>
        <label for=“pmg_comment_title”><?php_e(‘Title’);?></label>
        <input type=“text”name=“pmg_comment_title”id=“pmg_comment_title”/>
    </p>
    <?php
}

Because we’re using Twenty Eleven, let’s hook into wp_head and spit out some CSS to prettify our form field. This is copied straight from the Twenty Eleven stylesheet adapted to our selector.

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
<?php
add_action(‘wp_head’,‘pmg_comment_tut_style_cheater’);
functionpmg_comment_tut_style_cheater()
{
    ?>
    <style type=”text/css”>
        #respond .comment-form-title {
            position:relative;
        }
        #respond .comment-form-title label {
            background:#EEE;
            -webkit-box-shadow:1px2px2pxrgba(204,204,204,0.8);
            -moz-box-shadow:1px2px2pxrgba(204,204,204,0.8);
            box-shadow:1px2px2pxrgba(204,204,204,0.8);
            color:#555;
            display:inline-block;
            font-size:13px;
            left:4px;
            min-width:60px;
            padding:4px10px;
            position:relative;
            top:40px;
            z-index:1;
        }
    </style>
    <?php
}

WordPress Comment Form with Added Title

2. Adding the Admin Form Field

The comments editing screen in the WordPress admin area is just like any other editing screen: you can add meta boxes to display and save additional data. You can check out this tutorial for a general overview of adding meta boxes.

First we’ll need to add our meta box with a function hooked into add_meta_boxes_comment and a call to add_meta_box with comment as our page and normal as our context. add_meta_box‘s third argument is a callback (the second function below) which takes care of outputting all the meta box’s content. We’ll also include a nonce field that we’ll use for some data validation purposes later on.

function pmg_comment_tut_meta_box_cb( $comment )
{
$title = get_comment_meta( $comment->comment_ID, ‘pmg_comment_title’, true );
wp_nonce_field( ‘pmg_comment_update’, ‘pmg_comment_update’, false );
?>
<p>
<label for=”pmg_comment_title”><?php _e( ‘Comment Title’ ); ?></label>
<input type=”text” name=”pmg_comment_title” value=”<?php echo esc_attr( $title ); ?>” class=”widefat” />
</p>
<?php
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
add_action(‘add_meta_boxes_comment’,‘pmg_comment_tut_add_meta_box’);
functionpmg_comment_tut_add_meta_box()
{
    add_meta_box(‘pmg-comment-title’,__(‘Comment Title’),‘pmg_comment_tut_meta_box_cb’,‘comment’,‘normal’,‘high’);
}
functionpmg_comment_tut_meta_box_cb($comment)
{
    $title=get_comment_meta($comment->comment_ID,‘pmg_comment_title’,true);
    wp_nonce_field(‘pmg_comment_update’,‘pmg_comment_update’,false);
    ?>
    <p>
        <label for=“pmg_comment_title”><?php_e(‘Comment Title’);?></label>
        <input type=“text”name=“pmg_comment_title”value=“<?phpechoesc_attr($title);?>“class=“widefat”/>
    </p>
    <?php
}

WordPress Comment Title Meta Box

3. Saving the Title

Next up, we need to actually take care of saving the title for our comment. We’ll need to do this in two places: the front end form and the admin area meta box.

When WordPress outputs a comment form, it does so with a file called wp-comments-post.php as the form action. The first step, when trying to add functionality to some built in WP features is to go the file that does the work and start looking for do_action and apply_filters calls (hooks). There are none in wp-comments-post.php, so you have to go a little deeper. The file calls a function called wp_new_comment, which takes care of inserting the comment into the database. It also includes a hook called comment_post we’ll use.

Insider of the function hooked into comment_post, you’ll have access to the global PHP $_POST array which will contain our title. First we’ll check and make sure its there, then use update_comment_meta to save our title.

1
2
3
4
5
6
7
<?php
add_action(‘comment_post’,‘pmg_comment_tut_insert_comment’,10,1);
functionpmg_comment_tut_insert_comment($comment_id)
{
    if(isset($_POST[‘pmg_comment_title’]))
        update_comment_meta($comment_id,‘pmg_comment_title’,esc_attr($_POST[‘pmg_comment_title’]));
}

For the admin area, we need to do a bit more work. First we’ll verify our nonce, then check and make sure our title is set and update it if it is.

1
2
3
4
5
6
7
8
<?php
add_action(‘edit_comment’,‘pmg_comment_tut_edit_comment’);
functionpmg_comment_tut_edit_comment($comment_id)
{
    if(!isset($_POST[‘pmg_comment_update’])||!wp_verify_nonce($_POST[‘pmg_comment_update’],‘pmg_comment_update’))return;
    if(isset($_POST[‘pmg_comment_title’]))
        update_comment_meta($comment_id,‘pmg_comment_title’,esc_attr($_POST[‘pmg_comment_title’]));
}

4. Sharing Comment Titles with the World

Now it’s time to actual show the comment titles on the front end. There are two ways one could do this:

1. Include a call to get_comment_meta to fetch our title somewhere in the custom callback specified for wp_list_comments. This would be the most flexible option as it would give complete control of the layout.

2. Hook into the comment_text filter, grab the comment title with get_comment_meta, then add it to the comment text before sending it out.

We’ll use the second option in this case. We’ll hook into comment_text, first checking to see if we’re in the admin area. If we are, return the content straight away. Next we’ll try to get our comment title. If it’s there, we’ll add it to the text. Then we send the comment text back out.

WordPress uses its own plugin API to do several things within the core. Namely, it adds certain filters to your post content text and comment text. We need to call our comment_text filter way late to ensure it doesn’t step on any of those built in filters toes (or, rather, that those default filters don’t screw up our formatting). This is done with the third argument of add_filter. The higher the number, the later, the function is called. If you want to see how the WP core uses its own hook system, check out wp-includes/default-filters.php.

1
2
3
4
5
6
7
8
9
10
11
12
<?php
add_filter(‘comment_text’,‘pmg_comment_tut_add_title_to_text’,99,2);
functionpmg_comment_tut_add_title_to_text($text,$comment)
{
    if(is_admin())return$text;
    if($title=get_comment_meta($comment->comment_ID,‘pmg_comment_title’,true))
    {
        $title=‘<h3>’.esc_attr($title).‘</h3>’;
        $text=$title.$text;
    }
    return$text;
}

The End Result: Comments with Titles

WordPress Comments With Titles

The entire code for this article is available as a plugin.

Developmentwordpresswordpress dashboard
Previous
Next

Latest White Papers

  • Shifting Plans for 2020 & Beyond
  • Game On: How Brands Can Log Into A Diverse Multi-Billion Dollar Industry
  • What CCPA Means For Brands
  • How Google is Improving Consumer Data Privacy
  • Ways to Prepare for the Cookieless Future
  • See all White Papers

Featured Posts

  • Ad Age Names PMG #1 Best Place to Work in 2021
  • Hindsight 2020 & Looking Ahead to 2021
  • Preparing for Streaming’s Growth & The Future of TV Buying
  • MediaPost Names PMG Independent Agency of the Year
  • PMG Client Portfolio Trends During Amazon Prime Day 2020

Categories

  • Consumer Insights
  • Content
  • Creative Design
  • Data Analytics
  • Development
  • Digital TV & Video
  • Ecommerce
  • Industry News
  • Local
  • Mobile
  • Paid Search
  • PMG Culture
  • Programmatic & Display
  • SEO
  • Social Media
  • Structured Data
Fort Worth

2845 West 7th Street
Fort Worth, TX 76107

Dallas

3102 Oak Lawn Avenue
Suite 650
Dallas, TX 75219

Austin

823 Congress Avenue
Suite 800
Austin, TX 78701

London

33 Broadwick Street
London
W1F 0DQ

New York

120 East 23rd Street
New York, NY 10010

Get in touch

(817) 420 9970
info@pmg.com

Subscribe to the PMG Newsletter
© 2021 PMG Worldwide, LLC, All Rights Reserved
  • Contact
  • Privacy Policy
 Tweet
 Share
 Tweet
 Share
 Tweet
 Share
 LinkedIn
We and our partners use cookies to personalize content, analyze traffic, and deliver ads. By using our website, you agree to the use of cookies as described in our Cookie Policy.