You want to submit the data to admin_post_(action)
and then handle the request. You may need jQuery
to intercept the click and supply all the required data, but this shows you the main parts.
HTML
<form action="http://www.example.com/wp-admin/admin-post.php" method="post">
<input type="hidden" name="action" value="add_foobar">
<input type="hidden" name="data" value="foobarid">
<input type="submit" value="Submit">
</form>
PHP
add_action( 'admin_post_foobar', 'prefix_admin_foobar' );
add_action( 'admin_post_nopriv_foobar', 'prefix_admin_foobar' );
function prefix_admin_foobar() {
status_header( 200 );
$my_post = array (
'ID' => (int) $_REQUEST[ 'data' ],
'post_title' => 'This is the post title.',
'post_content' => 'This is the updated content.',
);
// Update the post into the database
wp_update_post( $my_post );
die( "Server updated '{$_REQUEST['data']}' from your browser." );
}
WORKING VERSION AS SHORTCODE
Here is a working version you can test by adding the shortcode [front-end-editor]
to your content. Includes refresh by JS on success.
// Test with [front-end-editor] in your post content
add_shortcode( 'front-end-editor', 'front_end_editor_shortcode' );
function front_end_editor_shortcode() {
if ( ! is_admin() ) {
require_once( ABSPATH . 'wp-admin/includes/template.php' );
}
// current post id
$post_id = get_the_ID();
$post = get_post( $post_id, OBJECT, 'edit' );
$content = $post->post_content; // current content
// editor settings
$editor_id = 'mycustomeditor';
$settings = array (
'wpautop' => true, // Whether to use wpautop for adding in paragraphs. Note that the paragraphs are added automatically when wpautop is false.
'media_buttons' => true, // Whether to display media insert/upload buttons
'textarea_name' => $editor_id, // The name assigned to the generated textarea and passed parameter when the form is submitted.
'textarea_rows' => get_option( 'default_post_edit_rows', 10 ), // The number of rows to display for the textarea
'tabindex' => '', // The tabindex value used for the form field
'editor_css' => '', // Additional CSS styling applied for both visual and HTML editors buttons, needs to include <style> tags, can use "scoped"
'editor_class' => '', // Any extra CSS Classes to append to the Editor textarea
'teeny' => false, // Whether to output the minimal editor configuration used in PressThis
'dfw' => false, // Whether to replace the default fullscreen editor with DFW (needs specific DOM elements and CSS)
'tinymce' => true, // Load TinyMCE, can be used to pass settings directly to TinyMCE using an array
'quicktags' => true, // Load Quicktags, can be used to pass settings directly to Quicktags using an array. Set to false to remove your editor's Visual and Text tabs.
'drag_drop_upload' => true // Enable Drag & Drop Upload Support (since WordPress 3.9)
);
// display the editor
wp_editor( $content, $editor_id, $settings );
// display the submit button
submit_button( 'Save Content' );
// add javaScript to handle the submit button click,
// and send the form data to WP backend,
// then refresh on success.
?>
<script>
(function($) {
$ ('#submit').on ('click', function(e) {
var content = $ ('#mycustomeditor').val ();
$.post ('<?php echo get_admin_url( null, '/admin-post.php' ) ?>',
{
action: 'front_end_submit',
id: '<?php echo get_the_ID(); ?>',
content: content
},
function(response) {
// looks good
console.log (response);
// reload the latest content
window.location.reload();
});
});
}) (jQuery);
</script>
<?php
}
// subscribe to the form submit event
add_action( 'admin_post_front_end_submit', 'prefix_admin_front_end_submit' );
add_action( 'admin_post_nopriv_front_end_submit', 'prefix_admin_front_end_submit' );
// handle the form submit action
function prefix_admin_front_end_submit() {
// grab the content and post id from the POST data
$content = $_POST[ 'content' ];
$id = (int) $_POST[ 'id' ];
// check if the post is valid
if( ! get_post($id) ) {
die( "No post '{$id}'." );
}
// prep the update
$my_post = array (
'ID' => $id,
'post_content' => stripslashes( $content ),
);
// update the post into the database
$result = wp_update_post( $my_post );
// return the results
if ( $result ) {
// GOOD
status_header( 200 );
die( "Server updated '{$id}' from your browser." );
} else {
// BAD
die( "Failed to updated '{$id}' from your browser." );
}
}