WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 8 months ago

#18729 closed feature request (fixed)

No HTML Classes/IDs Associated With get_the_password_form() Output

Reported by: philiparthurmoore Owned by: westi
Milestone: 3.7 Priority: normal
Severity: normal Version: 3.2.1
Component: General Keywords: westi-likes has-patch
Focuses: Cc:

Description

Currently get_the_password_form() outputs a password form that offers no HTML classes or IDs for proper styling:

/**
 * Retrieve protected post password form content.
 *
 * @since 1.0.0
 * @uses apply_filters() Calls 'the_password_form' filter on output.
 *
 * @return string HTML content for password form for password protected post.
 */
function get_the_password_form() {
	global $post;
	$label = 'pwbox-'.(empty($post->ID) ? rand() : $post->ID);
	$output = '<form action="' . get_option('siteurl') . '/wp-pass.php" method="post">
	<p>' . __("This post is password protected. To view it please enter your password below:") . '</p>
	<p><label for="' . $label . '">' . __("Password:") . ' <input name="post_password" id="' . $label . '" type="password" size="20" /></label> <input type="submit" name="Submit" value="' . esc_attr__("Submit") . '" /></p>
	</form>
	';
	return apply_filters('the_password_form', $output);
}

It would be quite useful to add classes to the form and input elements in this output so that we can properly style the password form without having to filter the output in, for example, a theme's functions.php file.

Attachments (2)

get_the_password_form.patch (1.4 KB) - added by philiparthurmoore 3 years ago.
Adjusted spacing in patch and added semantic classes to form
get_the_password_form-azaozz.patch (1.3 KB) - added by philiparthurmoore 3 years ago.
Taking into account Andrew Ozz's suggestions

Download all attachments as: .zip

Change History (14)

comment:1 follow-ups: SergeyBiryukov3 years ago

If a theme uses post_class(), it should be possible to style the form using
.post-password-required form.

comment:2 in reply to: ↑ 1 westi3 years ago

  • Keywords needs-patch westi-likes added

Replying to SergeyBiryukov:

If a theme uses post_class(), it should be possible to style the form using
.post-password-required form.

True.

It would still be nice to add a class on the form anyway.

comment:3 in reply to: ↑ 1 philiparthurmoore3 years ago

Replying to SergeyBiryukov:

If a theme uses post_class(), it should be possible to style the form using
.post-password-required form.

Yes, but on index.php and archive.php-generated pages that have multiple password-protected posts it would be useful to have more fine-grained control over the forms. Also, there may be other forms/input on password protected pages/posts that may be adversely affected by using the body class to style those inputs. Cheers.

Edit. I obviously didn't read this correctly. Disregard my comments about body class. I think they may still apply to post class, though.

Last edited 3 years ago by philiparthurmoore (previous) (diff)

comment:4 westi3 years ago

@philiparthurmoore: some feedback on your patch:

  • Thanks for updating the spacing as you went through :)
  • I would name the classes: post-password-form, post-password-input, and post-password-submit - that way they are clearly semantic.

If you could update your patch to make those couple of changes that would be great :)

philiparthurmoore3 years ago

Adjusted spacing in patch and added semantic classes to form

comment:5 philiparthurmoore3 years ago

Thanks very much for your feedback, @westi. I've added those changes to the patch and re-attached it. Cheers.

comment:6 SergeyBiryukov3 years ago

  • Keywords has-patch added; needs-patch removed

comment:7 follow-up: azaozz3 years ago

Looking at get_the_password_form.patch we won't need 3 classes to style 3 elements. A post-password-form class on the <form> is enough. Also we don't need a randomized ID for both <label> and <input type="password" /> as the label surrounds the input field.

So it would look like this:

$output = '<form action="' . get_option('siteurl') . '/wp-pass.php" class="post-password-form" method="post"> 
<p>' . __("This post is password protected. To view it please enter your password below:") . '</p> 
<p><label>' . __("Password:") . ' <input name="post_password" type="password" size="20" /></label>
<input type="submit" name="Submit" value="' . esc_attr__("Submit") . '" /></p>';

All of the above HTML can be styled with .post-password-form p, .post-password-form label input and even .post-password-form input[type="submit"] if needed.

philiparthurmoore3 years ago

Taking into account Andrew Ozz's suggestions

comment:8 in reply to: ↑ 7 philiparthurmoore3 years ago

Replying to azaozz:

Looking at get_the_password_form.patch we won't need 3 classes to style 3 elements. A post-password-form class on the <form> is enough. Also we don't need a randomized ID for both <label> and <input type="password" /> as the label surrounds the input field.

So it would look like this:

$output = '<form action="' . get_option('siteurl') . '/wp-pass.php" class="post-password-form" method="post"> 
<p>' . __("This post is password protected. To view it please enter your password below:") . '</p> 
<p><label>' . __("Password:") . ' <input name="post_password" type="password" size="20" /></label>
<input type="submit" name="Submit" value="' . esc_attr__("Submit") . '" /></p>';

All of the above HTML can be styled with .post-password-form p, .post-password-form label input and even .post-password-form input[type="submit"] if needed.

Thank you very much for your suggestions and input, @azaozz. Cheers.

comment:9 westi8 months ago

  • Owner set to westi
  • Resolution set to fixed
  • Status changed from new to closed

In 25010:

Make is much easier for a theme to style the Post Password form.

Fixes #18729 props philiparthurmoore for the original patches.

comment:10 westi8 months ago

  • Milestone changed from Awaiting Review to 3.7

comment:11 nacin8 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

http://blog.paciellogroup.com/2011/07/html5-accessibility-chops-form-control-labeling/

Even when a label wraps an input, the for/id attributes are needed for many accessibility tools (and I want to say IE6?).

comment:12 westi8 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 25011:

Restore the for/id attributes in the post password for as they are necessary for accessibility tools. Fixes #18729.

Note: See TracTickets for help on using tickets.