# Title Length Meter in the Block Editor

> Shows a live character count for the post title in the editor sidebar, turning amber and red as it passes the length search engines usually display, to help write tidy titles.

- Type: PHP
- Runs: Admin only
- Category: [Content](https://wpide.com/library/category/content/)
- Tags: block-editor, titles, seo
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/content-title-length-meter/

## Code

```php
// Ideal and maximum title lengths in characters.
$wpide_title_ideal = 55;
$wpide_title_max   = 65;

add_action( 'enqueue_block_editor_assets', function () use ( $wpide_title_ideal, $wpide_title_max ) {
    $screen = get_current_screen();
    if ( ! $screen || 'post' !== $screen->base ) {
        return;
    }

    wp_register_script( 'wpide-title-meter', false, array( 'wp-plugins', 'wp-element', 'wp-data', 'wp-editor' ), '1.0', true );
    wp_enqueue_script( 'wpide-title-meter' );
    wp_add_inline_script( 'wpide-title-meter', sprintf( 'var wpideTitleLimits = { ideal: %d, max: %d };', $wpide_title_ideal, $wpide_title_max ) . <<<'JS'
( function ( wp ) {
    var el = wp.element.createElement;
    var Panel = ( wp.editor && wp.editor.PluginPostStatusInfo ) || ( wp.editPost && wp.editPost.PluginPostStatusInfo );
    if ( ! Panel ) { return; }

    function TitleMeter() {
        var title = wp.data.useSelect( function ( select ) { return select( 'core/editor' ).getEditedPostAttribute( 'title' ) || ''; }, [] );
        var length = title.length;
        var color = length === 0 ? '#757575' : ( length <= wpideTitleLimits.ideal ? '#00a32a' : ( length <= wpideTitleLimits.max ? '#dba617' : '#d63638' ) );
        var width = Math.min( 100, Math.round( length / wpideTitleLimits.max * 100 ) );

        return el( Panel, { className: 'wpide-title-meter' },
            el( 'div', { style: { width: '100%' } },
                el( 'div', { style: { display: 'flex', justifyContent: 'space-between' } }, el( 'span', null, 'Title length' ), el( 'strong', { style: { color: color } }, length + ' / ' + wpideTitleLimits.max ) ),
                el( 'div', { style: { height: '4px', background: '#ddd', borderRadius: '2px', marginTop: '4px' }, 'aria-hidden': 'true' },
                    el( 'div', { style: { height: '100%', width: width + '%', background: color, borderRadius: '2px' } } )
                )
            )
        );
    }

    wp.plugins.registerPlugin( 'wpide-title-meter', { render: TitleMeter } );
} )( window.wp );
JS
    );
} );
```

## Notes

Adjust $wpide_title_ideal and $wpide_title_max; the meter never blocks saving.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Title Length Meter in the Block Editor" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/