WordPress – How to automatically insert Non-Breaking Space using Ctrl + Shift + Space

A non-breaking space allows you to add a space between two words that prevents an automatic line break (line wrap) at its position.

They’re commonly used where amounts, such as dollars are separated using a space or when typing a brand name.

When using Microsoft Word it’s as easy as typing Ctrl + Shift + Space – but it’s not at easy in an HTML WYSIWYG editor such as in WordPress.

However, with the following PHP filter you can make TinyMCE automatically create a non-breaking space when using the Ctrl + Shift + Space key combination.

If you’re not sure where to place this code I highly recommend you read How to create a WordPress plugin for your custom functions.

add_filter( 'tiny_mce_before_init', function( $initArray ) {
 $initArray['setup'] = <<<JS
[function(editor) {
 var down = {};
 editor.onKeyDown.add( function( editor, event ) {
 down[event.keyCode] = true;
 });
 editor.onKeyUp.add( function( editor, event ) {
 if ( down[16] && down[17] && down[32] ) {
 editor.execCommand( 'mceInsertContent', false, '&nbsp;' ); // inserts non-breaking space
 }
 down[event.keyCode] = false;
 });

}][0]
JS;
 $initArray['entities'] = '160,nbsp,38,amp,60,lt,62,gt'; 
 $initArray['entity_encoding'] = 'named';
 return $initArray;
});

WordPress – How to make tab key create tabs in TinyMCE WYSIWYG editor

The following code will make the WordPress visual editor (TinyMCE) create “tabs” (which don’t actually exist in HTML, so we’re actually adding in two HTML entities for space).

With this code added when you click the tab button on the keyboard a the content will be automatically spaced out, as it would with a real tab in a document editor like Microsoft Word.

If you’re not sure where to place this code I highly recommend you read How to create a WordPress plugin for your custom functions.

add_filter( 'tiny_mce_before_init', function( $initArray ) {
  $initArray['setup'] = <<<JS
[function(editor) {
 editor.onKeyDown.add(function(editor, event) {
 if ( 9 == event.keyCode ) { // tab pressed
 editor.execCommand( 'mceInsertContent', false, '&emsp;&emsp;' ); // inserts tab
 event.preventDefault();
 return false;
 }
 });

}][0]
JS;
  return $initArray;
});

 

WordPress – How to tab indent text using TinyMCE WYSIWYG editor

When using the visual editor in WordPress (TinyMCE) you’re composing content in HTML.

Whilst it may be as easy as writing a document in Microsoft Word, it is still limited by what HTML can support – most importantly, there is not such thing as a tab indent in HTML.

There are however several options:

  • Bulleted or numbered lists
  • Tables
  • CSS
  • Add space entity codes, e.g. &emsp;

Bulleted or numbered lists

If there is only one “level” of information, or the structure is relatively simple you could use bulleted or numbered lists to present the data.

For example:

  • Item 1
  • Item 2
    • Item 2.1
  • Item 3

Tables

If there is more than one “level” of information a table may better suit the information.

For example:

Number Items
1 Item 1
2 Item 2

CSS

CSS is the styles given to the HTML content – this method is similar to using a ‘blockquote’ – because blockquotes are automatically given styles, however blockquotes can be displayed inconsistently across different browers.

For example:

<span style="margin-left: 30px;">This text has a 30px margin on the left</span>

This text has a 30px margin on the left

Add space entity codes

Finally, if none of the above options are suitable you could also carefully add the HTML entity codes for a space – ensuring that TinyMCE will not “clean them up” and remove them.

The manually enter a space entity code, use the ‘text’ button at the top right to switch to the HTML editor (or semi-HTML because it doesn’t show all tags, such as <p> or <br>) and enter the following where you would like the tab space to be:

&emsp;&emsp;

If this option works for you, you could apply a filter so that when the tab key is pressed in the editor these are inserted automatically – however note that this could have accessibility implications because it disables the tab button from moving outside of the editor.

For how to do this see: WordPress – How to make tab key create tabs in TinyMCE WYSIWYG editor

