2

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);
*/
2
  • Can you format your code with indentation? It's difficult to read
    – Tom J Nowell
    Nov 16, 2016 at 23:51
  • I apologize Tom, but it seems like on my end it's already indented, otherwise I would. Not sure how else I can help to make it easier to read for you.
    – cmdshorty
    Nov 17, 2016 at 3:25

1 Answer 1

2

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." );
    }
}
3
  • So would this be additional code I add in to have the data submitted or would this code replace everything I have?
    – cmdshorty
    Nov 17, 2016 at 3:26
  • Thank you for taking the time to come up with the code jgraup. But it seems like it's not working as I expected. In fact, almost not at all. I am using this in a page template since there will be many pages created that use this. All I removed was add_shortcode( 'front-end-editor', 'front_end_editor_shortcode' ); and changed the function name to my own. Also, it seems like I'm not able to display the updated content either.
    – cmdshorty
    Nov 17, 2016 at 19:08
  • I did update and refresh my page but it's still not working. I even have the wp_editor in a form, along with the submit button, and nothing.
    – cmdshorty
    Nov 19, 2016 at 17:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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