Enhance Your WordPress Dashboard with Editable Greeting Widget

Editable WordPress Dashboard Greeting Widget

Logan Greenhaw
March 17, 2025

Affiliate Post

				
					// Add an inline editable greeting widget to the WordPress dashboard
// Crafted with ☕ and creativity by Trail Mix Creative

if ( false ) { ?><?php } // Ensures proper syntax highlighting

// Process form submission using admin_post_ hook.
function trail_mix_handle_editable_admin_greeting_submission() {
    if ( ! current_user_can( 'manage_options' ) ) {
        wp_die( esc_html__( 'Unauthorized user', 'text-domain' ) );
    }

    if (
        isset( $_POST['inline_welcome_nonce'] ) &&
        wp_verify_nonce( $_POST['inline_welcome_nonce'], 'inline_welcome_save' ) &&
        isset( $_POST['inline_welcome_content'] )
    ) {
        // Remove extra slashes from the POST data before sanitizing.
        update_option( 'inline_admin_welcome', wp_kses_post( wp_unslash( $_POST['inline_welcome_content'] ) ) );

        // Redirect with parameters for scrolling and feedback.
        $redirect = add_query_arg(
            array(
                'scroll_to_welcome' => '1',
                'trail_mix_saved'   => '1'
            ),
            wp_get_referer()
        );
        wp_safe_redirect( esc_url_raw( $redirect ) );
        exit;
    } else {
        wp_die( esc_html__( 'Nonce verification failed', 'text-domain' ) );
    }
}
add_action( 'admin_post_trail_mix_save_editable_admin_greeting', 'trail_mix_handle_editable_admin_greeting_submission' );

// Register the dashboard widget.
function trail_mix_editable_admin_greeting_widget() {
    wp_add_dashboard_widget(
        'trail_mix_editable_admin_greeting_widget',
        esc_html__( 'Editable Admin Greeting', 'text-domain' ),
        'trail_mix_display_editable_admin_greeting_widget'
    );
}
add_action( 'wp_dashboard_setup', 'trail_mix_editable_admin_greeting_widget' );

// Enqueue inline JavaScript and CSS on the dashboard.
function trail_mix_editable_admin_greeting_enqueue( $hook ) {
    if ( 'index.php' !== $hook ) {
        return;
    }

    wp_register_script( 'trail-mix-editable-admin-greeting-script', '' );
    wp_enqueue_script( 'trail-mix-editable-admin-greeting-script' );

    $script = <<<JS
jQuery(document).ready(function($){
    var params = new URLSearchParams(window.location.search);
    if (params.has('scroll_to_welcome')) {
        $('html, body').animate({
            scrollTop: $('#trail_mix_editable_admin_greeting_widget').offset().top
        }, 500);
    }

    $('#edit-welcome-button').on('click', function(e){
        e.preventDefault();
        $('#display-mode').hide();
        $('#edit-mode').show();
        if (typeof tinymce !== 'undefined') {
            setTimeout(function(){
                tinymce.execCommand('mceRemoveEditor', false, 'inline_welcome_editor');
                tinymce.execCommand('mceAddEditor', false, 'inline_welcome_editor');
            }, 500);
        }
    });

    $('#cancel-edit-button').on('click', function(e){
        e.preventDefault();
        $('#edit-mode').hide();
        $('#display-mode').show();
    });

    $('.meta-box-sortables').on('sortstart', function(event, ui){
        if(ui.item.attr('id') === 'trail_mix_editable_admin_greeting_widget'){
            if (typeof tinymce !== 'undefined') {
                tinymce.execCommand('mceRemoveEditor', false, 'inline_welcome_editor');
            }
        }
    });

    $('.meta-box-sortables').on('sortstop', function(event, ui){
        if(ui.item.attr('id') === 'trail_mix_editable_admin_greeting_widget'){
            if (typeof tinymce !== 'undefined') {
                tinymce.execCommand('mceAddEditor', false, 'inline_welcome_editor');
            }
        }
    });
});
JS;
    wp_add_inline_script( 'trail-mix-editable-admin-greeting-script', $script );

    wp_register_style( 'trail-mix-editable-admin-greeting-style', '' );
    wp_enqueue_style( 'trail-mix-editable-admin-greeting-style' );

    $css = <<<CSS
#trail_mix_editable_admin_greeting_widget {
    background: #fff;
    min-height: auto;
    display: flex;
    flex-direction: column;
}
#display-mode .welcome-text {
    padding-bottom: 10px;
}
#display-mode, #edit-mode {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.button-group {
    margin-top: auto;
    text-align: left;
}
#save-welcome-button, #cancel-edit-button {
    margin: 5px;
    border-radius: 4px !important;
}
#cancel-edit-button {
    border-left: 1px solid #2271b1 !important;
}
#cancel-edit-button:hover {
    border-left: 1px solid #0a4b78 !important;
}
#edit-welcome-button {
    border-radius: 4px !important;
}
#edit-mode .wp-editor-wrap {
    flex: 1;
}
.postbox.collapsed #trail_mix_editable_admin_greeting_widget,
.postbox.closed #trail_mix_editable_admin_greeting_widget {
    min-height: 75px !important;
    max-height: 75px !important;
    overflow: hidden;
    padding: 5px;
}
CSS;
    wp_add_inline_style( 'trail-mix-editable-admin-greeting-style', $css );
}
add_action( 'admin_enqueue_scripts', 'trail_mix_editable_admin_greeting_enqueue' );

