WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm doing an experiment and looking for a WordPress theme that utilizes the contenteditable html5 property to allow in context editing on the live website (for authenticated admin users).

Are there any examples?

share|improve this question
up vote 1 down vote accepted

I don't know about a theme but i wrote this a while back as a "Prof of concept" which simply wraps the content inside an editable div and sends the data in an hidden textarea along with nonce:

if (!class_exists('contentEditable')){
    * contentEditable class
    * @author Ohad Raz
    class contentEditable
        public $nonce;
        public $nonce_action;

         * class constructor
         * @author Ohad Raz
        function __construct()
                $this->nonce = 'ce__wpnonce';
                $this->nonce_action = 'ce_editor';
                $this->all_checks = false;


         * check_submit
         * function to check if the form has been submited
         * if so call the update post function
         * @author Ohad Raz
         * @return void
        public function check_submit(){
            if (isset($_POST['content_editable_Save']) && $_POST['content_editable_Save'] == "submit"){

         * editable_content
         * function that adds the form to the content
         * @author Ohad Raz 
         * @param  string $content 
         * @return string
        public function editable_content($content){
            global $post;
            //early exit if not needed
            if (!current_user_can('edit_post', $post->ID))
                return $content;

            return '<form action="contentEditable_submit" method="POST" accept-charset="utf-8">
                        <div id="editable" contenteditable="true">'
                        <textarea id="h_content" name="content" style="display:none;"></textarea>
                        <input type="hidden" name="pid" value="'.$post->ID.'">
                        <input type="hidden" name="content_editable_Save" value="submit">'
                        .wp_nonce_field($this->nonce_action, $this->nonce,true, false)
                        .'<input type="submit" id="submit_editable" name="save" value="'.__('Save changes').'">

         * updated_post
         * the function that actually updates the post and redirects to the newly modified post
         * @author Ohad Raz
         * @return VOID
        public function updated_post(){
            if ($this->_verify_nonce()){

                $p['ID'] = intval($_POST['pid']);
                $p['post_content'] = $_POST['content'];
                $n = wp_update_post($p);

         * _verify_nonce 
         * nonce check
         * @author Ohad Raz
         * @return boolean
        public function _verify_nonce()
            $n = isset($_REQUEST[$this->nonce]) ? $_REQUEST[$this->nonce]: '';
            if ('' === $n) return false;
            if (!function_exists('wp_verify_nonce'))
                require_once(ABSPATH .'wp-includes/pluggable.php');
            return wp_verify_nonce($n, $this->nonce_action);

         * submit_js
         * some jQuery magic
         * @author Ohad Raz
         * @return void
        public function submit_js(){
            <script type="text/javascript">
                        return true;

    }//end class
}//end if
new contentEditable();
share|improve this answer
+1 This looks very interesting. Thanks for the example. – N2Mystic Nov 1 '12 at 23:19
you're most welcome – Bainternet Nov 1 '12 at 23:26
Do you have a demo page for this? I pasted it into single.php but I can't tell yet how to hook into it. – N2Mystic Nov 9 '12 at 18:40

Check out the plugin...wait for it...WPContentEditable. I briefly browsed the source and it does seem to be using contenteditable attribute, though I think there's a fallback. That's for you to sort out, I suppose :)

share|improve this answer
+1 Thanks for the link. Its not very well documented but it works. Only one problem I see is that it uses a relative path reference that foobars its operation outside of the home page of the blog. – N2Mystic Nov 1 '12 at 23:20

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.