WordPress

In this tutorial I would like to cover two ways how you can copy a WordPress page from one site to another. I am not going to use the export and import approach, because I think it is too complicated and requires extra steps which we normally don’t need.

And of course everything in this tutorial applies not only to regular WordPress pages, but also:

• pages with tons of custom fields (ACF, Carbon Fields, Simple Fields etc),
• pages, created with page builders (Elementor, WPBakery, Beaver Builder etc).
• pages, created with either classic or the block editor.

So let’s get started now.

Before I provide you a code snippet which you can copy and paste to your functions.php or something I would like to discuss why do even need to disable JSON REST API in WordPress?

The long story short is to provide less information about your website to those who shouldn’t probably have it. For example if we add at the end of site URL /wp-json/wp/v2/users, we can list all the registered users! Without emails of course but anyway.

If you want to prevent this from hapenning, you can either disable WordPress REST API completely or just its specific endpoints. And that’s what we’re going to do in this guide.

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.

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:

Or:

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:

Recently I’ve been trying to update all the outdated tutorials on my blog and I found out tons of security tips and tricks I published in the past in separate tutorials. I decided to combine them into all-in-one security guide for WordPress users and also developers.

Usually when I publish something on my blog I never use SVG images in my posts and in theory you would never need them too in your site content.

But the thing is that we’re not always using WordPress publishing tools (The Block Editor, Elementor etc) for content editing, sometimes we create landing pages with them. My decision to create a tutorial like this came to me when some of my customers who use my Simple WordPress Crossposting plugin tried to upload SVG images in Elementor and then to crosspost such articles to another site (which obviously didn’t have SVG support) using REST API.

When you try to upload an SVG icon to a WordPress website, you’re going to have an error like this in Media Upload:

Or if you try to upload it via REST API, then it will return 500 Server Error with the following response body:

Not so far time ago I published a similar tutorial for WooCommerce, actually I wasn’t sure that WordPress REST API itself accepts batch requests as well, because of lack of its documentation. But now I have figured it out and would like to share it with you.

In this tutorial we are going to create a bulk action like this one for posts and pages: