Modular Flexible Content System for ACF Pro

acf, dekode-hogan, hogan, php, wordpress-plugin


Hogan Build Status

Modular Flexible Content System for ACF Pro


Install Hogan WordPress plugin using Composer by requiring any of the modules listed below or just the core framework using:

$ composer require dekodeinteraktiv/hogan-core

Each module and the core framework itself will be installed as seperate WordPress plugins in the wp-content/plugin folder.

Core Framework Modules

Module Installation
Text composer require dekodeinteraktiv/hogan-text
Forms composer require dekodeinteraktiv/hogan-form
Embed composer require dekodeinteraktiv/hogan-embed
Gallery composer require dekodeinteraktiv/hogan-gallery
Grid composer require dekodeinteraktiv/hogan-grid
Content Grid composer require dekodeinteraktiv/hogan-content-grid
Link list composer require dekodeinteraktiv/hogan-linklist
Links composer require dekodeinteraktiv/hogan-links
Banner composer require dekodeinteraktiv/hogan-banner
Image composer require dekodeinteraktiv/hogan-image
Expandable list composer require dekodeinteraktiv/hogan-expandable-list
Table composer require dekodeinteraktiv/hogan-table
Parallax Image composer require dekodeinteraktiv/hogan-parallax-image
Simple Posts composer require dekodeinteraktiv/hogan-simple-posts

Adding modules

Adding custom modules can be done using the register_module() function in Core. Create a new module that extends the \Dekode\Hogan\Module class and add it to the Hogan repository like this:

class DemoModule extends extends \Dekode\Hogan\Module {


add_action( 'hogan/include_modules', function( \Dekode\Hogan\Core $core ) {
  require_once 'class-demomodule.php';
  $core->register_module( new DemoModule() );
}, 10, 1 );


By default you will get a ACF Flexible Content group with all activated modules for post type page only. The built in wysiwyg editor will be removed.

Adding Hogan to other post types.

Hogan is by default added to pages. Use the filter hogan/field_group/default/supported_post_types to declare support to other post types.

add_filter( 'hogan/field_group/default/supported_post_types', function( array $post_types ) : array {
	$post_types[] = 'post'; // Add Hogan support for posts.
	return $post_types;
}, 10, 2 );

Customizing the default field group

All field groups, including the default one, can be filtered using the hogan/field_group/<name>/args filter. The default args are:

'name'                           => 'default',
'title'                          => __( 'Content Modules', 'hogan-core' ),
'modules'                        => [], // All modules.
'location'                       => [],
'hide_on_screen'                 => [],
'fields_before_flexible_content' => [],
'fields_after_flexible_content'  => [],

Disable default field group

If you don't want to use the default field group, or for some other reason want to setup a customized field group yourself, field groups can be disabled with a filter.

add_filter( 'hogan/field_group/default/enabled', '__return_false' );

Adding custom field groups

Use the core function register_field_group() in action hogan/include_field_groups to register custom field groups.

add_action( 'hogan/include_field_groups', function( \Dekode\Hogan\Core $core ) {
  $args = []; // Your field group args.
  $core->register_field_group( $args );
}, 10, 1 );

See Customizing the default field group above for possible arguments.


This example demonstrates how to add a custom field group with just the text module for post type post.

add_action( 'hogan/include_field_groups', function( \Dekode\Hogan\Core $core ) {
  $core->register_field_group( [
    'name' => 'field_group_1',
    'title' => __( 'Field group title', 'text-domain' ),
    'modules' => [ 'text' ],
    'location' => [
		  'param' => 'post_type',
		  'operator' => '==',
          'value' => 'post',
  ] );
}, 10, 1);

Adding header and lead to modules

You can turn on a heading and/or lead field for every single module. Default is no heading or lead. The heading and lead will be included before module specific fields. E.g. to enable heading and lead for Hogan Grid use:

add_filter( 'hogan/module/text/heading/enabled', '__return_true' );
add_filter( 'hogan/module/text/lead/enabled', '__return_true' );


Hogan core comes with a minimal stylesheet.

The width of hogan modules is by default set to 1360px. This can be changed using the filter hogan/frontend/content_width:

add_filter( 'hogan/frontend/content_width', function( int $content_width ) {
	return 1920;

If you don't want the stylesheet in your theme you can deregister it.

wp_deregister_style( 'hogan-core' );


Modules content is by default indexed as Content by SearchWP. This can be disabled using:

add_filter( 'hogan/searchwp/index_modules_as_post_content', '__return_false' );

Running tests locally

Running tests locally can be beneficial during development as it is quicker than committing changes and waiting for Travis CI to run the tests.

We’re going to assume that you have installed git, svn, php, apache and PHPUnit

  1. Initialize the testing environment locally: cd into the plugin directory and run the install script (you will need to have wget installed).

    bin/ wordpress_test root '' localhost latest

    The install script first it installs a copy of WordPress in the /tmp directory (by default) as well as the WordPress unit testing tools. Then it creates a database to be used while running tests. The parameters that are passed to setup the test database.

    • wordpress_test is the name of the test database (all data will be deleted!)
    • root is the MySQL user name
    • '' is the MySQL user password
    • localhost is the MySQL server host
    • latest is the WordPress version; could also be 3.7, 3.6.2 etc.
  2. Run the plugin tests:


For more info see