Let me first start out by saying that when it comes to hard coding with WordPress, I’m a rookie. Not that I haven’t done it, but more in the matter I don’t know exactly HOW to do certain things. With that said, here is my issue that I have spent HOURS researching on:
I’m trying to create a front end textarea using wp_editor that can be updated by multiple users and display the content in say a <div>. I’ve got the editor to show up on the front end but there is no save or submit button. Even if I create my own save/submit button, it doesn’t do anything. How can I accomplish this? My atrocious code is attached.
NOTE: If there is an easier way to do this, I’m all for it. I would really like to get more involved with hardcoding for WordPress than relying on plugins.
function front_end_text_box() {
if(!is_admin()){
require_once(ABSPATH . 'wp-admin/includes/template.php');
}
//$post_id = 7;
//$post = get_post( $post_id, OBJECT, 'edit' );
$content="";//$post->post_content;
$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)
);
//$save_content = get_post_meta ($post->ID, 'front_end_text_box', true);
//echo '<form action="" method="post" target="_self">';
wp_editor( $content, $editor_id, $settings );
//wp_update_post($post_id);
//submit_button( 'Save Content');
//echo '<input type="submit" value="Submit"></form>';
//echo '<textarea>' . $content . '</textarea>';
//echo esc_html( get_post_meta( get_the_ID(), '_mycustomeditor', true ) );
}
/*
function save_wp_editor_fields(){
global $_POST;
//*update_option('my_content');
update_post_meta($post->ID, 'mycustomeditor', $_POST['mycustomeditor']);
//$post->post_content = $editor_id;
}
add_action( 'save_post', 'save_wp_editor_fields' );
//add_action('admin_init','save_wp_editor_fields', 10);
*/
1 Answer
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." );
}
}
