Blog – Page 3

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.

Create Settings Pages with Tabs

In many different WordPress plugins settings are organized by tabs, we can consider it like a default functionality, because when creating tabs you don’t even need to write any CSS for them, it is already provided by WordPress code, just use the appropriate classes.

For example:

Tabs in WooCommerce plugin settings page
WooCommerce plugin settings page.


crossposting plugin settings tabs
The tabs in the settings page of my Simple WP Crossposting plugin.

So in this tutorial we’re going to create a simple WordPress settings page with a couple of tabs in two different ways:

  1. In the first method we’re going to create options pages from scratch using WordPress Settings API. If you’ve never had a chance to work with it, then either consider using the second way or read a tutorial about Settings API.
  2. The second method is much simpler, all you need to do is to copy and paste the ready code into your plugin or theme, but in this case you have to have my Simple Fields plugin installed on your website.

That’s what we are going to have by the end of this tutorial:

Tabs in WordPress settings pages
We added two text fields into the first tab and one field into the second one.

Add a Super Admin User in phpMyAdmin

Sometimes when you work with WordPress multisite network you may need to create a super administrator user not from the dashboard, but from the database with the help of SQL queries.

And in this tutorial I am about to show you how. There are actually only two steps we need to do:

Set a Customer Role after Purchasing a Specific Product

This whole process of changing a user role after making a purchase in WooCommerce actually consists of two steps:

  1. We have to decide about the hook, when exactly we are going to do a role switching, because there are plenty of them.
  2. Check the order if there is a specific product (or products) and do the thing.

How to Gray-out Out of Stock Variations

In this tutorial we will try to make specific variations (out of stock ones) in the variations dropdown list not selectable:

how to grey out WooCommerce variations in the dropdown which are out of stock

By default WooCommerce allows to select a variation even if it is out of stock and as a result we have a frustrated customer who sees this sad smiley instead of an active “Add to cart” button:

example of out os stock variation in WooCommerce

Display Variations as Radio Buttons

In this tutorial I’d like to show you an example how to replace the default variation select dropdowns with radio buttons without plugins. Maybe for specific WooCommerce product attributes or product IDs only.

Something like that:

how to display WooCommerce variations as radio buttons

We’re going to do it without any plugins, though, you might think that it’d be better to display the “Color” attribute not as radio buttons but as color swatches. Like this:

how to display WooCommerce product variations as color swatches

In this case I would recommend you to take a look at my plugin which allows to do that.

But now let me describe a little bit more what we are about to do in this tutorial:

  • We are not going to change any WooCommerce HTML templates, that’s quite a rough method and I noticed that some plugin in WordPress plugin directory are doing that which I think is absolutely unnecessary.
  • I will show you a couple of conditions which will allow you to replace variations select dropdowns with radio buttons only for specific products or only for specific attributes.

Now let’s get started.

WooCommerce Custom Setting Validation, Sanitization and Escaping

Recently I’ve been working on a light version of my Simple Inventory Sync plugin which I hope you will see soon in the WordPress plugins directory and I faced with a very interesting task.

I needed to create additional settings fields in WooCommerce > Settings > Products and one of the fields should contain an application password for REST API authentication, so obviously I didn’t want that value to be displayed for anyone who can view the settings pages.

So I needed this:

WooCommerce custom settings

And more than that I needed to escape an URL in the “Store URL” fields. So, now let’s dive into this in details.