Using Atoms & Molecules - makeitworkpress/waterfall GitHub Wiki

The Waterfall theme uses the WP Components module, which uses atoms and molecules to build a website. An atom is a single, reusable and commonly used component. Think of modules such as a set of sharing buttons, a title, an image, a list of category terms and so forth.

The Waterfall theme incorporates a lot of hooks and filters in which you can add new atoms, and sometimes molecules. For more information on the exact configuration of molecules and atoms, the WP Components wiki can be consulted. WP Components is included by default in the Waterfall theme.

The following example will add a slider molecule to every page, where the image represents attachment ids. We will use the waterfall_main_content_begin action hook for this, at it executes just after the opening of the <main> HTML tag.

add_action('waterfall_main_content_begin', function() {

    MakeitWorkPress\WP_Components\Build::molecule('slider', [
        'attributes'    => [
            'class' => 'case-image-slider'
        ],
        'options'       => [
            'animation'     => 'slide',
            'controlNav'    => true,
            'directionNav'  => false,
            'smootHeight'   => false
        ],                    
        'slides' => [
            ['image' => 14],
            ['image' => 17]
        ]
    ]);

});

Again, for more information on the exact configuration of molecules, the WP Components wiki can be consulted.

The following script adds a small description within the title section of pages, after the other elements within this section. It uses the description atom and the waterfall_content_header_args Filter Hook to modify the arguments for a Post Header Molecule, a WP Components molecule.

add_filter('waterfall_content_header_args', function($args) {
    
    $args['atoms']['details'] = [
        'atom'          => 'description',
        'properties'    => ['description' => __('Description', 'language')]
    ];
    return $args;

}, 10, 1);

Again, for more information on the exact configuration of atoms, the WP Components wiki can be consulted.

You can find elaborate information on using filter and action hooks in Wiki Page for Filter and Action Hooks.