What is Method?

 
 
 
 

Method is a block theme framework for agencies: a WordPress parent theme, a starter child theme and a generator, built for teams that take a designer’s comps and turn them into a fully functional block theme — project after project, each one different. It is not a theme you install and configure. Every project still needs development; Method exists to make that development shorter, by starting it from a foundation that already solves the parts that are the same every time.

This page is about what Method is for and how a project moves through it. The setup itself is in Getting Started with Method v2; the pieces are documented under Method Child, Method Generator, Systems, Method Blocks, React Components, Functions & Classes and Filters & Actions.

Who it is for

Method is for agency and in-house teams where the design arrives as comps — a header, a set of page layouts, a library of components — and the site has to match them rather than approximate them with whatever a theme already offers. It assumes the sites will stay in service for years and be edited by people who are not developers, so the editor has to be safe to hand over, and an upgrade must not strand content that is already in the database.

It is not for projects that can be delivered by choosing a theme and adjusting Global Styles. Method ships no design of its own and no demo content; the parent is never activated directly (it has no stylesheet beyond the framework’s); the child theme has a Sass build that expects Node and a developer comfortable with PHP, SCSS and block markup. If a design would otherwise be built from scratch, Method is the right tool. If it would otherwise be a theme purchase, it is the wrong one.

What you get

  • The parent theme. A library of dynamic blocks — layout (Section, Container, Flex Container, Basic Grid and Advanced Grid on a 24-column Bootstrap grid), navigation (Breadcrumb, Social Nav) and content (Buttons, Fitted Image, Fluid Video, Swiper and Swiper Gallery, Accordion, Modal, Looping Alert, Mapbox Map, Code, Scrollspy) — plus responsive controls added to the core Paragraph, Heading and List blocks. Each block is documented under Method Blocks.
  • The responsive control system. Every Method block carries its base settings plus optional Mobile, Tablet and Wide tiers, edited in the same panel. The CSS for all of it is generated in PHP from the block’s attributes (method_get_block_responsive_styles()) and collected into one inline stylesheet per page (Method_CSS_Collector); in the editor the same map renders live (MethodStyleTag). The tiers are the breakpoints in METHOD_OPTIONS, which a child theme can replace through METHOD_CHILD_OPTIONS.
  • Systems. Theme options on a CMB2 options page, modals, an image lightbox, theme icons shared by the blocks, plugin dependencies that install CMB2 and anything the child adds, and opt-in responsive embeds — each documented under Systems.
  • Extension points. Filters and actions for the things a project changes without touching the parent — button and label styles, icons, social platforms, options-page fields, modal arguments, Mapbox tokens — listed under Filters & Actions, with the PHP functions a child can call under Functions & Classes.
  • Method Child and Method Generator. The starter theme every project is built in, and the tool that renders it with the project’s own name, text domain and prefixes.
  • Plugins. Method Tools (maintenance and content-rewriting tools for Method sites), Method – Search Tools (weighted, meta-aware search with a filter module) and Method – Mapbox for The Events Calendar. Their documentation is being added to this wiki.

The workflow

A Method project runs in the same order every time. The steps are described here as they happen; the pages linked from each one hold the detail.

1. Generate the child theme

Method Generator renders Method Child with the project’s theme header, text domain, function prefix and local development URL in place, and can push the result straight to a new repository. The generated theme is installed next to the parent in wp-content/themes/ and activated; the parent is never activated itself. From here on, all project work happens in the child.

2. Match the comps

Three tools do most of this. Method’s default styles are overridden in the child’s global.scss, which imports Method’s variables.scss and with it Bootstrap’s variables and media-query mixins, so the child’s stylesheet speaks the same breakpoints as the blocks. Design variants — a heading that reads as another level, an enclosed or icon-only button, a secondary button size — are registered as block styles in lib/blocks.php, where the starter already holds commented examples. Behaviour that the design needs and the framework does not do by default is reached through Method’s filters and, where a feature is bigger than a filter, its plugins. The aim of this step is a site where the comps’ layouts can be reproduced in the editor with Method’s blocks and core blocks alone.

