Skip to main content

Custom Fields (ACF)

TheDock includes built-in Advanced Custom Fields integration for dynamic content.

Overview​

TheDock comes with ACF Pro built-in - no separate installation required. The integration allows you to:

  • Create custom fields directly in TheDock
  • Map fields to template blocks and sections
  • Use repeater and flexible content fields
  • Create global (site-wide) options
  • Automatically generate field groups on export

ACF Pro Included​

TheDock includes ACF Pro functionality out of the box:

FeatureDescription
Repeater FieldsCreate repeatable content blocks
Flexible ContentVariable layouts with multiple row types
GalleryMultiple image selection
CloneReuse field configurations
Options PagesSite-wide settings

You don't need to install ACF separately.

Managing Custom Fields in TheDock​

The Custom Fields Panel​

Access custom fields at C. Build > Custom Fields in the TheDock interface.

The panel displays all available fields organized by type:

  • Text - Short text, titles, names
  • Textarea - Longer text, descriptions
  • WYSIWYG - Rich formatted content with editor
  • Email - Email addresses
  • Phone - Phone numbers
  • Date - Date picker fields
  • Image - Single images
  • Gallery - Multiple images
  • File - Documents, downloads
  • Link - URLs with titles
  • Video/Audio - Media files
  • Color - Color picker
  • External URL - External links
  • oEmbed - Embedded content (YouTube, etc.)
  • Repeater - Repeated content groups
  • Flexible Content - Variable layouts
  • Taxonomy - Category/tag selection
  • Relationship - Post relationships

Adding Custom Fields​

  1. Open C. Build > Custom Fields
  2. Click Add New Field
  3. Select the field type
  4. Enter a name and label
  5. Choose if it's a Global field (site-wide) or post-specific

Field Properties​

Each field has:

PropertyDescription
NameMachine name (slug) used in code
LabelHuman-readable display name
GlobalIf checked, field appears in global options

Using Custom Fields in Templates​

Setting Block Source​

When editing a block in your template:

  1. Select the block in the tree view
  2. In the settings panel, find Source
  3. Choose Custom Field
  4. Select the specific field from the dropdown

Supported Block Types​

Block TypeCompatible Field Types
Text BlockText, Textarea, WYSIWYG, Email, Phone
Image BlockImage
Gallery BlockGallery
BackgroundImage, Video/Audio
LinkLink, External URL

Example: Hero Section with Custom Fields​

  1. Create custom fields:

    • hero_background (Image)
    • hero_heading (Text)
    • hero_description (Textarea)
    • hero_cta (Link)

  2. In your Hero section template:

    • Set background source → Custom Field → hero_background
    • Set heading source → Custom Field → hero_heading
    • Set description source → Custom Field → hero_description
    • Set button source → Custom Field → hero_cta

Global vs Post-Specific Fields​

Post-Specific Fields​

Default behavior - fields appear on individual posts/pages:

  • Each post has its own values
  • Great for page-specific content
  • Appears in the post editor

Global Fields​

Check Global when creating the field:

  • Values shared across the entire site
  • Accessible from any template
  • Perfect for:
    • Contact information
    • Social media links
    • Company details
    • Footer content

Repeater Fields​

Repeaters allow multiple rows of grouped fields.

Creating a Repeater​

  1. Add a Repeater field in Custom Fields
  2. Define sub-fields within the repeater
  3. Use in templates with loop blocks

Example: Team Members​

Repeater: team_members

Sub-fields:

  • name (Text)
  • position (Text)
  • photo (Image)
  • bio (Textarea)

Using Repeaters in Templates​

  1. Add a Loop block to your template
  2. Set source to the repeater field
  3. Inside the loop, map sub-fields to blocks

Flexible Content​

Flexible content allows editors to choose from multiple layout options, creating a page-builder experience.

How It Works​

  1. Define multiple layouts (row types)
  2. Each layout has its own set of fields
  3. Editors can add any combination of layouts in any order

Two Approaches to Flexible Content​

TheDock offers two ways to create flexible content:

1. Module-Based Flexible Content (Recommended)​

Use TheDock's visual module builder to create sections, then enable them for flexible content:

  1. Create modules in B. Layout > Modules
  2. Click the database icon to enable each module for flexible content
  3. Add a Flexible Content section to your template
  4. Editors can add/reorder your pre-designed modules

This approach lets you design complex sections visually while giving editors flexibility.

See: Modules as Flexible Content for detailed instructions.

2. Field-Based Flexible Content​

Create flexible content fields directly with custom sub-fields:

Flexible Content: page_sections

Layouts:

  • Text Block: heading, content
  • Image + Text: image, heading, content, alignment
  • Gallery: images, columns
  • CTA: heading, text, button_text, button_link

This approach is simpler but requires more manual field configuration.

Field Export​

When you export your theme, TheDock automatically:

  1. Generates ACF field groups based on your field definitions
  2. Creates location rules matching your template assignments
  3. Exports PHP code that registers fields in the theme

This means your exported theme includes all custom field definitions - no manual ACF configuration needed on the live site.

Export Location Rules​

TheDock intelligently sets field locations based on where they're used:

Template TypeACF Location Rule
HomepageFront Page
Single PostPost Type = Post
PagePost Type = Page
ArchivePost Type Archive
Custom Post TypePost Type = [CPT]
TaxonomyTaxonomy = [Term]

Custom Field Types​

TheDock extends ACF with additional field types:

Background Media​

Special field for section backgrounds:

  • Image or video selection
  • Position controls
  • Responsive handling

Video/Audio​

Enhanced media field supporting:

  • Video files from media library
  • Audio files
  • Multiple format support

Best Practices​

1. Plan Your Field Structure​

Before creating fields, consider:

  • What content changes per page?
  • What stays consistent site-wide?
  • What should editors control?

2. Use Clear Naming​

hero_background_image
page_introduction
team_member_position

Avoid generic names like text1, image2.

3. Use Global Fields Wisely​

Good candidates for global fields:

  • Company contact info
  • Social media links
  • Footer content
  • Site-wide CTAs

Organize complex field sets logically:

  • Hero fields together
  • Contact fields together
  • SEO fields together

5. Provide Clear Labels​

Labels should be clear to content editors:

  • ✅ "Hero Background Image"
  • ❌ "hero_bg_img"

Troubleshooting​

Fields not appearing in dropdown​

  • Refresh the TheDock interface
  • Check that the field is the correct type for the block
  • Verify the field was saved

Custom field data not displaying​

  • Ensure content has been entered in WordPress
  • Check field mapping in template settings
  • Verify the correct field is selected

Repeater not showing items​

  • Check that rows have been added in the editor
  • Verify loop block is configured correctly
  • Review sub-field mappings

Global fields not working​

  • Confirm field is marked as Global
  • Check that values are saved in Options
  • Refresh and re-export if needed

Fields missing after export​

  • Re-export the theme
  • Check for export errors
  • Verify field is used in at least one template

← Back to Documentation