Metadata

Simple Fields

Allows to create easily settings pages and meta fields for posts, taxonomy terms, comments and users. Gutenberg sidebars are supported. Super-fast and minimalist plugin.

How to Update Post Meta with WordPress REST API

This tutorial is an addition to my another tutorial about creating posts using REST API in WordPress, because in that post I didn’t mention how to work with meta fields. So now we’re going to add (or update) meta fields of a specific post with the help of REST API requests.

By the way, the whole process is similar when you work for example with term meta, not only with post meta.

How to Use Select2 Multiselect in Meta Boxes

In this tutorial I am about to show you two examples how you can use Select2 when creating fields in WordPress admin. We are going to take a look at a meta boxes example specifically but you can easily use it for fields in taxonomies settings or options pages as well.

In the first example we will use Select2 to create a multiselect dropdown with tags, in the second one we will do the same for posts, but also with an AJAX search.

How to Add Custom Fields to Order Details Page

In this tutorial I am going to talk about customers order details page, that is located in My Account > Orders > View Order. In case you are looking for a solution how to add custom fields to edit order page in WordPress admin, there is a separate tutorial for that.

Add Fields to Edit Order Page

First things first, if you need to display custom fields in View Order page in My Account, you need another tutorial. In this tutorial we are going to do it in WordPress admin only.

Here is what we are going to create:

Add custom editable information to the Order Details

Create Tabs in Meta Boxes

Recently I published another tutorial where I created tabs for WordPress settings pages. We didn’t even discussed the design moment there, because WordPress core has everything we need, we just used a wrapper element <nav class="nav-tab-wrapper"> and two CSS classes for tabs nav-tab and nav-tab-active. That’s pretty much it.

With meta boxes for posts this moment can be a little bit tricky. We can of course use the same approach we used for settings pages and then our tabs are going to look like this:

meta box tabs like in WordPress settings pages

In this example we have a couple of disadvantages:

  • These tabs aren’t going to work by default, so we need to add some JavaScript which is going to switch the tabs.
  • I also added some custom CSS for tabs – background-color and border-color, otherwise they looked really ugly.

Or we can try the tab design WooCommerce uses:

Tabs in WooCommerce product meta box

Tabs look nicer but in this case we have to copy all the CSS from WooCommerce when it is not installed on our site. And don’t fotget JavaScript. So it is similar to the “option pages-like” tabs way but maybe even more complex.

Suddenly I found a solution when I took a look at categories meta box:

meta box with post categories in WordPress

When I tried to copy and paste it for my custom meta box I found out that it works as is, that we don’t even have to add any extra CSS or JS! So, it seems to be exactly what we need. And this is how our final meta box in this tutorial is going to look like:

create tabs in WordPress meta boxes
Organizing fields by tabs in WordPress meta boxes.

As always I am going to show you two approaches here:

  1. Completely from scratch. In this case the tutorial about meta boxes is recommended to read.
  2. With my plugin. Just copy and paste the code plus different field types are supported.

Creating Custom Sidebars with PluginSidebar

Creating Gutenberg sidebars and panels with fields inside of them is a brand new way of working with WordPress metadata. I am sure that the default way of creating meta boxes will stay with us for a long time as a backward compatibility, but believe me that working with the content using blocks and sidebars is a much more pleasant way than trying to configure everything in old-fashioned meta boxes.

So, what we are going to do in this tutorial?

Usually I like to show practical examples in my tutorials. And here is the one – I don’t use any SEO plugins on my projects, because I think they are too heavy and bloated with code. But if you’re familiar with SEO, you know that it is important to add unique titles and meta descriptions for your website pages. And probably you would like to hide some of them from indexing with robots meta tag.

create custom Gutenberg plugin sidebars
Our Gutenberg sidebar has 3 fields here – one text field, one textarea field and one toggle.

Please also stay away from tutorials where it is recommended to work directly with WordPress REST API and use wp.apiRequest etc. That’s not a correct way of creating Gutenberg sidebars.