How to Loop Inside React JSX

In this tutorial I would like to talk about different ways of performing loops inside JSX code. Hopefully it will be helpful to you when you create some cool stuff for Gutenberg.

Creating Checklist Component for Gutenberg Sidebars

I already have a couple of tutorials about working with metadata in Gutenberg, so you can find a complete guide to it and a separate tutorial about image fields. Now let’s continue to dive into it and discuss types of fields that consist of multiple input elements.

We are not going to dive straight into the repeater fields (let’s do it later) and discuss something more simple, a checklist field for example.

That’s how it is going to look like:

checklist field in Gutenberg sidebar
If you’re interested in how to create an image field, there is a separate tutorial about that.

Variation Change JavaScript Events

Sometimes you need to do some stuff when your WooCommerce product variation has been changed. Maybe only for a specific variation.

Primarily there are two JavaScript events that are triggered after a variation change.

Remove Post Type Slug from URLs

I’ve been asked about how to do it probably a million times. The question is how to make the URLs of your custom post types (or WooCommerce products) to look like Pages.

For example how to have example.com/t-shirt/ instead of example.com/product/t-shirt/.

In this tutorial I am going to provide you a complete guide! As an example we are going to remove /product/ from WooCommerce product URLs. But before we begin I would like to warn you that you have to avoid it if possible, because it may slows down the overall performance of your website and you have to be extra-careful when assigning a specific slug for your posts.

How to Get a Post from Another Site in Multisite Network

Let’s assume, that you’re currently working on Site A and you need to get and display a post (or page or a custom post type – doesn’t matter) from Site B of your Multisite network.

How to do that?

Image Control Component for Gutenberg Sidebars

I have a super-detailed tutorial about plugin sidebars on my blog. But there were described only some basic field types like TextControl, TextareaControl and ToggleControl.

What about something much more interesting? I mean when there were no Gutenberg years ago, I already created an image uploader field for WordPress meta boxes or options pages. What about creating a custom ImageControl component for Gutenberg sidebars right now?

Image control in Gutenberg plugin sidebars

Add Custom Fields to User Profiles

In this tutorial I am going to show two methods how you can add additional user profile fields in WordPress admin area. In the first one we are not going to use any plugins at all, in the second one – we will do the same, but with the help of my Simple Fields plugin.

Let’s get started, I think. Here is what we are going to create:

additional custom fields in user profiles in WordPress