metabox

Metabox

Metaboxes are the heart of Aeria's superpowers. With them, you can insert Aeria's beautiful custom fields in your posts. Let's create a new metabox for our books post type, to specify the book's author, his email and an image of the cover.

First, we set Aeria's 3 required fields:

• "name" defines the name for this metabox.
• "kind" defines the type of configuration: we're gonna set it to "meta" this time.
• "spec" defines the specific configurations for this metabox.

{
  "name": "book_infos",
  "spec": {},
  "kind": "meta"
}

If you want to leave this configuration disabled for now, you can add "enabled": false to these fields.

Specs

Now that we've defined the basic informations about the metabox, we need to add some informations about what we need.

First, let's specify a title, a post type and a context:

• We'll set our "title" to "Book informations".
• "post_type" specifies the post types where our metabox will appear. Default: "post"
• "templates" specifies the page templates where our metabox will appear.
• "context" defines where the metabox will appear. We have three options for this one:
  • "normal"
  • "side"
  • (Default):"advanced"

{
  "name": "book_infos",
  "spec": {
    "title": "Book informations",
    "post_type": [
      "book"
    ],
    "context": "normal",
    "fields": []
  },
  "kind": "meta"
}

Fields

Now, the fun part: let's add some fields to the metabox! Like we said in the intro, we want to specify the book's author, his email and an image of the cover.

Let's add the author name field:

{
  "type": "text",
  "id": "author-name",
  "label": "Author name",
  "description": "Insert the book's author name here.",
  "size": "half",
  "placeholder": "Author",
  "required": true
}

• The field "type" is text. To know more about Aeria's field types, check the fields pages.
• The field's id is the name Aeria uses to manipulate the field. We're gonna set it to "author-name".
• The field's label is displayed over the field, in the metabox. Note that this string will be capitalized in Aeria's UI.
• The field's description is displayed when the mouse is hovered over the question mark icon in the UI.
• Let's set the size to "half", since a name is not a long string.
• The placeholder will be shown when no text is written inside the field.
• Finally, we set the "required" field. Since no book has no author, we want this field to be always inserted.

Now, let's add a field to save the author's email.

{
  "type": "text",
  "id": "author-email",
  "label": "Author's email",
  "description": "If the author is alive, insert his email.",
  "size": "half",
  "placeholder": "Email",
  "required": false,
  "validators": "isEmail"
}

Since the author may not be alive, this field is not required. Some of you may have noted that a new field has appeared: "validators" defines how Aeria will check if the field is inserted correctly. Aeria offers a set of standard validators. Check the validators reference to know more.

Finally, we want to insert the book cover inside the post. Let's declare a picture field.

{
  "type": "picture",
  "id": "book-cover",
  "label": "Book cover",
  "description": "Insert the book's cover",
  "size": "full",
  "required": true,
  "ctaLabel": "Insert cover"

The only difference here is the definition of the field's call to action, "cta:".

Now that we've defined the fields, our config file looks like this:

{
    "name": "book_infos",
    "spec": {
        "title": "Book informations",
        "post_type": [
          "book"
        ],
        "context": "normal",
        "fields": [
            {
                "type": "text",
                "id": "author-name",
                "label": "Author name",
                "description": "Insert the book's author name here.",
                "size": "half",
                "placeholder": "Author",
                "required": true
              },
              {
                "type": "text",
                "id": "author-email",
                "label": "Author's email",
                "description": "If the author is alive, insert his email.",
                "size": "half",
                "placeholder": "Email",
                "required": false,
                "validators": "isEmail"
              },
              {
                "type": "picture",
                "id": "book-cover",
                "label": "Book cover",
                "description": "Insert the book's cover",
                "size": "full",
                "required": true,
                "ctaLabel": "Insert cover"
              } 
        ]
      },
      "kind": "meta"
}

In our dashboard, we can now create a book post, and check that our metabox is right how we imagined it.