3. Build what the editor cannot yet

Where a layout still cannot be rebuilt in the editor, the gap is a block. It is built in the child theme with the same components and hooks Method’s own blocks use (React Components), given Mobile, Tablet and Wide settings through the responsive control system (MethodResponsiveTabs), and optimised there rather than with a second copy of the block per breakpoint. Once a layout works, it is saved as a block pattern in the child’s patterns/ directory — the starter’s lib/blocks.php has a commented pattern-category registration for exactly this — so it can be dropped into any page.

4. Give new content a starting point

In most projects the page header and the introductory section are the same on every page. Both become patterns, and the default_content filter injects them into every new page as it opens in the editor. They are ordinary blocks once there: editable, movable, deletable. The same mechanism gives a custom post type its own opening layout. get_theme_file_path() resolves against the child first, and including a pattern file outputs only its block markup — the PHP header comment that registers it is not part of the output — so the pattern is inserted as content, not as a synced reference.

lib/blocks.php 
// New entries open with a starting layout already in place. The blocks are
// ordinary blocks, so editors can change or delete them.
add_filter( 'default_content', function ( $content, $post ) {

    // A custom post type gets its own opening pattern.
    if ( 'nav_panel' === $post->post_type ) {
        $pattern = get_theme_file_path( 'patterns/navigation-pane.php' );
        if ( file_exists( $pattern ) ) {
            ob_start();
            include $pattern;
            $content = ob_get_clean() . $content;
        }
    }

    // Pages open with a header and an intro section, in that order.
    if ( 'page' === $post->post_type ) {
        $patterns = array_reverse( [
            'patterns/page-layout-header.php',
            'patterns/page-layout-intro.php',
        ] );

        foreach ( $patterns as $pattern ) {
            $pattern = get_theme_file_path( $pattern );
            if ( file_exists( $pattern ) ) {
                ob_start();
                include $pattern;
                $content = ob_get_clean() . $content;
            }
        }
    }

    return $content;
}, 10, 2 );

5. Finish per breakpoint

Mobile adjustments to type — headline sizes above all — normally live in SCSS, using Bootstrap’s mixins (media-breakpoint-down() and friends) or Method’s tier variables ($method-mobile-max and its siblings) so the breakpoints match the blocks’. When one instance needs to differ rather than every instance, the block’s own Mobile, Tablet or Wide tier does it in the editor without touching the stylesheet.

assets/scss/global.scss 
// assets/scss/global.scss
// Method's variables file brings in Bootstrap's breakpoint mixins, so the
// child's media queries use the same tiers as Method's blocks.
@import "../../../method/assets/scss/variables.scss";

h1 {
    font-size: 4rem;
    line-height: 1.05;

    // Below Method's tablet_min — the mobile tier.
    @include media-breakpoint-down(md) {
        font-size: 2.5rem;
    }
}

How Method is built to support that

  • Every block is dynamic. Method blocks render in PHP and save only their attributes (and inner blocks), never generated markup. A release can change what a block outputs without invalidating content already saved, which is what makes upgrading a site that has been live for years a folder swap rather than a migration.
  • Responsive settings are data. Per-tier values live in the block’s attributes; the CSS is generated from them on the server and once in the page. One block carries every breakpoint, so a layout is one block, not one per device.
  • Controls are opt-in. A tier is read only while it is enabled (MethodOptInControl), so blocks stay light and saved markup stays readable; the editor’s tier accents and tabs are described under Editor Integration.
  • One grid, in PHP and Sass. Bootstrap’s breakpoints and a 24-column grid, the same map kept in METHOD_OPTIONS for the blocks and in variables.scss for the stylesheets, so what a designer draws on a 24-column grid is what the Advanced Grid block and the child’s stylesheet both produce.
  • Extend, never fork. The parent is not edited. A project changes Method through the child’s configuration (METHOD_CHILD_OPTIONS), block styles, filters, patterns and plugins, which is what lets the parent be upgraded by replacing the method folder with the next release.

Where to go next