Download the PHP package helsingborg-stad/modularity without Composer

Modularity

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

Download plugin.

To download a complete out of the box working plugin without the need to compile or fetch dependencies.
Go here and download the full-release.zip from the latest version.

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:

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

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)

Action reference

Modularity

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

Example:

Modularity/Module/[MODULE SLUG]/enqueue

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

Example:

Modularity/Options/Module

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:

Modularity/save_block

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

Example:

Filter reference

Modularity/Module/TemplateVersion3

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

Example:

Modularity/Editor/WidthOptions

Filter module width options

Params:

Example:

Modularity/Editor/SidebarIncompability

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:

Example:

Modularity/Display/BeforeModule

Filter module sidebar wrapper (before)

Params:

Example:

Modularity/Display/AfterModule

Filter module sidebar wrapper (after)

Params:

Example:

Modularity/Module/Container/Sidebars

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

Params:

Modularity/Module/Container/Modules

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

Params:

Modularity/Module/Container/Template

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

Params:

Modularity/Module/TemplatePath & Modularity/Theme/TemplatePath

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:

Example:

Modularity/Module/Classes

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

Params:

Example:

Modularity/Display/Markup

Module display markup

Params:

Example:

Modularity/Display/[MODULE SLUG]/Markup

Params:

Example:

Modularity/CoreTemplatesSearchTemplates

What template files to look for

Params:

Example:

Modularity/Module/Posts/Date

Modify the displayed publish date in Post Modules

Params:

Example:

Modularity/Module/Posts/Slider/Arguments

Modify the slider arguments in Post Modules

Params:

Example:

Modularity/Editor/ModuleCssScope

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:

Example:

Modularity/Display/viewData

Params:

Example:

Modularity/Display/{modulePostTypeSlug}/viewData

Params:

Example:

Module Attributes API

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

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:

Rest API

The WordPress REST API is extended with the following endpoints.

modularity/v1/modules/{id}

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.

Constants

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

This software is tested with the awesome tools from Browserstack.