Skip to main content

Save WYSIWYG content as post content

Sometimes you want to move the traditional editor for the post to another location, probably inside a meta box. It will keep everything more organized. For example, if you have an event post type, then you might have the following data:

  • Start date and time
  • End date and time
  • Venue
  • Description
  • Gallery

Then keeping the description (which can be the post content) along with other fields makes it easier for users to fill in the data. While this is impossible to do with the default WordPress editor, we can do that with the Meta Box plugin. The steps to do that are described below:

  1. Remove the default editor (we do not want to display it at the top)
  2. Create a new wysiwyg field
  3. Set that field to take the post content as the value
  4. Save that field content into post content

The code is quite straightforward as below:

// Remove the editor. Change 'post' to your custom post type.
add_action( 'init', function () {
remove_post_type_support( 'post', 'editor' );
} );

add_filter( 'rwmb_meta_boxes', function ( $meta_boxes ) {
// Get the current post content and set as the default value for the wysiwyg field.
$post_id = filter_input( INPUT_GET, 'post', FILTER_SANITIZE_NUMBER_INT );
$post_content = get_post_field( 'post_content', $post_id );

$meta_boxes[] = [
'title' => 'Test',
'post_types' => 'post', // Change 'post' to your custom post type.
'fields' => [
// Register a wysiwyg field of which the content is saved as post content.
[
'type' => 'wysiwyg',
'name' => 'Fake content',
'id' => 'content',
'std' => $post_content,
'save_field' => false,
],
// Custom style to overwrite the editor style set by WordPress.
[
'type' => 'custom_html',
'std' => '<style>#wp-content-editor-tools{background:none;padding-top:0;}</style>',
],
],
];

return $meta_boxes;
} );

// Set the value for the 'content' field.
add_filter( 'rwmb_content_field_meta', function() {
$post_id = filter_input( INPUT_GET, 'post', FILTER_SANITIZE_NUMBER_INT );
return get_post_field( 'post_content', $post_id );
} );

There are 2 important things in the code above:

  1. To make Meta Box save the wysiwyg content to post content, we have to set it 'id' => 'content'. This id is used to tell WordPress to get the submitted value and save it to post content.
  2. Because we use the WordPress's id for the field, some WordPress styles are applied and make the field look weird. We have to use a custom_html field to output some CSS to fix it. Note that you might want to enqueue another stylesheet to do the same job. Here we use the custom_html for the quick fix, it just works.

The code above works for post. If you want to make it work for another post type, do not forget to change the post type in the code above!