[WordPress] How to create custom fields on post pages without a plugin.

When it comes to creating custom fields in WordPress, the plugins Advanced Custom Fields and Smart Custom Fields are often used.

Relying on plugins can cause problems when migrating to other plugins or themes. (Well, almost never, I think.)

For this reason, we will use the standard WordPress metadata to add custom fields.

WordPress has a feature that allows you to add custom fields to your posts. We call these information metadata.

The advantages are that it is code-based, flexible and flexible.
The disadvantage is that you are writing code, so there could be potential bugs.

目次

Add text field.

add_meta_box is used to create text fields.

See below for add_meta_box arguments.

$id (string)Metabox identifier. Must be unique within the administration.
$title (string)Meta box title. Heading text as it appears in the admin panel.
$callback (callable)Callback function to display the contents of the metabox; specifies the function that produces HTML and other output.
$screen (string|array|WP_Screen)Specifies the screen on which the metabox is displayed. Specifies the post type (e.g. post, page, custome_post_type, etc.).
$context (string):Context (position) in which the metabox is displayed. Specify one of the following.
normal: below the main content area
side: side column
advanced: below the main content area (below normal)

The following will display the textfields in the edit screen for the ‘custome_post_type’ post type.

The important part is the callback, which displays the textfield in the HTML output here.

add_action('admin_menu', function() {
    add_meta_box(
        'custom_id_setting', // メタボックスの識別子
        'カスタム投稿ID', // メタボックスのタイトル
        function () {
            global $post;
            $meta = get_post_meta($post->ID, 'custom_id', true); ?>

            <form method="post" action="admin.php?page=site_settings">
                <label for="custom_id">カスタム投稿ID:</label>
                <input id="custom_id" type="text" name="custom_id" value="<?= $meta ?>">
            </form>

            <?php
        },
        'custome_post_type', // カスタム投稿タイプ名
        'normal'
    );
});

The display image looks like this.

Save text field.

In the save_post hook, in $_POST, if there is a form ID custom_id specified in the meta box, save it with update_post_meta.

add_action('save_post', function($post_id) {
    if (isset($_POST['custom_id'])) {
        update_post_meta($post_id, 'custom_id', $_POST['custom_id']);
    }
});

Get the added text field.

It can be retrieved with get_post_meta.

The first argument is the relevant post ID and the second argument is the custom field key you wish to retrieve.
In this case it is “custom_id”.
The third argument, if true, is returned as a string; if false, an array of custom fields is returned.

get_post_meta($post->ID, "custom_id", true);

Summary

I think it will be useful in the long run as I actually use it and think about managing the plugins better.
Also, since I write the HTML that I post myself, I think I can make it easier to use, including the design.

よかったらシェアしてね!
目次