// Display the widget content.
function trail_mix_display_editable_admin_greeting_widget() {
    $saved_content   = get_option( 'inline_admin_welcome' );
    $welcome_content = wp_kses_post( $saved_content );
    $open_edit       = empty( trim( wp_strip_all_tags( $welcome_content ) ) );

    if ( isset( $_GET['trail_mix_saved'] ) && '1' === $_GET['trail_mix_saved'] ) {
        echo '<div class="updated notice"><p>' . esc_html__( 'Greeting saved successfully!', 'text-domain' ) . '</p></div>';
    }
    ?>
    <div id="trail_mix_editable_admin_greeting_widget">
        <!-- Display mode -->
        <div id="display-mode" style="<?php echo esc_attr( $open_edit ? 'display:none;' : '' ); ?>">
            <div class="welcome-text">
                <?php echo wpautop( $welcome_content ); ?>
            </div>
            <?php if ( current_user_can( 'manage_options' ) ) : ?>
            <div class="button-group">
                <button id="edit-welcome-button" class="button"><?php echo esc_html__( 'Edit', 'text-domain' ); ?></button>
            </div>
            <?php endif; ?>
        </div>

        <!-- Edit mode -->
        <?php if ( current_user_can( 'manage_options' ) ) : ?>
        <div id="edit-mode" style="<?php echo esc_attr( $open_edit ? '' : 'display:none;' ); ?>">
            <form method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>">
                <?php wp_nonce_field( 'inline_welcome_save', 'inline_welcome_nonce' ); ?>
                <input type="hidden" name="action" value="trail_mix_save_editable_admin_greeting" />
                <?php
                add_filter( 'wp_default_editor', function() { return 'tinymce'; } );
                wp_editor(
                    $welcome_content,
                    'inline_welcome_editor',
                    array(
                        'textarea_name' => 'inline_welcome_content',
                        'textarea_rows' => 20,
                        'quicktags'     => false,
                        'tinymce'       => array( 'height' => 250 )
                    )
                );
                ?>
                <div class="button-group">
                    <button id="save-welcome-button" class="button-primary" type="submit">
                        <?php echo esc_html__( 'Save', 'text-domain' ); ?>
                    </button>
                    <button id="cancel-edit-button" class="button" type="button">
                        <?php echo esc_html__( 'Cancel', 'text-domain' ); ?>
                    </button>
                </div>
            </form>
        </div>
        <?php endif; ?>
    </div>
    <?php
}

Add an Inline Editable Greeting Widget to Your WordPress Dashboard

Have you ever needed to add a message or some instructions to a WordPress dashboard? Meet your new favorite feature: an inline editable greeting dashboard widget! No more static “Welcome” messages—now you can update your greeting on the fly with a slick, built-in editor that makes your dashboard truly yours. Adding this snippet will save you from having to create new dashboard widgets every time you want to add something to your (or your client’s) WordPress dashboard.

What This Snippet Does

This custom function-packed snippet:

Creates a Custom Dashboard Widget: Uses WordPress’s native wp_add_dashboard_widget to add a new “Editable Admin Greeting” box right on your dashboard.
Inline Editing with TinyMCE: Empowers you to switch from display mode to edit mode instantly. With a single click, your greeting text transforms into a TinyMCE-powered WYSIWYG editor, so you can personalize your welcome message in real time.
Smooth User Experience: Incorporates inline JavaScript to handle form submissions, toggle between modes, and even scroll to the widget automatically if needed.
Enhanced Styling & Responsiveness: Inline CSS ensures your widget looks great and remains responsive, with neatly aligned buttons and a flexible layout.
Secured Updates: Processes your changes safely using WordPress nonces and the admin_post_ hook, so only authorized users can update the greeting.

Editable WordPress Dashboard Greeting Widget 2

Why You’ll Love This Code Snippet

Instant Customization: Update your dashboard greeting with ease—no more digging through settings or using additional plugins.
User-Friendly Editing: Thanks to the TinyMCE editor integration, you can format your text without any hassle. Whether you’re adding a bit of flair or a straightforward message, the editor gives you all the tools you need.
Seamless Integration: This snippet blends right into your WordPress admin area. It leverages built-in hooks and functions for a lightweight yet powerful solution.
Improved Feedback: Upon saving, enjoy a smooth redirect with feedback messages and even an automatic scroll-to-widget feature, ensuring you know your changes have been applied.

How to Implement This Code Snippet

Copy the Code: Grab the snippet and paste it into your theme’s functions.php file, or add it via your favorite code snippets plugin.
(Optional) Customize Your Greeting Widget Title: Tweak the widget title or default greeting content as needed to match your style.
Enjoy a Personalized Dashboard: Once installed, you’ll see the “Editable Admin Greeting” widget on your dashboard. Click “Edit” to change the message, then save it with confidence—your new greeting will be there every time you log in.

For anyone looking to add a personal touch to their WordPress dashboard, this snippet is a game-changer. It’s quick, easy, and entirely within your control. So why settle for a generic welcome when you can greet your client, your team, or yourself in style?

If you need any help implementing this on your site or have questions about customization, drop us a message—we’re here to help!

Just a quick heads up! This blog post contains affiliate links. That means that if you sign up for a product or service through this post, we might receive some form of referral credit.