How to reorder fields in the comment form with filters in PHP in WordPress

This tutorial explains, in full detail, how to reorder fields in the WordPress comment form using PHP filters. It covers the core filters to use, multiple practical examples (with copy-paste-ready code), accessibility considerations, logged-in-user differences, plugin/theme compatibility, JavaScript fallback, where to place the code, and testing/troubleshooting tips. Every code example is provided in runnable form and properly annotated for you to drop into a child themes functions.php or into a small plugin.

Why reorder comment form fields?

Reordering comment form fields is useful when you want to improve the UX (for example, placing the comment textarea first), match a design system, comply with legal or privacy flows (placing cookie consent before submit), or integrate custom fields that require a particular sequence. WordPress allows reordering server-side using filters so the markup and form structure are correct before rendering — no fragile DOM manipulation required.

Core filters and what they do

There are three important hooks related to comment form fields. Use them depending on your goal:

Official documentation:

• comment_form_fields
• comment_form_default_fields
• comment_form_defaults

How WordPress uses the fields array

WordPress comment_form() expects an associative array where order matters. The array keys (for default fields) are typically author, email, url, cookies, plus comment for the textarea. Changing the order of array elements changes the output order of the fields. The simplest and most reliable way to reorder fields is to filter the comment_form_fields array and return a new ordered associative array.

Basic examples

1) Move the comment textarea to the top

Place this in your child themes functions.php or a small plugin. This unsets the comment element and places it first.

 comment_field ), fields )
    }
    return fields
}
add_filter( comment_form_fields, custom_move_comment_field_to_top , 20 )
?>

2) Enforce a specific order (author → email → url → comment → cookies)

This is robust: it respects whichever fields exist and appends any unexpected fields to the end.

 value ) {
        ordered[ key ] = value
    }

    return ordered
}
add_filter( comment_form_fields, custom_reorder_comment_fields, 20 )
?>

3) Move author before email only if both exist

 v ) {
            if ( k === email ) {
                new[author] = author
            }
            new[ k ] = v
        }
        return new
    }
    return fields
}
add_filter( comment_form_fields, maybe_swap_author_email, 20 )
?>

4) Remove a field (example: remove the URL field)

5) Add a custom field and place it after author

When adding a custom field, ensure its name/key doesnt collide with existing keys.

Phone .
                   


    // Insert phone after author
    new = array()
    foreach ( fields as key => value ) {
        new[ key ] = value
        if ( key === author ) {
            new[phone] = phone_field
        }
    }
    return new
}
add_filter( comment_form_fields, add_custom_phone_field, 20 )
?>

Reordering the submit button

The submit button HTML is controlled by comment_form() via arguments like submit_field and submit_button. To move the submit button above fields or to change its markup, filter comment_form_defaults and provide a custom submit_field. Note: %1s is the submit button HTML %2s is the cancel-reply link.

%1s %2s

    return defaults
}
add_filter( comment_form_defaults, custom_submit_above_fields )
?>

If you need the submit button literally before all fields in the markup, the simplest reliable option is to create custom comment_form() args where you output the button in the desired location in your theme template reordering everything via filters is still possible but be mindful of the themes comment template structure.

Accessibility, required attributes and ARIA

When you reorder fields, you must preserve required attributes and ARIA attributes used for accessibility. WordPress default fields usually include required and aria-required=true when appropriate. If you manipulate fields by string concatenation, avoid removing these attributes.

Example: preserving aria-required when moving the comment field (the earlier examples do this already because we move the entire HTML string). If you construct fields manually, make sure to add aria-required and use ltlabelgt elements with for attributes that match input IDs.

Logged-in users and conditional fields

WordPress renders fewer fields if the user is logged in (it often hides name/email inputs). When you reorder fields, check for is_user_logged_in() or check for the existence of specific field keys in the fields array. The safe pattern (used in above examples) is to only act on keys that exist so behavior is consistent whether the user is logged in or not.

Theme and plugin compatibility