WordPress – How to disable password changed emails

The following code can be used to disable the WordPress “Password Changed” notification emails.

These are the emails the site administrator receives when a user changes their password or first registered and specifies a password.

If you’re not sure where to place this code I highly recommend you read How to create a WordPress plugin for your custom functions.

if ( ! function_exists( 'wp_password_change_notification' ) ) :
    function wp_password_change_notification( $user ) {
        return;
    }
endif;

How does it work?

The wp_password_change_notification function is the part of the WordPress core that handles the email notification.

It’s also a pluggable function – meaning we can call it through a theme or a plugin and completely override it.

The code above does this and returns nothing, meaning no email is created or sent when it is triggered.

You may also be interested in ….

WordPress – How to disable new user notification emails

The following code can be used to disable the WordPress new user notification emails.

There are two notification emails –

  1. the user notification – these are the emails the user receives to confirm their email address before they can choose a password
  2. the administrator notification -these are the “New User Registration” emails that the site administrator receives each time a new user registers to the site.

If you’re not sure where to place this code I highly recommend you read How to create a WordPress plugin for your custom functions.

How to disable the administrator notification

This code will just just disable the administrator notification.

// DISABLE ADMIN default WordPress new user notification emails
if ( ! function_exists ( 'wp_new_user_notification' ) ) :
    function wp_new_user_notification( $user_id, $deprecated = null, $notify = '' ) {

        global $wpdb, $wp_hasher;
        $user = get_userdata( $user_id );

        // The blogname option is escaped with esc_html on the way into the database in sanitize_option
        // we want to reverse this for the plain text arena of emails.
        $blogname = wp_specialchars_decode(get_option('blogname'), ENT_QUOTES);

        // Generate something random for a password reset key.
        $key = wp_generate_password( 20, false );

        /** This action is documented in wp-login.php */
        do_action( 'retrieve_password_key', $user->user_login, $key );

        // Now insert the key, hashed, into the DB.
        if ( empty( $wp_hasher ) ) {
            $wp_hasher = new PasswordHash( 8, true );
        }
        $hashed = time() . ':' . $wp_hasher->HashPassword( $key );
        $wpdb->update( $wpdb->users, array( 'user_activation_key' => $hashed ), array( 'user_login' => $user->user_login ) );

        $switched_locale = switch_to_locale( get_user_locale( $user ) );

        $message = sprintf(__('Username: %s'), $user->user_login) . "\r\n\r\n";
        $message .= __('To set your password, visit the following address:') . "\r\n\r\n";
        $message .= '<' . network_site_url("wp-login.php?action=rp&key=$key&login=" . rawurlencode($user->user_login), 'login') . ">\r\n\r\n";

        $message .= wp_login_url() . "\r\n";

        wp_mail($user->user_email, sprintf(__('[%s] Your username and password info'), $blogname), $message);
    }
endif;

How to disable BOTH notification emails

This code will disable BOTH notification emails – this is only useful if you’re using a third-party plugin, for example Gravity Forms, to create user accounts, specify passwords and notify the users.

// DISABLE BOTH default WordPress new user notification emails
if ( ! function_exists( 'wp_new_user_notification' ) ) :
    function wp_new_user_notification( $user_id, $deprecated = null, $notify = '' ) {
        return;
    }
endif;

How does it work?

The wp_new_user_notification function is the part of the WordPress core that handles the email notification.

It’s also a pluggable function – meaning we can call it through a theme or a plugin and completely override it.

The code above does this and returns nothing, meaning no email is created or sent when it is triggered by a new user registering.

You may also be interested in ….

WordPress – How to add IE EDGE header to all pages (including wp-login)

By default when Internet Explorer is displaying a website that falls within a computers intranet zone the page is rendered in IE5 document mode – typically leaving the page nothing like it should.

In the browsers debug console you’ll also see a message that says “… is running in Compatibility View because ‘Display intranet sites is in Compatibility View’ is checked.”

