Description
SLB (Section Layout Builder) is a section-based website builder for WordPress and WooCommerce. Developers describe each page section once, as a PHP template with a JSON schema in its header. SLB turns that schema into a clean full-screen editor, so editors and clients can change text, images, colors, links and products without touching code. There is no drag-and-drop clutter, no shortcodes in your content and no lock-in.
Who is SLB for?
- Agencies and freelancers who build custom WordPress and WooCommerce sites and hand them to clients.
- Theme developers who want a safe, structured editing experience instead of a free-form page builder.
- Store owners working with a developer who need to update landing pages, product sections and promotions on their own.
How it works
- Write a PHP section template with a
@sectionJSON schema in the comment header. - Define fields (text, image, select, toggle, color, URL, range, and more).
- Editors place sections on any page through the SLB full-screen editor.
- Your theme calls
slbuild_render_page()in its page template (one line). SLB resolves the field values at render time and outputs plain server-rendered HTML — no page-builder shortcodes in the database.
Key features
- Schema-driven editor — form controls are generated from your JSON schema, no custom editor code needed.
- Instance-based data model — two instances of the same section on one page are fully independent.
- Repeatable blocks — define child blocks (e.g. feature cards, FAQ items) within a section.
- WooCommerce integration — built-in product picker, category picker, and product-grid sections.
- Conditional fields — show/hide fields based on other field values using
visible_ifrules. - Named presets — multiple pre-configured starting points per section via the
presetsarray. - Section limits —
max_per_pageschema key prevents duplicate unique sections. - Preview tokens — share a 7-day preview link with clients without giving them admin access.
- Global regions — manage header and footer layouts in one place; auto-seeded on theme activation.
- Theme settings — color palette, fonts, and shop settings saved once and applied site-wide.
- Spacing controls — per-instance margin and padding via a visual spacing box.
- Field validation — min/max length, min/max value, required — validated in the editor and on the server.
- WooCommerce wrapper notice — editor clearly flags sections that only wrap WC output.
- No lock-in — section templates are plain PHP files in your theme. Move to another setup any time.
- No build step — plain PHP, vanilla JavaScript, no Composer, no npm required for the plugin itself.
Starter sections included
Marketing: Hero, CTA Banner, Features, Stats, Testimonials, Pricing, FAQ, Video, Rich Text, Logo Bar, Steps, Sale Countdown, Trust Badges, Promo Banners.
WooCommerce: Product Grid, Product Tabs, Featured Product, Recently Viewed, Cart, Checkout, My Account, Order Confirmation.
Content: Blog Grid, Team Grid, Categories, Text + Image, Single Product.
Global: Header, Footer, Announcement Bar, Mobile Nav, Cookie Consent, Back to Top, WhatsApp Button, Theme Settings, Product Settings.
External Services
The built-in starter sections are styled by a precompiled CSS file bundled with the plugin (assets/slbuild-tailwind.css, generated from the starter sections with the Tailwind CSS tool, MIT licensed). It is a normal stylesheet: no script is loaded and no external connection is made. It is loaded only on pages that have SLB section data.
To disable Tailwind loading entirely (e.g. if your theme already bundles Tailwind), add this to your theme’s functions.php:
add_filter( 'slbuild_load_tailwind', '__return_false' );
This plugin also loads Google Fonts from fonts.googleapis.com when a font pairing is selected in the Global Settings Theme Settings section. This is optional and only active when a font pairing is configured.
What is sent: A standard browser GET request for a CSS file with font definitions. No personal data is sent.
When it loads: Only when a font pairing other than “Default” is selected in Theme Settings.
Service information:
* Provider: Google LLC
* Service URL: https://fonts.google.com
* Privacy Policy: https://policies.google.com/privacy
* Terms of Use: https://developers.google.com/terms
Screenshots
Installation
- Upload the
slb-section-layout-builderfolder to/wp-content/plugins/. - Activate the plugin through the Plugins menu in WordPress.
- Navigate to SLB Editor in the admin menu.
- Open any page, click Edit with SLB, and start adding sections.
- In your theme’s page template, add
<?php if ( function_exists( 'slbuild_render_page' ) ) { slbuild_render_page(); } ?>where the page content should appear.
For a pre-wired Tailwind CSS environment, install the companion slb-starter theme separately.
FAQ
-
What is SLB?
-
SLB (Section Layout Builder) is a free WordPress plugin that lets developers define page sections as PHP templates with a JSON schema, and gives editors a generated full-screen editor to fill those sections in. It supports WooCommerce and ships with starter sections for marketing pages, shops and global header and footer areas.
-
Is SLB a drag-and-drop page builder?
-
No. SLB is a structured section builder. Pages are a vertical stack of sections, and each section exposes only the fields its developer chose. This keeps client edits safe and your design consistent.
-
Is SLB good for SEO and page speed?
-
SLB renders your sections on the server as plain HTML, with real headings and links, and stores no shortcodes. The plugin loads one precompiled stylesheet, and only on pages that use SLB. Page speed and SEO still depend on your theme, hosting and content.
-
Does SLB work with my existing theme?
-
SLB works with any theme that calls
slbuild_render_page()in its page template. This is one line of PHP, shown in the Installation section. Your theme’s own header, footer and styles are untouched. -
Do I need WooCommerce?
-
No. WooCommerce sections simply do not render on sites without WooCommerce active. All other sections work on any WordPress site.
-
Can I write my own section templates?
-
Yes — that is the intended workflow. Place PHP files with
@sectionJSON headers in your theme’ssections/folder. SLB picks them up automatically and merges them with the starter sections (theme sections take precedence on slug collision). -
Where is my content stored?
-
Layout and field values are stored in post meta as JSON. No shortcodes, no custom tables. Section PHP files remain on the server — they are never written or modified at runtime.
-
Does it work with Gutenberg?
-
SLB runs alongside the block editor. It opens from an Edit with SLB button on the page screen, and pages without SLB data keep rendering through whatever editor manages them.
-
What field types are supported?
-
text, textarea, richtext (HTML), image (media library), url, video_url, color, number, range, select, toggle, page (WordPress page picker), spacing_box, and WooCommerce types: product, product_list, category, collection_source.
Organizer types (no saved value): header, paragraph.
-
How do I add the `slbuild_load_tailwind` filter?
-
Add this to your theme’s
functions.php:add_filter( 'slbuild_load_tailwind', '__return_false' );This is useful when your theme already bundles Tailwind CSS from a local build. Sections you write yourself can use any class your theme’s own Tailwind build contains; the bundled file only covers the starter sections.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“SLB — Section Layout Builder: Section-Based Website Builder” is open source software. The following people have contributed to this plugin.
Contributors
Translate “SLB — Section Layout Builder: Section-Based Website Builder” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.3
- New plugin name, short description, tags and FAQ; clearer setup instructions.
- Added plugin icon, banners and screenshots.
- Fixed placeholder icons (pricing ticks, default emoji) that showed as question marks.
1.0.2
- Updated “Tested up to” to WordPress 7.1.
1.0.1
- Replaced the bundled Tailwind Play script with a precompiled stylesheet.
- Replaced WooCommerce hook calls in the product section with direct template functions.
- REST namespace is now slbuild/v1; colour settings are sanitized.
1.0.0
- Initial WordPress.org release.
- Renamed plugin to SLB — Section Layout Builder.
- Added visible_if conditional field visibility (eq/neq/in operators).
- Added named presets — multiple starting points per section.
- Added max_per_page section instance limit with picker enforcement.
- Added type:header and type:paragraph organizer fields (no id required, not saved).
- Added field validation rules (min_length, max_length, min, max, required) — editor and server.
- Added character counter on text/textarea fields with max_length.
- Added WC wrapper notice in editor for cart/checkout/my-account/order-confirmation sections.
- Added connected dot indicator for fields wired to WP/WC hooks.
- Auto-seed global regions on theme activation (after_switch_theme).
- SettingsHooks: bridge gs_theme-settings and gs_product-settings to WP/WC hooks at runtime.
- WooCommerce template override filter (woocommerce_locate_template).
- New starter sections: Blog Grid, Team Grid, Pricing (with named presets).
- New global sections: Cookie Consent, Back to Top, Mobile Nav.
- WC sections: Cart, Checkout, My Account, Order Confirmation — all with wc_wrapper flag.