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?
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?
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()
{
if(!is_admin()){
$this->nonce="ce__wpnonce";
$this->nonce_action = 'ce_editor';
$this->all_checks = false;
add_filter('the_content',array($this,'editable_content'),10);
add_action('get_header',array($this,'check_submit'));
}
}
/**
* 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"){
$this->updated_post();
}
}
/**
* 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;
wp_enqueue_script('jquery');
add_action('wp_footer',array($this,'submit_js'));
return '<form action="contentEditable_submit" method="POST" accept-charset="utf-8">
<div id="editable" contenteditable="true">'
.$content
.'</div>
<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').'">
</form>';
}
/**
* 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);
wp_redirect(get_permalink($n));
exit;
}
}
/**
* _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">
jquery(document).ready(function($){
$("#submit_editable").click(function(){
$("#h_content").val($("#editable").html());
return true;
});
});
</script>
<?php
}
}//end class
}//end if
new contentEditable();