Creating Your First Field Group

A field group is a collection of fields that appear together when editing a post or page. This section walks you through creating a complete, real-world field group from start to finish. Instead of a toy example, you will build a “Team Member” profile that a consulting firm might use — with a photo, name, job title, bio, specialties, and a LinkedIn URL. By the end, you will understand every part of the field group editor and be ready to build your own custom configurations.

The Scenario

Imagine you run a consulting firm called Apex Partners. You want each consultant to have a dedicated profile page on your website showing their photo, full name, job title, a professional bio, a list of specialties, and a link to their LinkedIn profile. You have a custom post type called “Team Members” (your developer set this up), and you need the fields for editors to fill in.

Step 1: Create the Field Group

1. Go to Field Forge > New Field Group
2. In the title field at the top, type: Team Member Profile
3. This title is what editors see as the metabox heading when editing a Team Member post

[Screenshot: the field group editor with “Team Member Profile” entered as the title and an empty field list below]

Step 2: Add the Photo Field

1. Click the Add Field button — a grid of available field types appears
2. Click Image from the grid
3. Configure the field:

– Name: profile_photo (auto-generated from the label — leave it as-is)

– Instructions: Upload a professional headshot. Recommended size: 400×400 pixels, square crop.

– Required: Yes (toggle this on — every team member needs a photo)

– Return Format: Image Array (gives your developer access to multiple image sizes)

– Preview Size: Medium (this controls the preview thumbnail shown in the editor)

– Wrapper Width: 30% (we will put the photo on the left, with name and title on the right)

Step 3: Add the Name Field

1. Click Add Field again, choose Text
2. Configure:

– Name: full_name

– Instructions: Enter the consultant’s full name as it should appear on the website.

– Required: Yes

– Placeholder: “Jane Doe”

– Character Limit: 100 (prevents accidentally pasting a paragraph)

– Wrapper Width: 35%

Step 4: Add the Job Title Field

1. Click Add Field, choose Text
2. Configure:

– Name: job_title

– Instructions: Their role at the firm (e.g., Senior Consultant, Managing Partner).

– Required: Yes

– Placeholder: “Senior Consultant”

– Wrapper Width: 35%

Step 5: Add the Bio Field

1. Click Add Field, choose Textarea
2. Configure:

– Name: professional_bio

– Instructions: Write 2-3 paragraphs about the consultant’s background, expertise, and approach. This appears on their profile page.

– Required: Yes

– Rows: 6 (makes the text area tall enough for a few paragraphs without scrolling)

– Wrapper Width: 100% (full width — bios need space)

Step 6: Add the Specialties Field

1. Click Add Field, choose Checkbox
2. Configure:

– Name: specialties

– Instructions: Select all areas of expertise that apply.

– Choices: Add each specialty on its own line:

– Strategy

– Operations

– Digital Transformation

– Financial Advisory

– Human Capital

– Risk Management

– Technology

– Sustainability

– Layout: Horizontal (displays checkboxes in a row instead of a vertical list, saving space)

– Wrapper Width: 100%

Step 7: Add the LinkedIn URL Field

1. Click Add Field, choose URL
2. Configure:

– Name: linkedin_profile

– Instructions: Paste the full LinkedIn profile URL (e.g., https://linkedin.com/in/janedoe).

– Required: No (not every team member may have one)

– Placeholder: “https://linkedin.com/in/username”

– Wrapper Width: 50%

Step 8: Set Location Rules

1. Scroll down below the fields to the Location Rules section
2. Set the first dropdown to Post Type
3. Set the operator to is equal to
4. Set the value to Team Member (or whatever your team post type is called)
5. This means every Team Member post on your site will display the “Team Member Profile” metabox

Step 9: Save and Test

1. Click Save Field Group (or press Cmd+S / Ctrl+S)
2. Go to your Team Members post type in the admin sidebar
3. Open an existing team member post or create a new one
4. Scroll below the content editor — you will see the “Team Member Profile” metabox
5. Notice that the Profile Photo field (30% width) sits on the left, with Full Name (35%) and Job Title (35%) on the right on the same row
6. Fill in some test data: upload a photo, enter a name, title, and bio, check a few specialties, paste a LinkedIn URL
7. Click Publish or Update to save
8. Reopen the post to confirm all data is preserved

[Screenshot: a Team Member post in the editor showing the “Team Member Profile” metabox with all fields filled in — photo on the left, name and title on the right, bio below, checkboxes for specialties, and a LinkedIn URL field]

More Examples of Field Groups You Could Build

Tips for Organizing Fields

• Drag fields to reorder them — the order in the editor is the order editors see on posts
• Double-click a field label to rename it inline without opening the full settings panel
• Use Wrapper Width to create multi-column layouts. Two fields at 50% sit side by side. Three at 33% create a three-column row
• Add a Tab field (under Layout types) to split a large field group into tabbed sections. Put content fields in one tab, SEO fields in another, and settings in a third
• Use a Message field to add instructions, warnings, or notes that editors will see when filling in fields. For example: “Images must be at least 1920×1080 pixels for the hero section.”
• Keep field names short and descriptive — hero_title is better than the_title_for_the_hero_section_at_the_top

> Good to know: The field Name (like full_name) is what your developer uses in theme code to display the data. Once a field group is in production use, avoid changing field names — it breaks the connection between saved data and the theme. Changing the Label (what editors see) is always safe and has no effect on data or code.

> Common mistake: New users sometimes create a field group but forget to set location rules. The fields exist but never appear anywhere. Always scroll down to Location Rules before saving and make sure at least one rule is configured.

—