The typical way to fix this is to add the following line to your WordPress theme in the head block

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

However this is likely a change you’ll need to make to your theme which may be lost if you change themes or install  updates.

Being WordPress the answer is of course “there’s a filter for that!” – in this case wp_headers.

The example below shows how to use this filter to add this to ALL font-end pages served by WordPress regardless of what theme is enabled.

If you’re not sure where to place this code I highly recommend you read How to create a WordPress plugin for your custom functions.

add_filter( 'wp_headers', 'itsg_add_ie_edge_wp_headers' );

function itsg_add_ie_edge_wp_headers( $headers ) {
    if ( isset( $_SERVER['HTTP_USER_AGENT'] ) && ( strpos( $_SERVER['HTTP_USER_AGENT'], 'MSIE' ) !== false ) ) {
        $headers['X-UA-Compatible'] = 'IE=edge,chrome=1';
    }
    
    return $headers;
}

Help! This isn’t applying to the wp-login page!

For what ever reason wp_headers does not run on the wp-login page – this affect the default wp-login page, but if you’ve customised the layout you’ll no doubt run into issues.

In this case we need to be sneaky and manually set the header using an unrelated filter – gettext (because we know it’s going to be running when we need it).

function itsg_add_ie_edge_wp_headers_login( $translated_text, $text, $domain ) {
    if ( 'wp-login.php' === $GLOBALS['pagenow'] && ! headers_sent() && isset($_SERVER['HTTP_USER_AGENT']) && (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false) ) {
         header( 'X-UA-Compatible: IE=edge,chrome=1' );
    }
    return $translated_text;
}
add_filter( 'gettext', 'itsg_add_ie_edge_wp_headers_login', 20, 3 );

WordPress – How to customise wp-login page layout and styles

wp-login, also known as “The Login Form” is the standard place where authentication is handled on WordPress websites. It’s the screen users see and interact with when registering, logging in and resetting passwords.

Customising this page remains uncommon despite providing a consistent user for your front-end users.

The guide below will step through how to customise wp-login by:

  • Adding HTML structure into the page
  • Applying style sheets to the page
  • Customising the logo
  • Customising the field labels and text in the login form
  • Customising the notifications and prompts
  • Customising the password reset email
  • Disable random password at new password screen

If you haven’t already, I highly recommend you read the official instructions on how to customise wp-login on the WordPress codex: Customizing the Login Form

I also highly recommend any customisations are placed into a custom plugin (NOT your theme’s functions.php file) – this way you can easily enable/disable the customisations and keep them when you update or replace your theme. See How to create a WordPress plugin for your custom functions for how to do this.

In the examples below we’ll be going from

TO

FULL DOWNLOAD

A full copy of these filters can be downloaded as a custom plugin here:

https://www.itsupportguides.com/downloads/itsg-custom-wplogin.zip

Adding HTML structure into the page

Customising the HTML structure in wp-login is done using several filters:

These are placed above, inside and below the login form as shown below:

If you are trying to produce the the same design used in your front end theme the trick here is to work out where the login form needs to sit in the page compared to the layout (for example, in the top of the page or the content area) and recreating the HTML above and below using login_head and login_footer (the login_form action is less useful for this purpose).

The example below shows how to use these filters to add the HTML content into the form.

add_action( 'login_head', 'my_custom_login_head' );
function my_custom_login_head() {
     $html = '<span style="font-weight:800;font-size:20px;color:red;">[login_head]</span>';
     echo $html;
}

add_action( 'login_form', 'my_custom_login_form' );
function my_custom_login_form() {
     $html = '<span style="font-weight:800;font-size:20px;color:red;">[login_form]</span>';
     echo $html;
}

add_action( 'login_footer', 'my_custom_login_footer' );
function my_custom_login_footer() {
     $html = '<span style="font-weight:800;font-size:20px;color:red;">[login_footer]</span>';
     echo $html;
}

Applying style sheets to the page

Now that you have some HTML content added to the form you’ll want to add a style sheet (e.g. CSS) to to the page too format the HTML content.

