iBUILDiT

iBUILDiT is a modular WordPress theme with an ACF‑powered page builder, reusable global sections, and a curated admin settings panel for styling and site metadata.

Highlights

• ACF Pro Flexible Content page builder (auto‑registered from module schemas)
• Custom module selector with search and filters
• Reusable Global Sections (insert anywhere as a module)
• Admin settings page with design tokens, custom CSS/JS, header/footer code
• Fullscreen mega menu header layout
• Announcement bar (scheduled announcements, top of site)
• Child‑theme module support (child overrides parent)

Requirements

• WordPress 5.4+ (tested)
• PHP 5.6+ (theme baseline)
• ACF Pro (required)
• iPL Mega Menu (required for the header menu)

Both plugins are bundled as zip files in:

• inc/plugins/advanced-custom-fields-pro.zip
• inc/plugins/ipl-mega-menu.zip

The theme will prompt admins to install/activate them.

Quick Start

1. Install the theme in wp-content/themes/iBUILDiT.
2. Activate the theme in WP Admin.
3. Install/activate the required plugins via the admin notices.
4. Go to iBUILDiT in the admin sidebar to configure global settings.

Page Builder (ACF)

The page builder is a Flexible Content field group created programmatically from module schemas. You will see the builder on pages, posts, and public CPTs.

Location:

• Group: iBUILDiT
• Field: Page Builder

Modules

Modules live in:

/template-parts/modules/{module_name}/
  index.php
  style.css
  scripts.js (optional)
  schema.json

Module Schema Format

{
  "title": "Hero",
  "name": "hero_module",
  "category": "Hero",
  "tags": ["hero", "cta"],
  "description": "Full-width hero with image and CTA.",
  "fields": [
    { "label": "Heading", "name": "heading", "type": "text" },
    { "label": "Button Link", "name": "button_link", "type": "link" }
  ]
}

Module Schema Starter

Use this as a baseline when creating a new module schema. It includes the common metadata plus the optional section_id field for anchors.

{
  "title": "New Module",
  "name": "new_module",
  "category": "Content",
  "tags": ["tag1", "tag2"],
  "description": "Short description shown in the module picker.",
  "include_globals": [
    "section_id"
  ],
  "fields": [
    { "label": "Heading", "name": "heading", "type": "text" },
    { "label": "Text", "name": "text", "type": "textarea" },
    { "label": "Button Link", "name": "button_link", "type": "link" }
  ]
}

Tip: If your module includes repeaters or groups, use sub_fields inside those field definitions.

Global Sections (Reusable)

Global Sections are a custom post type that also uses the page builder. Insert a global section anywhere with the Global Section module.

Admin: Global Sections

Child Theme Support

Child themes can add or override modules by creating:

/wp-content/themes/your-child/template-parts/modules/{module_name}/

Child modules take precedence over parent modules with the same name.

A sample child theme exists in:

/wp-content/themes/iBUILDiT-child

Notes

• Field groups are generated at runtime, so they do not appear in the ACF Field Groups list by default.
• Modules are loaded dynamically and only their CSS/JS are included.

Announcements

Announcements are managed in the Announcements post type and display at the very top of the site.

Fields

• Message
• Link (optional)
• Start/End date time (optional)
• Background and text colors

If multiple announcements are active, they rotate every 5 seconds.

Fullscreen Header Slider (Main Header)

The Main Header module supports vertical/horizontal slides, mousewheel control, optional arrows, and per‑slide overlay color.

Interaction behavior (vertical):

• Captures scroll/touch only when the slider is mostly visible.
• Releases page scroll at the first/last slide.
• One slide per gesture for predictable navigation.

Theme CSS Variables

The iBUILDiT settings page outputs CSS variables you can use in module styles.

Available variables

• --ib-primary
• --ib-secondary
• --ib-bg
• --ib-text
• --ib-font
• --ib-font-size
• --ib-h1-size
• --ib-h2-size
• --ib-h3-size
• --ib-h4-size
• --ib-h5-size
• --ib-h6-size
• --ib-container
• --ib-pad-top
• --ib-pad-bottom
• --ib-menu-bg
• --ib-header-bg
• --ib-footer-bg
• --ib-social-icon-size

Example

.my-module {
  color: var(--ib-text);
  background: var(--ib-bg);
  font-family: var(--ib-font);
  padding-top: var(--ib-pad-top);
  padding-bottom: var(--ib-pad-bottom);
}

.my-module .button {
  background: var(--ib-primary);
  color: #fff;
}