0

Inside a template there's

<?php wp_login_form( array( 'echo' => true ) ); ?>

Source code

<p class="login-remember">
<label>
<input name="rememberme" type="checkbox" id="rememberme" value="forever"> Remember Me
</label>
</p>

I'd like to add a span tag after Remember me

Remember Me <span class="custom-styled-checkbox"></span>

I tried to add some html to the label but that didn't worked:

    $args = array(                  
    'label_remember' => __( 'Remember Me <span class="custom-styled-checkbox"></span>' ),
        );
   wp_login_form( $args );

Neither did something simple as this

function custom_checkbox_form($output) {
    $search  = array('<p class="login-remember"><label>','</label></p>');
    $replace = array('<p class="login-remember"><label>', '<span class="custom-styled-checkbox"></span></label></p>'); 

    return str_replace( $search, $replace, $output );
}   
add_filter( 'login_head', 'custom_checkbox_form', 99, 1 );

Any help is much appreciated.

1 Answer 1

1

The label_remember argument is for changing the text only; HTML will be escaped, so that won't work here.

Instead, the HTML for the login form can be parsed and modified before it is output:

// Get the HTML for the login form
$login_form = wp_login_form( [ 'echo' => false ] );

// Create an instance of DOMDocument 
$dom = new \DOMDocument();

// Populate $dom with our login form, making sure to handle UTF-8, otherwise
// problems will occur with UTF-8 characters.
$dom->loadHTML( mb_convert_encoding( $login_form, 'HTML-ENTITIES', 'UTF-8' ) );

// Create an instance of DOMXpath and get the <p class="login-remember"> node
$xpath = new \DOMXpath( $dom );
$remember = $xpath->query( '//p[@class="login-remember"]' );

// Iterate over the $remember node...
foreach ( $remember as $container ) {
    // Create the <span> element
    $checkbox_span = $dom->createElement( 'span' );

    // Create the class attribute
    $checkbox_span_attr = $dom->createAttribute( 'class' );
    // Set the value of the class attribute
    $checkbox_span_attr->value = 'custom-styled-checkbox';

    // Add class="custom-styled-checkbox" to the <span> element
    $checkbox_span->appendChild( $checkbox_span_attr );

    // Append the completed <span class="custom-styled-checkbox"></span> element
    // to <p class="login-remember"><label>
    //$container->childNodes[0]->appendChild( $checkbox_span ); // Fails on PHP < 5.6.3?
    $container->childNodes->item(0)->appendChild( $checkbox_span );
}

// Save the updated HTML to $login_form and output it.
$login_form = $dom->saveHTML();
echo $login_form;
3
  • Sorry for the late response. The code returns an error. Fatal error: Cannot use object of type DOMNodeList as array
    – kiarashi
    Oct 26, 2016 at 8:36
  • I'm guessing you're running a PHP version prior to 5.6.3. I have updated the code accordingly. Keep me posted if it's still not working. Oct 26, 2016 at 9:01
  • 1
    It's working! Thank you. It was indeed this line $container->childNodes[0]->appendChild( $checkbox_span );
    – kiarashi
    Oct 26, 2016 at 10:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.