Add warning to edit slug/permalink button on editor screen.

WordPress has already hooked jQuery events to that button which you could omit with off() method, or keep things simple and add an overlay above that button and act as the button, prompting users to confirm the editing action at first place:

jQuery(document).ready(function($){
    var c = $('#edit-slug-buttons')
      , b = $('button',c).first();

    c.css({
        position: 'relative'
    }).append('<span class="se-overlay" style=" position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 4px 0; margin-top: -3px; cursor: pointer"></span>');


    $(document).on("click", "#edit-slug-buttons .se-overlay", function(e){
        if ( confirm("Warning: Don't do this unless you have to.") ) {
            $(this).closest('#edit-slug-buttons').children('button').first().trigger('click');
        }
        return e.preventDefault();
    });
});

Hope that helps.

Leave a Comment