NopioModal Class Documentation

Overview

The NopioModal Class is a utility class that manages modal windows in the Nopio Master Theme. It provides a centralized way to handle and output modal content across the theme.

Integration

1. Theme Integration

The class is automatically included in the theme through functions.php:

include_once dirname(__FILE__) . '/inc/services/nopio-modal.php';

2. Template Integration

All HTML templates should include the modal output block just below the footer:

<!-- wp:acf/layout-footer-2 {"name":"acf/layout-footer-2"} /-->
<!-- wp:acf/layout-modals {"name":"acf/layout-modals"} /-->

3. Rules

Modal Template Structure

captureTemplatePart() should be used with templates located in parts/modal-{name}.php
Global modals should be implemented inside layout/modals blocks
Use the following structure for global modals:

<?php 
    //Global modals
    NopioModal::captureTemplatePart('parts/modal', 'get-in-touch');
?>
 
<?= NopioModal::outputModals() ;?>

Template Organization

Individual modal templates: parts/modal-{name}.php
Global modal blocks: layout/modals directory
Always output modals after all modal captures are complete

Class Structure

Properties

private static $modals: Array to store modal content

Methods

1. `addModal($content)`

Adds modal content to the modals array.

public static function addModal($content)

2. `getModals()`

Retrieves all stored modals.

public static function getModals()

3. `captureTemplatePart($template, $name = null, $args = [])`

Captures a template part's output and adds it as a modal.

public static function captureTemplatePart($template, $name = null, $args = [])

4. `outputModals()`

Outputs all stored modals.

public static function outputModals()

Usage Examples

1. Adding a Modal

NopioModal::addModal('<div class="modal">Modal content</div>');

2. Capturing Template Part as Modal

NopioModal::captureTemplatePart('parts/modal', 'video', ['video_code' => $code, 'video_counter' => $video_counter]);

3. Outputting Modals

echo NopioModal::outputModals();

Available Modal Types

The theme includes several pre-built modal types:

Video Modal
- Used for embedding videos
- Triggered with data-bs-toggle="modal" data-bs-target="#modal-video-embed-{id}"
Search Modal
- Used for site search functionality
- Triggered with data-bs-toggle="modal" data-bs-target="#modal-search"
Get in Touch Modal
- Used for contact forms
- Triggered with data-bs-toggle="modal" data-bs-target="#modal-get-in-touch"

Best Practices

Modal Placement
- Always include the modal block (acf/layout-modals) just after the footer in your templates
- This ensures modals are available globally across the site
Modal Content
- Use the captureTemplatePart() method when adding template-based modals
- Keep modal content in separate template files for better organization
Modal Triggers
- Use Bootstrap's modal trigger attributes: data-bs-toggle="modal" data-bs-target="#modal-id"
- Ensure unique IDs for each modal instance
Performance
- Modals are loaded with the page but only shown when triggered
- Consider lazy loading for heavy modal content

Example Implementation

// In your template file
<?php
// Add a video modal
$args = array(
    'video_code' => $video_code,
    'video_counter' => rand()
);
NopioModal::captureTemplatePart('parts/modal', 'video', $args);
 
// Add a custom modal
NopioModal::addModal('
    <div class="modal" id="custom-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    Custom modal content
                </div>
            </div>
        </div>
    </div>
');
?>

Related Files

wp-content/themes/nopio_master_theme/inc/services/nopio-modal.php - Main class file
wp-content/themes/nopio_master_theme/blocks/layout/modals/ - Modal block implementation
wp-content/themes/nopio_master_theme/templates/single-block.html - Template example with modal integration

Nopio Alm Filter Swiper