WordPress adds an editor input box to the article editing interface

Article directory [hidden]

Initialize metafield boxShow metafield boxSave metafield box dataAll function codes

Recently, in website development, customers require to add a field in the article to display the content of this field in a certain position of the article page, so they need to add an input box with an editor in the article editing interface. The effect is as follows:

Here we mainly use add_ meta_ Box () and WP_ Editor () two functions, add_ meta_ Box () is used to add meta field box, WP_ Editor () is used to add an editor.

In order to let you understand the realization of the function, we will explain it in sections. Basically, what we need to do is initialize the metafield box, display it in our article editor, and finally store the data of the metafield box in the database. Let’s see how to use this simple feature to add the WYSIWYG editor to the custom metafield box.

Initialize metafield box

//初始化元字段框
function wpkj_post_editor_meta_box() {    
   add_meta_box ( 
      'wpkj-post-editor', 
      __('文章顶部内容', 'textdomain') , 
      'wpkj_post_editor', 
      'post' // 需要显示编辑框的文章类型,与下文的两处 $_POST['post'] 对应
   );

}
add_action('admin_init', 'wpkj_post_editor_meta_box');

First, we use add_ meta_ The box() function initializes the metabox. This function requires several parameters. You can check them from Codex. Here, we use four parameters.

The first is the ID of the meta box. Use this attribute in the ‘ID’ attribute of the meta box. The second is the title of the meta box. Here, I use “content at the top of the article” as the title. Double underscores are used for translation problems. The callback function then fills in the meta box with the required content. You can find this function in the next section. Finally, we will add the article type of the meta box to it. Here we set it to post.

Then, we will use wpkj_ editor_ meta_ The box() function is mounted to admin_ Init hook to initialize the metafield box.

Show metafield box

//显示元字段框
function wpkj_post_editor($post) {          
    $content = get_post_meta($post->ID, 'wpkj_post_editor', true);

    //添加 WYSIWYG 编辑器 
    wp_editor ( 
        $content , 
        'wpkj_post_editor', 
        array ( "media_buttons" => true ) 
    );

}

This function displays the meta field box in the article editing screen.

This is the callback function used to initialize the metafield box. Here, you can see that we use WP_ Editor() function to render WYSIWYG editor. The function takes three parameters.

The first is the initial content of the editor. The default value is none. The second is the HTML ID attribute value of the editor. Do not use hyphens, the editor may not display correctly. The third is the parameter array for the custom editor. Here, I use only one parameter to display the add media button in the editor. You can use multiple parameters to control how the editor works. Please see the available parameters here.Save metafield box data

//保存元字段框数据
function wpkj_post_editor_save_postdata($post_id) {
    
    if( isset( $_POST['wpkj_post_editor_nonce'] ) && isset( $_POST['post'] ) ) {

        //Not save if the user hasn't submitted changes
        if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
            return;
        } 

        // Verifying whether input is coming from the proper form
        if ( ! wp_verify_nonce ( $_POST['wpkj_post_editor_nonce'] ) ) {
            return;
        } 

        // Making sure the user has permission
        if( 'post' == $_POST['post'] ) {
            if( ! current_user_can( 'edit_post', $post_id ) ) {
                return;
            }
        } 
    }

    $content = get_post_meta($post_id, 'wpkj_post_editor', true);
    // 如果编辑器中有内容或者之前有数据才保存
    if( $content || !empty( $_POST['wpkj_post_editor'] ) ) {

        $data = $_POST['wpkj_post_editor'];
        update_post_meta($post_id, 'wpkj_post_editor', $data);
        
    }
}
add_action('save_post', 'wpkj_post_editor_save_postdata');

Then, we create a function to do some security checks and save the data from the metafield box.

First, we check whether the user has submitted any changes, otherwise nothing will be saved. Then, check that the input comes from the correct form. Finally, make sure that the user has the right to edit the article. If everything is OK, the data will be saved.

Function update_ post_ Meta () is used to update any existing values of the metafield box. This is how you update the data when you edit an article.

Finally, we use ‘Save’_ Post ‘hook to mount our data saving function.

All function codes

/**
 * 添加一个编辑器字段到文章编辑界面
 * https://imtiazrayhan.com/add-wysiwyg-editor-custom-meta-boxes/
 */
//This function initializes the meta box.
function wpkj_post_editor_meta_box() {    
   add_meta_box ( 
      'wpkj-post-editor', 
      __('文章顶部内容', 'textdomain') , 
      'wpkj_post_editor', 
      'post' // 需要显示编辑框的文章类型,与下文的两处 $_POST['post'] 对应
   );

}
add_action('admin_init', 'wpkj_post_editor_meta_box');

//Displaying the meta box
function wpkj_post_editor($post) {          
    $content = get_post_meta($post->ID, 'wpkj_post_editor', true);

    //This function adds the WYSIWYG Editor 
    wp_editor ( 
        $content , 
        'wpkj_post_editor', 
        array ( "media_buttons" => true ) 
    );

}

//This function saves the data you put in the meta box
function wpkj_post_editor_save_postdata($post_id) {
    
    if( isset( $_POST['wpkj_post_editor_nonce'] ) && isset( $_POST['post'] ) ) {

        //Not save if the user hasn't submitted changes
        if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
            return;
        } 

        // Verifying whether input is coming from the proper form
        if ( ! wp_verify_nonce ( $_POST['wpkj_post_editor_nonce'] ) ) {
            return;
        } 

        // Making sure the user has permission
        if( 'post' == $_POST['post'] ) {
            if( ! current_user_can( 'edit_post', $post_id ) ) {
                return;
            }
        } 
    }

    $content = get_post_meta($post_id, 'wpkj_post_editor', true);
    // 如果编辑器中有内容或者之前有数据才保存
    if( $content || !empty( $_POST['wpkj_post_editor'] ) ) {

        $data = $_POST['wpkj_post_editor'];
        update_post_meta($post_id, 'wpkj_post_editor', $data);
        
    }
}
add_action('save_post', 'wpkj_post_editor_save_postdata');

That’s our final code. The final output effect is shown in the picture at the beginning of the article. If you want to call the content of this field, you can refer to the following code example:

<?php
global $post;
$content = get_post_meta( $post->ID, 'wpkj_post_editor', true ); // 获取字段内容

if( $content ) { // 如果有内容
    echo $content;  // 输出内容
}
?>

OK, that’s all for the article.

Reference:

how to add wysiwyg editor to custom meta boxesadd_ meta_ box()wp_ editor()update_ post_ meta()

Related Article
How to add user defined upload avatar function in WordPress

Friends who use WordPress to build a website should know that WordPress itself does not have the function of uploading Read more

How to get the number of articles and comments of the current logined user in WordPress

When developing WordPress Theme user center, I want to get the number of articles and comments of current logged in Read more

WordPress tips: get statistics of the number of pictures in the article

As far as I know, WordPress has no function to count the number of pictures in the article, so to Read more

WordPress details optimization to automatically add ALT and title information to the article image

Friends who know a little bit about SEO optimization should understand that image ALT and image title optimization are very Read more

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-spam image