WordPress Meta Box Basics

A meta box provides an interface for site owners, author, editors, admins, etc.
to view, add, delete, and edit custom fields (post metadata). In this hands-on coding lab, you will create a meta box from scratch, step-by-step as you learn about the process of building your own meta box interfaces from scratch.

There are 4 necessary components to adding a custom meta box to WordPress:

Add/Register
Render
View File
Save

In this hands-on coding lab, you will explore each of them as you build a meta box for your subtitle custom field (post metadata).

What You Will Build

You’ll be given a starting plugin that has the framework for those 4 components. You’ll work with Tonya as she walks you through each component, sharing the thought process, how and why it works, and exploring the code and WordPress core. You’ll build the custom bits to complete each of the 4 components.

When you’re done, you’ll have:

A working subtitle meta box and custom field
A framework you can use any project.
An appreciation of how little code it takes to add your own custom fields and meta box.

What you’ll discover is:

You don’t need a 3rd party dependency (plugin) to pass onto your client.
You can do this yourself.

What You Will Learn

Here’s what you’ll learn in this lab:

What’s needed to register (add) a new custom meta box with WordPress
What screens (post types) will include your new meta box
Positioning your meta box in the screen
The rendering process
Getting the current metadata before rendering to the browser.
Building the HTML and view file
Including a hidden security form field called a nonce field
Saving process of what happens when you click the “publish” or “update” button to save a post, page, or custom post type. Hint: It’s a form and HTTP POST method.
Explore the PHP superglobal $_POST that holds all of the content being posted back to the web server.
Determining if this “save” includes your custom fields, meaning – should you continue processing it
Protecting your meta box, database, and the website with nonce security
Handling defaults
Determining whether to save or delete the metadata

Prerequisites

In order to do this hands-on, you will need to complete the first part of this series:

12 Episodes
02:03:31 Runtime

WordPress Post Metadata (Custom Fields) Basics

Using post metadata, we can add additional information to built-in and custom post types (content). We use this information for specific filtering, querying, grouping, and processing tasks. In the back end, we build metaboxes whose custom fields provide an interface for authors to input the metadata. In this hands-on lab, you will learn the basics of WordPress post metadata and the custom fields you build for their interface.

Learn more

If you listen carefully, you can hear the 1s and 0s flowing in your computer.

Episodes

Total Lab Runtime: 02:21:18

1 Lab Introductionfree 07:20
2 What is a Meta Box?free 07:28
3 Add a New Meta Boxpro 11:46
4 Meta Box HTMLpro 18:39
5 Save Process & $_POSTfree 12:33
6 Bail Out if Not Our Meta Boxpro 05:03
7 Nonce Security Checkpro 10:16
8 On Save - Update or Delete Custom Field?pro 12:03
9 Validate & Sanitize BEFORE Updating Databasefree 14:41
10 Add Another Custom Fieldpro 08:49
11 Making Save Easier with $_POST Keypro 05:32
12 Better Saving Strategy for Multiple Custom Fieldspro 14:47
13 Changing Where Meta Box Appearspro 06:02
14 Passing Arguments to Renderpro 02:18
15 Wrap & Making it Reusablepro 04:01

27 Episodes
04:38:42 Runtime

Reusable Meta Box Module

The bulk of the heavy lifting for working with meta boxes can be generated using a reusable module. In this hands-on coding lab, you will convert the meta box plugin you built in the Basics lab, making it configurable and reusable. Build it once. Then reuse it. For each custom meta box, build a configuration and view file. That's it.

Learn more

Check out the WordPress Fundamentals Library for more hands-on labs, insights, Docx, and more.

Check out the series page for more labs: WordPress Metadata, Metaboxes, and Custom Fields Series