PHPackages                             flexpress/component-layout - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. flexpress/component-layout

ActiveLibrary[Utility & Helpers](/categories/utility)

flexpress/component-layout
==========================

Layouts system using ACF for WordPress

v1.0.1(11y ago)1781PHP

Since Aug 13Pushed 11y ago1 watchersCompare

[ Source](https://github.com/FlexPress/component-layout)[ Packagist](https://packagist.org/packages/flexpress/component-layout)[ RSS](/packages/flexpress-component-layout/feed)WikiDiscussions master Synced today

READMEChangelogDependenciesVersions (3)Used By (0)

FlexPress layout component
==========================

[](#flexpress-layout-component)

Please note
-----------

[](#please-note)

This component requires the ACF Flexible Content Field, which can be purchased here . Install and activate before continuing.

Install with Pimple
-------------------

[](#install-with-pimple)

The layouts system is more complex than most of the other components as you have three main parts to it, of which are fairly compicated on their own:

- LayoutsController - Acts as a container for the layouts but also has helper functions to load data and output them.
- FlexibleLayout - ACF field.
- FlexibleLayoutProxy - As described in the comments below, require becuase of the way ACF fields work.

```
// Layout controller, you add your layouts here and use the controller to output them
$pimple["layoutController"] = function ($c) {
    return new LayoutController(array(
      // Add your layouts here
    ));
};

// an acf field that allows you to use the layoutController to add layouts instead of having to repeat them for each field group
$pimple["flexibleLayout"] = function ($c) {
    return new FlexibleLayout($c["layoutController"]);
};

// a proxy class that is required as when you create a acf field it runs all the hooks and we dont want to do that when we create an instance of it to pass to the fieldshelper, so we use a fieldproxy.
$pimple["flexibleLayoutProxy"] = function ($c) {
    return new FlexibleLayoutProxy($c);
};

```

You will also need to use the ACF component and register the field like this:

```
$pimple['ACFHelper'] = function ($c) {
    return new ACFHelper($c['objectStorage'], $c['objectStorage'], array(), array(
        $c["flexibleLayoutProxy"]
    ));
};

```

- Note the objectStorage config is a SPLObjectStorage class

Creating a concreate layout class
---------------------------------

[](#creating-a-concreate-layout-class)

- For each layout that exists you need to create a class that extends AbstractLayout, which means implementing the getLabel() and getMarkup() methods as a minimum.
- Here is a very simple example that output hello world:

```
class HelloWorld extends AbstractLayout {

  public function getLabel() {
    return "Hello world";
  }

  public function getMarkup() {
    echo "Hello world";
  }

}

```

Now that we have create a layout we need to add it to the LayoutsController:

```
$pimple["helloWorldLayout"] = function() {
  return new HelloWorld();
};

$pimple["layoutController"] = function ($c) {
    return new LayoutController(array(
      // Add your layouts here
      $c["helloWorldLayout"]
    ));
};

```

- You will want to output the layout somewhere so create a acf field group in the admin section, and select the field type as FlexibleLayout.
- Next go to wherever you setup the fieldgroup and click the add layout button, the popup should just show 'Hello world', click on that and it will inform you that there are no configurable options on it and save/publish the page.
- Finally you need to add the code to output the layouts:

```
$layoutsController = $pimple['layoutsController'];
$layoutsController->thePageLayouts('');

```

Make sure you change the <your\_field\_name\_here> to whatever you called your field when setting up the acf and you should be all done.

Advanced layouts
----------------

[](#advanced-layouts)

Previous examples showed very simple layouts with no options, this next example will show you how to add acf field to a layout and specifiy if the layout is available for the given post\_id:

```
class HelloUniverse extends AbstractLayout {

    public function getLabel() {
        return "Hello universe";
    }

    public function getMarkup() {
        echo "Hello universe";
        if($this->field['fp_show_time']) {
            echo "", date(), "";
        }

    }

    // make the layout only available on pages
    public function isAvailableOn($post_id) {
        return get_post_type($post_id) == 'page';
    }

    // to get this array, export a acf field group and grab everything in 'fields' => array(...etc
    public function getFields() {
        return array (
            array (
                'key' => 'field_53b132d9363ec',
                'label' => 'Show time',
                'name' => 'fp_show_time',
                'type' => 'true_false',
                'message' => '',
                'default_value' => 0
            )
        );
    }

}

```

So what has changed from the hello world layout? Well we have added the use of a field, we did this my implementing the getFields() method and returning the acf field. As the comment in the code mentions you can get that by exporting a acf field group and extracting everything for the key 'fields' => etc. We have then utilised that in the getMarkup by using the field propery, this is the acf field that you would get back if you did get\_field(<field\_name>).

Finally we have also implemented the isAvailableOn() method, this gives us the post id and we can return a boolean value for if it is available. In this example we have make it so the layout is only available on pages.

LayoutController
----------------

[](#layoutcontroller)

We have showed you how the AbstractLayout works but there are a few other methods on the LayoutController that might be useful.

### Public methods

[](#public-methods)

- theSiteLayouts($fieldName) - Outputs the layouts for the site, when stored in options instead of postmeta
- thePageLayouts($fieldName, $postId = false) - Outputs the layouts for the current page, you can specify the postId as the second param
- getLayoutObjects() - used by the by the two methods above to grab the layout data from the database.
- getFieldLayouts() - used by the FlexibleLayout field to get all the field objects.

### Protected methods

[](#protected-methods)

- outputLayouts($layouts) - Outputs the layouts, used by the other output methods like thePageLayouts, simply loops the given layouts and calls getMarkup() on them.

###  Health Score

29

—

LowBetter than 57% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity12

Limited adoption so far

Community5

Small or concentrated contributor base

Maturity64

Established project with proven stability

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~7 days

Total

2

Last Release

4335d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/2b794650fae4ab8d86e8550fa2e0cd8658323e07a8d78b3e96d0bc373bc88d2a?d=identicon)[timperry](/maintainers/timperry)

### Embed Badge

![Health badge](/badges/flexpress-component-layout/health.svg)

```
[![Health](https://phpackages.com/badges/flexpress-component-layout/health.svg)](https://phpackages.com/packages/flexpress-component-layout)
```

###  Alternatives

[joshhanley/livewire-autocomplete

An autocomplete dropdown for Livewire

103112.4k1](/packages/joshhanley-livewire-autocomplete)[leongrdic/smplang

A simple language written in PHP that evaluates expressions without eval

16831.4k4](/packages/leongrdic-smplang)[xiaodi/think-pinyin

ThinkPHP 中文转拼音扩展包

344.8k](/packages/xiaodi-think-pinyin)[gerardojbaez/vehicle

Laravel 5.2 package to work with vehicles data.

171.8k](/packages/gerardojbaez-vehicle)[radialapps/banner-warn

Show avatars in roundcube message list with warnings

131.5k](/packages/radialapps-banner-warn)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)