Metadata – Page 2

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:

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 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:

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:

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 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.

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.

In my another tutorial about syncing users using WordPress REST API I received a question in comments, where I was asked about metadata. After googling for quite a bit I found out that there is no clear explanation out there about using user’s meta in REST API requests.

Even though Gutenberg (WordPress Block Editor) has become our new reality and FSE themes are also on their way, we still need meta boxes on our projects. The meta boxes aren’t necessarily classic meta boxes for posts, it could be additional settings fields for taxonomies, users, comments and even options pages. It means that we are going to need them for a very long time. Maybe even forever.

Of course the best way to create any of the mentioned above is to code by yourself. But it could be really time consuming especially if you have a lot of fields (and working on lots of projects).

That’s when metabox plugins come into play. The most popular ones are Advanced Custom Fields and Carbon Fields. Also in this article I am going to mention my own metabox plugin I developed for my needs which is Simple Fields.

The idea of this tutorial is to become more conscious to what plugins we are using to achieve our goals, because there are lots of slow WordPress websites out there, not because WordPress is slow but because sites are overloaded with tens and even hundreds heavy plugins.

Let’s look the truth in the face – of course I am going to tell you how cool my Simple Fields plugin is. But I am not going to say “use it”, because I understand clearly that sometimes its functionality is not enough, then you can probably look at Carbon Fields plugin. And even Advanced Custom Fields PRO has its own advantages though I am not a big fan of it.

In this guide I am assuming that you already have some basic knowledge how to work with WP_Query class in WordPress. And this tutorial will be all about working with custom fields.

Either you are working with Gutenberg or with Classic Editor, maybe you’re using some custom fields plugins like ACF, Carbon Fields, Simple Fields (it is my plugin, highly recommend) – in all of these cases the idea of working with Meta_Query will be the same.

I already have a plenty of tutorials on my blog where we created different kind of fields for Gutenberg sidebars, for example an image field, a gallery field, a checklist and even a dropdown with posts.

There is also my Simple Fields plugin for those of you guys who don’t want to mess up with JSX and React and prefer to use simple PHP code snippets instead.

But now let’s talk about creating a repeater field. First things first – a screenshot:

Now so long ago I published a tutorial about creating a custom image control component for plugin sidebars. The very first question in the comments was “How to select multiple files”?

So let’s dive into it now.

First things first let me show you what we are going to create here.