Protect Yourself From an Accidental ‘Publish’ with a WordPress “molly-guard”

Note: the following has only been briefly tested with version 2.9.1. Use at your own discretion
Apparently I’m not the only one who has accidentally clicked on “Publish” when they meant to click “Save Draft”. After searching high and low, I couldn’t find any plugins or “best practices’ for doing this. I have taken matters into my own hands and created a “molly-guard” for the “Publish” button.

This is a quick and dirty hack, it’s not pretty but it gets the job done.

Modify meta-boxes.php

In your wordpress installation located wp-admin/includes/meta-boxes.php

Next, find the section just below

<input id="original_publish" name="original_publish" type="hidden" value="<?php esc_attr_e('Schedule') ?>" />
<input id="publish" name="publish" type="submit" value="<?php esc_attr_e('Schedule') ?>" tabindex="5" accesskey="p" />

Now replace the original contents (between the <?php else : ?> and <?php endif: else : ?>)

Original

<input id="original_publish" name="original_publish" type="hidden" value="<?php esc_attr_e('Publish') ?>" />
<input id="publish" class="button-primary" name="publish" type="submit" value="<?php esc_attr_e('Publish') ?>" tabindex="5" accesskey="p" />

New

<script type="text/javascript">
<script language="javascript">
    function toggleMolly() {
        document.getElementById('molly-guard').style.display = 'none';
	document.getElementById('real-post').style.display = 'block';
}
</script>
<div id="molly-guard">
    <input name="molly-button"  onClick="toggleMolly();" class="button-primary" value="<?php esc_attr_e('Publish') ?>" />
</div>
<div id="real-post" style="display:none;">
    <input name="original_publish" type="hidden" id="original_publish" value="<?php esc_attr_e('Publish') ?>" />
    <input name="publish" type="submit" class="button-primary" id="publish" tabindex="5" accesskey="p" value="<?php esc_attr_e('Sure?') ?>" />
</div>
</script>
<div id="molly-guard">
<input class="button-primary" onclick="toggleMolly();" name="molly-button" value="<?php esc_attr_e('Publish') ?>" /></div>
<div id="real-post" style="display: none;">
<input id="original_publish" name="original_publish" type="hidden" value="<?php esc_attr_e('Publish') ?>" />
<input id="publish" class="button-primary" name="publish" type="submit" value="<?php esc_attr_e('Sure?') ?>" tabindex="5" accesskey="p" /></div>

How this works

Like a real molly-guard, this doesn’t disable or modify the publish button itself, it simply covers it up (actually ‘hides” it in this case).

When the page loads the “Publish” button (in its new surrounding div) is set to hidden. ┬áIn its place we have a new button that simply triggers some javascript when its clicked.

When it is clicked, it hides itself and reveals the real publish button.

This may not be a very clean solution, but it will buy you that few seconds to react if you instinctively click “Publish” in a fervor so save your latest draft.

Let me know if this helps you out, or if you have any recommendations. Contact me if you have experience writing WordPress plugins and lets figure out how to do this right!

Share

3 Comments

  1. Men says:

    Good idea but it doesn’t work !

  2. This might be a cleaner way to accomplish what you’re after: https://gist.github.com/4337952/

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre user="" computer="" escaped="">