• Use a child theme or plugin: Put your filter in a child themes functions.php or a custom plugin. If you override the parent themes comment template, confirm how comment_form() is called in your theme some themes customize markup heavily.
• Hook priority: If you find your handler runs too early or too late (fields changed or overwritten by theme/plugins), adjust the priority number. A higher numeric priority (for example, add_filter(…, 100)) runs later. Typical values: 10-100.
• Plugins adding custom fields: A robust reorder function should append unknown keys to the end or explicitly handle them. Example code above demonstrates that strategy.
• Escaping: When you add fields manually, use esc_attr(), esc_html() and wp_kses_post() as appropriate if you build HTML from data.

JavaScript fallback (when server-side reordering isnt possible)

Some themes build the form using JavaScript or alter output after PHP filters run. In those situations, you can also move nodes with JS as a fallback. Use this only if you cannot control server-side output. Heres an example using jQuery:

// jQuery fallback to move comment textarea before name field
jQuery(document).ready(function(){
    var comment = (#comment)
    var author = (#author)
    if ( comment.length  author.length ) {
        // Move the whole textarea wrapper (assuming typical WP markup uses .comment-form-comment)
        var commentWrapper = comment.closest(p,div)
        var authorWrapper = author.closest(p,div)
        if ( commentWrapper.length  authorWrapper.length ) {
            commentWrapper.insertBefore(authorWrapper)
        }
    }
})

Enqueue this script correctly in WordPress with wp_enqueue_script and add it with appropriate dependencies and in the footer to avoid jQuery conflicts.

Where to place this code

1. For theme-specific changes: child-themes functions.php (recommended) — not the parent theme.
2. For changes shared across themes or for distribution: create a tiny plugin (recommended for portability).
3. For quick experiments: a code snippets plugin or mu-plugin if you need it to run before normal plugins.

Example small plugin header to create a plugin for reordering (wrap the functions above inside the plugin file):

Testing and troubleshooting checklist

• Clear caches (object cache, page cache) — caching plugins may show old HTML.
• Test while logged out and logged in to ensure fields appear/behave correctly.
• Check developer console for JS errors if using a JS fallback.
• Inspect markup to verify for attributes on ltlabelgt tags match input IDs, and ARIA attributes remain intact.
• Check compatibility with comment plugins (e.g., comment meta plugins) — ensure their fields are preserved.
• Adjust hook priority if your changes are overwritten try higher priority numbers like 20, 50, or 100.

Full, production-ready example

The following example is a consolidated, robust snippet that:

• Defines a desired order
• Adds a custom field (phone) after author only if author exists
• Preserves unknown fields (from plugins) by appending them
• Runs late (priority 100) to avoid early overrides

 . esc_html__( Phone, textdomain ) .  .
                        


    // If author is present, well insert phone after it. If not, phone will be placed where desired_order requests it.
    // First, ensure any existing phone key from plugins is not clobbered.
    if ( ! isset( fields[phone] ) ) {
        // Well add phone later while building ordered array
        fields[_custom_phone_placeholder] = phone_field_html
        // Use a placeholder key to avoid conflict with other keys until we rebuild into phone
    }

    // Build ordered array following desired order, but only include keys that exist in fields (or the placeholder)
    foreach ( desired_order as key ) {
        if ( key === phone  isset( fields[_custom_phone_placeholder] ) ) {
            // Insert the custom phone field under key phone
            ordered[phone] = fields[_custom_phone_placeholder]
            unset( fields[_custom_phone_placeholder] )
            continue
        }
        if ( isset( fields[ key ] ) ) {
            ordered[ key ] = fields[ key ]
            unset( fields[ key ] )
        }
    }

    // Append everything else to preserve plugin-added fields
    foreach ( fields as key => value ) {
        ordered[ key ] = value
    }

    return ordered
}
add_filter( comment_form_fields, production_reorder_comment_fields, 100 )
?>

Summary

Reordering comment form fields in WordPress is best done using the comment_form_fields filter because it contains the comment textarea and other fields as they will be output. Simple moves can be achieved by unsetting and re-inserting keys robust solutions construct a new ordered array from a desired order while preserving unknown fields. Be mindful of accessibility attributes, logged-in-user differences, theme/plugin interactions, and caching. When server-side control isnt possible, a JS fallback can be used, but server-side is preferred for stability and accessibility.

	Acepto donaciones de BAT's mediante el navegador Brave 🙂