PHPackages                             helsingborg-stad/modularity - 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. [Framework](/categories/framework)
4. /
5. helsingborg-stad/modularity

ActiveWordpress-plugin[Framework](/categories/framework)

helsingborg-stad/modularity
===========================

Modular component system for WordPress

6.90.41(6mo ago)926.4k↓50%11[5 issues](https://github.com/helsingborg-stad/Modularity/issues)[4 PRs](https://github.com/helsingborg-stad/Modularity/pulls)8MITPHPPHP ^8.0CI failing

Since Mar 9Pushed 3mo ago12 watchersCompare

[ Source](https://github.com/helsingborg-stad/Modularity)[ Packagist](https://packagist.org/packages/helsingborg-stad/modularity)[ RSS](/packages/helsingborg-stad-modularity/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (17)Versions (1031)Used By (8)

> ⚠️ **Deprecation Notice: Modularity Plugin**
>
> The **Modularity** plugin has been **deprecated**.
>
> All features have been moved into the [**Municipio Theme**](https://github.com/helsingborg-stad/municipio), where ongoing updates and improvements will continue.
>
> This plugin will no longer receive updates or maintenance.

Modularity
==========

[](#modularity)

Modular component system plugin for WordPress. Drag and drop the bundled modules or your custom modules to your page layout.

Download plugin.
----------------

[](#download-plugin)

To download a complete out of the box working plugin without the need to compile or fetch dependencies.
Go [here](https://github.com/helsingborg-stad/Modularity/releases) and download the `full-release.zip` from the latest version.

Creating modules
----------------

[](#creating-modules)

To create your very own Modularity module you simply create a plugin with a class that extends our Modularity\\Module class.

A module actually is the same as a custom post type. However we've added a few details to enable you to use them as modules.

Use the `$this->register()` method to create a very basic module.

Here's a very basic example module for you:

```
/*
 * Plugin Name: Modularity Article Module
 * Plugin URI: -
 * Description: Article module for Modularity
 * Version: 1.0
 * Author: Modularity
 */

namespace MyArticleModule;

class Article extends \Modularity\Module
{
    public function __construct()
    {
        $id = 'article';
        $nameSingular = 'Article';
        $namePlural = 'Articles';
        $description = 'Outputs a full article with title and content';
        $supports = array('editor'); // All modules automatically supports title
        $icon = '[BASE-64 encoded svg data-uri]';
        $plugin = '/path/to/include-file.php' // CAn also be an array of paths to include
        $cacheTTL = 60*60*24 //Time to live for fragment cache (stored in persistent object store redis / memcached).

        $this->register(
            $id,
            $nameSingular,
            $namePlural,
            $description,
            $supports,
            $icon,
            $plugin,
            $cacheTTL
        );
    }
}

new \MyArticleModule\Article;
```

#### Module templates

[](#module-templates)

You can easily create your own module templates by placing them in: `/wp-content/themes/[my-theme]/templates/module/`.

Name your template file with the following pattern: `modularity-[module-id].php`. You can get your module's id from the Modularity options page.

#### Module boilerplate

[](#module-boilerplate)

You can download our module boilerplate. It will be a good starting point for any custom module that you would like to build.

[Download it here (NOT AVAILABLE YET)](http://www.helsingborg.se)

Action reference
----------------

[](#action-reference)

#### Modularity

[](#modularity-1)

> Runs when Modularity core is loaded. Typically used to add custom modules.

*Example:*

```
add_action('Modularity', function () {
    // Do your thing
});
```

#### Modularity/Module/\[MODULE SLUG\]/enqueue

[](#modularitymodulemodule-slugenqueue)

> Enqueue js or css only for the add and edit page of the specified module.

*Example:*

```
add_action('Modularity/Module/mod-article/enqueue', function () {
    // Do your thing
});
```

#### Modularity/Options/Module

[](#modularityoptionsmodule)

> Action to use for adding option fields to modularity options page. Use "Modularity/Options/Save" action to handle save of the option field added

*Example:*

```
add_action('Modularity/Options/Module', function () {
    echo '';
});
```

#### Modularity/save\_block

[](#modularitysave_block)

> Action triggered whenever a post or page is created or updated.

*Example:*

```
add_action('Modularity/save_block', function ($block, $post) {
    // Your code here
});
```

Filter reference
----------------

[](#filter-reference)

#### Modularity/Module/TemplateVersion3

[](#modularitymoduletemplateversion3)

> Enable preview of the upcoming version 3 views with BEM formatting. This may be used already when progressing towards BEM.

*Example:*

```
add_filter('Modularity/Module/TemplateVersion3', function(){return true;});
```

#### Modularity/Editor/WidthOptions

[](#modularityeditorwidthoptions)

> Filter module width options

*Params:*

```
$options      The default width options array ('value' => 'label')

```

*Example:*

```
add_filter('Modularity/Editor/WidthOptions', function ($options) {
    // Do your thing
    return $filteredValue;
});
```

---

#### Modularity/Editor/SidebarIncompability

[](#modularityeditorsidebarincompability)

> Enables the theme to add incompability indicators of specific module to an sidebar area. The user will not be able to drag and drop to unsupported areas. This filter may simplify the theme developers work by ruling out some cases.

*Params:*

```
$moduleSpecification      The default options for the module post object.

```

*Example:*

```
add_filter('Modularity/Editor/WidthOptions', function ($moduleSpecification) {

    $moduleSpecification['sidebar_compability'] = array("content-area-top");

    return $moduleSpecification;
});
```

---

#### Modularity/Display/BeforeModule

[](#modularitydisplaybeforemodule)

> Filter module sidebar wrapper (before)

*Params:*

```
$beforeModule     The value to filter
$args             Arguments of the sidebar (ex: before_widget)
$moduleType       The module's type
$moduleId         The ID of the module

```

*Example:*

```
add_filter('Modularity/Display/BeforeModule', function ($beforeModule, $args, $moduleType, $moduleId) {
    // Do your thing
    return $filteredValue;
});
```

---

#### Modularity/Display/AfterModule

[](#modularitydisplayaftermodule)

> Filter module sidebar wrapper (after)

*Params:*

```
$afterModule      The value to filter
$args             Arguments of the sidebar (ex: before_widget)
$moduleType       The module's type
$moduleId         The ID of the module

```

*Example:*

```
add_filter('Modularity/Display/AfterModule', function ($afterModule, $args, $moduleType, $moduleId) {
    // Do your thing
    return $filteredValue;
});
```

---

#### Modularity/Module/Container/Sidebars

[](#modularitymodulecontainersidebars)

> Container wrapper: Filter what sidebars that should support a containing wrapper on some modules

*Params:*

```
$sidebars      A array of sidebar id's

```

---

#### Modularity/Module/Container/Modules

[](#modularitymodulecontainermodules)

> Container wrapper: Filter what modules that should support a containing wrapper

*Params:*

```
$modules      A array of module ids (post-type names)

```

---

#### Modularity/Module/Container/Template

[](#modularitymodulecontainertemplate)

> Container wrapper: Filter the template with html that should be wrapped around each module

*Params:*

```
$markup      A string with markup containing {{module-markup}} replacement key

```

---

#### Modularity/Module/TemplatePath & Modularity/Theme/TemplatePath

[](#modularitymoduletemplatepath--modularitythemetemplatepath)

> Modify (add/edit) paths where to look for module/theme templates Typically used for adding search path's for finding custom modules/theme templates.
>
> *Attention: Unsetting paths may cause issues displaying modules. Plase do not do this unless you know exacly what you are doing.*

*Params:*

```
$paths      The value to filter

```

*Example:*

```
add_filter('Modularity/Module/TemplatePath', function ($paths) {
    return $paths;
});

add_filter('Modularity/Theme/TemplatePath', function ($paths) {
    return $paths;
});
```

#### Modularity/Module/Classes

[](#modularitymoduleclasses)

> Modify the list of classes added to a module's main element

*Params:*

```
$classes      The classes (array)
$moduleType   The module type
$sidebarArgs  The sidebar's args

```

*Example:*

```
add_filter('Modularity/Module/Classes', function ($classes, $moduleType, $sidebarArgs) {
    $classes[] = 'example-class';
    return $classes;
});
```

#### Modularity/Display/Markup

[](#modularitydisplaymarkup)

> Module display markup

*Params:*

```
$markup      The markup
$module      The module post

```

*Example:*

```
add_filter('Modularity/Display/Markup', function ($markup, $module) {
    return $markup;
});
```

#### Modularity/Display/\[MODULE SLUG\]/Markup

[](#modularitydisplaymodule-slugmarkup)

*Params:*

```
$markup      The markup
$module      The module post

```

*Example:*

```
add_filter('Modularity/Display/Markup', function ($markup, $module) {
    return $markup;
});
```

#### Modularity/CoreTemplatesSearchTemplates

[](#modularitycoretemplatessearchtemplates)

> What template files to look for

*Params:*

```
$templates

```

*Example:*

```
add_filter('Modularity/CoreTemplatesSearchTemplates', function ($templates) {
    $templates[] = 'my-custom-template';
    return $templates;
});
```

#### Modularity/Module/Posts/Date

[](#modularitymodulepostsdate)

> Modify the displayed publish date in Post Modules

*Params:*

```
$date
$postId
$postType

```

*Example:*

```
add_filter('Modularity/Module/Posts/Date', function ($date, $postId, $postType) {
    return $date;
});
```

#### Modularity/Module/Posts/Slider/Arguments

[](#modularitymodulepostssliderarguments)

> Modify the slider arguments in Post Modules

*Params:*

```
$args['slider']['slidesPerPage']
$args['slider']['autoSlide']
$args['slider']['showStepper']
$args['slider']['repeatSlide']

```

*Example:*

```
add_filter('Modularity/Module/Posts/Slider/Arguments', function ($args) {
    return $args;
});
```

#### Modularity/Editor/ModuleCssScope

[](#modularityeditormodulecssscope)

> Allow editors to select a unique appeance (provided by a theme etc) for a module. Adds a single class to the module wrapper, to allow scoping of css styles.

*Params:*

```
$scopes - Previously declared scopes.

```

*Example:*

```
add_filter('Modularity/Editor/ModuleCssScope',function($scopes) {
        return array(
            'mod-posts' => array(
                's-buy-card' => __("Make this module sparkle!", 'modularity'),
                's-user-list' => __("A boring user list is what i see", 'modularity')
            )
        );
    });
```

#### Modularity/Display/viewData

[](#modularitydisplayviewdata)

*Params:*

```
$viewData - array

```

*Example:*

```
add_filter('Modularity/Display/viewData',function($data) {
        //do something
        return $data;
    });
```

#### Modularity/Display/{modulePostTypeSlug}/viewData

[](#modularitydisplaymoduleposttypeslugviewdata)

*Params:*

```
$viewData - array

```

*Example:*

```
add_filter("Modularity/Display/mod-posts/viewData", function($data) {
        //do something
        return $data;
    });
```

Module Attributes API
---------------------

[](#module-attributes-api)

Some module features are available by setting certain attributes on the module's outmost element.

### `data-module-refresh-interval`

[](#data-module-refresh-interval)

Creates an interval on which the module is refreshed via XHR by calling the REST API. This attribute also requires that the `data-module-id` attribute is set on the same element.

The value of the attribute should be the number of seconds on which to run the refresh interval.

Example:

```

    This content will get refreshed every 60 seconds.

```

Rest API
--------

[](#rest-api)

The WordPress REST API is extended with the following endpoints.

### `modularity/v1/modules/{id}`

[](#modularityv1modulesid)

This endpoint returns the markup for a specific module.

- Method: `GET`
- Params:
    - `id`: The ID of the module to retrieve.
- Response: The html markup of the module.

Upgrade
-------

[](#upgrade)

In some updates, database migrations might need to be run (will be in the release docs). To run the upgrade action on all sites in a multisite network, run the following command in the document root of your site.

```
wp site list --field=url --public=1 --archived=0 --deleted=0 --allow-root | xargs -n1 -I % wp modularity upgrade --url=% --allow-root

```

Or for a single site installation:

```
wp modularity upgrade

```

Constants
---------

[](#constants)

### `MODULARITY_DISABLE_FRAGMENT_CACHE`

[](#modularity_disable_fragment_cache)

Disabling the built-in fragment cache means that each module's output will not be stored as an HTML cache. As a result, every time a visitor reloads the page, each module will have to be rendered again. However, it is important to consider this option only if you do not have any object cache enabled, such as Redis or Memcached. We strongly advise enabling the fragment cache feature in your application to enhance performance and caching efficiency, allowing modules to be rendered more quickly and reducing the need for repetitive rendering upon page reloads.

By defining this as true, cache will be turned off. Default: Undefined.

If enabled, each cached module will be rendered with a timestamp and cache ID in the following format:

Tested with support from BrowserStack
-------------------------------------

[](#tested-with-support-from-browserstack)

This software is tested with the awesome tools from Browserstack.

[![](https://camo.githubusercontent.com/5318348d37eb32d113ae30b463d1cd8e98afbe18ea6046794d2eb8508e00a41a/68747470733a2f2f75747665636b6c696e672e68656c73696e67626f72672e73652f77702d636f6e74656e742f75706c6f6164732f73697465732f31392f323031382f30392f62726f77736572737461636b2d6c6f676f2e706e67)](https://browserstack.com)

###  Health Score

58

—

FairBetter than 98% of packages

Maintenance63

Regular maintenance activity

Popularity34

Limited adoption so far

Community35

Small or concentrated contributor base

Maturity88

Battle-tested with a long release history

 Bus Factor2

2 contributors hold 50%+ of commits

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 ~4 days

Total

909

Last Release

203d ago

Major Versions

1.7.20 → v2.x-dev2017-04-11

2.13.3 → 3.0.12023-09-25

3.6.2 → 4.0.02023-10-11

4.1.2 → 5.0.02023-10-12

5.23.3 → 6.0.02024-02-20

### Community

Maintainers

![](https://www.gravatar.com/avatar/f46fe64973c3e89d15c745c0bf601c25983bafea81d30e64d4bf813a6f8c8c7c?d=identicon)[sebastianthulin](/maintainers/sebastianthulin)

---

Top Contributors

[![NiclasNorin](https://avatars.githubusercontent.com/u/103985736?v=4)](https://github.com/NiclasNorin "NiclasNorin (670 commits)")[![sebastianthulin](https://avatars.githubusercontent.com/u/797129?v=4)](https://github.com/sebastianthulin "sebastianthulin (492 commits)")[![Svanmark](https://avatars.githubusercontent.com/u/457482?v=4)](https://github.com/Svanmark "Svanmark (163 commits)")[![annalinneajohansson82](https://avatars.githubusercontent.com/u/232372534?v=4)](https://github.com/annalinneajohansson82 "annalinneajohansson82 (138 commits)")[![alexanderbomanskoug2](https://avatars.githubusercontent.com/u/39676080?v=4)](https://github.com/alexanderbomanskoug2 "alexanderbomanskoug2 (108 commits)")[![thorbrink](https://avatars.githubusercontent.com/u/1064724?v=4)](https://github.com/thorbrink "thorbrink (103 commits)")[![silvergrund](https://avatars.githubusercontent.com/u/4200504?v=4)](https://github.com/silvergrund "silvergrund (99 commits)")[![cedrikvonheiroth](https://avatars.githubusercontent.com/u/64852452?v=4)](https://github.com/cedrikvonheiroth "cedrikvonheiroth (75 commits)")[![nRamstedt](https://avatars.githubusercontent.com/u/16800993?v=4)](https://github.com/nRamstedt "nRamstedt (64 commits)")[![Muckbuck](https://avatars.githubusercontent.com/u/11438804?v=4)](https://github.com/Muckbuck "Muckbuck (46 commits)")[![faejr](https://avatars.githubusercontent.com/u/752642?v=4)](https://github.com/faejr "faejr (28 commits)")[![michaelclaesson](https://avatars.githubusercontent.com/u/18331514?v=4)](https://github.com/michaelclaesson "michaelclaesson (24 commits)")[![ergr1001](https://avatars.githubusercontent.com/u/97021637?v=4)](https://github.com/ergr1001 "ergr1001 (17 commits)")[![mikael102030](https://avatars.githubusercontent.com/u/184387911?v=4)](https://github.com/mikael102030 "mikael102030 (15 commits)")[![malinkytta](https://avatars.githubusercontent.com/u/113056103?v=4)](https://github.com/malinkytta "malinkytta (14 commits)")[![mikael-stromgren](https://avatars.githubusercontent.com/u/8775561?v=4)](https://github.com/mikael-stromgren "mikael-stromgren (13 commits)")[![MegaBeth](https://avatars.githubusercontent.com/u/8707034?v=4)](https://github.com/MegaBeth "MegaBeth (8 commits)")[![yo-l1982](https://avatars.githubusercontent.com/u/154269?v=4)](https://github.com/yo-l1982 "yo-l1982 (7 commits)")[![rsj10736](https://avatars.githubusercontent.com/u/30775156?v=4)](https://github.com/rsj10736 "rsj10736 (7 commits)")[![perifer](https://avatars.githubusercontent.com/u/34488?v=4)](https://github.com/perifer "perifer (5 commits)")

---

Tags

deprecated

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/helsingborg-stad-modularity/health.svg)

```
[![Health](https://phpackages.com/badges/helsingborg-stad-modularity/health.svg)](https://phpackages.com/packages/helsingborg-stad-modularity)
```

###  Alternatives

[helsingborg-stad/municipio

A bootstrap theme for creating municipality sites.

4127.7k10](/packages/helsingborg-stad-municipio)[laravel/framework

The Laravel Framework.

34.7k509.9M17.0k](/packages/laravel-framework)[bagisto/bagisto

Bagisto Laravel E-Commerce

26.2k161.6k7](/packages/bagisto-bagisto)[laravel-lang/publisher

Localization publisher for your Laravel application

2167.7M24](/packages/laravel-lang-publisher)[krayin/laravel-crm

Krayin CRM

22.0k32.8k1](/packages/krayin-laravel-crm)[graham-campbell/markdown

Markdown Is A CommonMark Wrapper For Laravel

1.3k7.1M64](/packages/graham-campbell-markdown)

PHPackages © 2026

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