This is done using the login_enqueue_scripts action.

For example, this would add the current active front end theme’s style.css to the wp-login page.

add_action( 'login_enqueue_scripts', 'my_custom_login_enqueue_scripts' );
function my_custom_login_enqueue_scripts() {
    wp_enqueue_style( 'my-custom-login', get_stylesheet_directory_uri() . '/style.css' );
}

Customising the logo

At the top of the login form you see the WordPress logo, which by default is a link to the WordPress website.

<a href="https://wordpress.org/" title="Powered by WordPress" tabindex="-1">IT Support Guides</a>

There are three components to this:

  • the image (the WordPress logo)
  • the link (wordpress.org)
  • the title (Powered by WordPress)

Changing the image

The image can be changed to an image of you choice using CSS. It’s recommended that you do this in a style sheet, however as an example I will show how to do this using the login_enqueue_scripts filter and inline styles.

In this example we change the logo to the Google logo. Note that this CSS uses the base64 code for the logo – however you could also link to a file.

add_action( 'login_enqueue_scripts', 'my_custom_login_enqueue_scripts_inline' );
function my_custom_login_enqueue_scripts_inline() { ?>
    <style>
        #login h1 a {
            background: url(data:image/jpeg;base64,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) no-repeat;
            height: 150px;
            width: 150px;
        }
    </style>
<?php }

Changing the logo link

The link is changed using the login_headerurl filter, for example:

add_filter( 'login_headerurl', 'my_custom_login_headerurl' );
function my_custom_login_headerurl() {
    return home_url();
}

Changing the link title

The link is changed using the login_headertitle filter, for example:

add_filter( 'login_headertitle', 'my_custom_login_headertitle' );
function my_custom_login_headertitle() {
    return 'IT Support Guides';
}

Customising the field labels and text in the login form

All the text, including the field labels, can be customised using the gettext filter.

For example, to change “Lost your password?” to “Forgot your password?” and “Username or Email Address” to “Email address” you would use the following:

NOTE: because gettex applies to all of WordPress we’re also checking that we’re only changing the text on the wp-login page. If you want to apply the same change(s) to all parts of your website you would remove this check.

add_filter( 'gettext', 'my_custom_gettext', 20, 3 );
function my_custom_gettext( $translated_text, $text, $domain ) {
    if ( 'wp-login.php' === $GLOBALS['pagenow'] ) {
        if ( "Lost your password?" == $translated_text )
            $translated_text = __( 'Forgot your password?' );
        elseif ( "Username or Email Address" == $translated_text )
        $translated_text = __( 'Email address');
    }
    return $translated_text;
}

Customising the notifications and prompts

There are several notifications and prompts displayed from the wp-login page when registering, logging in and resetting passwords – these are also customised using the gettext filter.

To customise the text you need to first get the text to then use it in gettext for example the following filter will customise:

“Check your email for the confirmation link.” and “Please enter your username or email address. You will receive a link to create a new password via email.”

add_filter( 'gettext', 'my_custom_gettext_prompts', 20, 3 );
function my_custom_gettext_prompts( $translated_text, $text, $domain ) {
    if ( 'wp-login.php' === $GLOBALS['pagenow'] ) {
        if ( "Check your email for the confirmation link." == $translated_text )
            $translated_text = __( 'An email has been sent to the given email address. Please check your email and follow the instructions to reset your password.' );
        else if ( "Please enter your username or email address. You will receive a link to create a new password via email." == $translated_text )
            $translated_text = __( 'Please enter the email address registered with this website. You will receive an email with instructions on changing your password.' );
    }
    return $translated_text;
}

Customising the password reset email

There are two components to the password reset email – the title and the body of the email.

NOTE: The sender email address and display name are set globally for WordPress (or your web host).

Customising the email title (subject line)

The title of the password reset email can be customised using the retrieve_password_message filter.

By default it would look something like

[Site Title] Password Reset

The example below shows how to change it to “Password reset for account name“:

add_filter( 'retrieve_password_title', 'my_custom_retrieve_password_title', 10, 3 );
function my_custom_retrieve_password_title( $title, $user_login, $user_data ) {
    return sprintf( __( "Password reset for %s" ), $user_login );
}

Customising the email body

The body of the password reset email can be customised using the retrieve_password_message filter.

This filter allows you to completely recreate the email body text. For example:

add_filter( 'retrieve_password_message', 'my_custom_retrieve_password_message', 10, 4 );
function my_custom_retrieve_password_message( $message, $key, $user_login, $user_data ) { 
    $message = __( 'A password reset has been requested for an account with the following username:' ) . "\r\n\r\n";
    $message .= $user_login . "\r\n\r\n";
    $message .= __( 'Please click on the link below to reset your password. If you are unable to click the link, copy it to your browser and press enter to reset your password.' ) . "\r\n\r\n";
    $message .= network_site_url( "wp-login.php?action=rp&key=$key&login=" . rawurlencode( $user_login ), 'login' ) . "\r\n\r\n";
    $message .= __( 'If you did not request a password reset or it is no longer required, please ignore this email.' ) . "\r\n\r\n";

    return $message; 
}

This would send an email like

A password reset has been requested for an account with the following username:
 
username
 
 Please click on the link below to reset your password. If you are unable to click the link, copy it to your browser and press enter to reset your password.
 
 link
 
 If you did not request a password reset or it is no longer required, please ignore this email.

Disable random password at new password screen

When resetting passwords in WordPress a random password is automatically generated and pre-filled in the password field.

The random password may be seen as overwhelmingly complicated for some users and most would prefer to choose their own password.

The following filter shows how to disable this feature by setting this automatically generated and pre-filled password to blank – forcing the user to choose their own password.

NOTE: This only applies to the email – reset – change password process – not the back end reset password.

With the filter enables the ‘new password’ field will look like this when the reset password page loads.

// disable random password
add_filter( 'random_password', 'disable_random_password', 10, 2 );

function disable_random_password( $password ) {
    $action = isset( $_GET['action'] ) ? $_GET['action'] : '';
    if ( 'wp-login.php' === $GLOBALS['pagenow'] && ( 'rp' == $action  || 'resetpass' == $action ) ) {
        return '';
    }
    return $password;
}

Know other customisations?

Comment below if you know of other great ways to customise the wp-login page to improve the user experience.

FULL DOWNLOAD

A full copy of these filters can be downloaded as a custom plugin here:

https://www.itsupportguides.com/downloads/itsg-custom-wplogin.zip

WordPress – How to redirect wp-login register link to page

The following WordPress filter will redirect the wp-login.php register page to /register

For example

FROM

http://example.com/wp-login.php?action=register

TO

http://example.com/register/

This allows you to create a register page using a third-party forms tool such as Gravity Forms and run it from a standard WordPress page.

If you’re not sure where to place this code I highly recommend you read How to create a WordPress plugin for your custom functions.

add_action( 'login_form_register', 'redirect_login_form_register' );

function redirect_login_form_register(){
    wp_redirect( home_url( '/register/' ) );
    exit(); // always call `exit()` after `wp_redirect`
}

 

WordPress – How to disable random password for password resets

When resetting passwords in WordPress a random password is automatically generated and pre-filled in the password field.

The random password may be seen as overwhelmingly complicated for some users and most would prefer to choose their own password.

The following filter shows how to disable this feature by setting this automatically generated and pre-filled password to blank – forcing the user to choose their own password.

NOTE: This only applies to the email – reset – change password process – not the back end reset password.

With the filter enables the ‘new password’ field will look like this when the reset password page loads.

// disable random password
add_filter( 'random_password', 'disable_random_password', 10, 2 );

function disable_random_password( $password ) {
    $action = isset( $_GET['action'] ) ? $_GET['action'] : '';
    if ( 'wp-login.php' === $GLOBALS['pagenow'] && ( 'rp' == $action  || 'resetpass' == $action ) ) {
        return '';
    }
    return $password;
}