Custom Theme

In this guide, we will show you the simple steps to generate the final CSS file for your activated custom theme.

Add the following code to your theme’s functions.php file or a Snippet plugin.

Step 1: Adding the Compiler’s scanner

To tell Yabe Siul’s compiler to scan your custom theme, you need to add a custom scanner to the compiler. This scanner will be responsible for scanning your custom theme and returning the data to the compiler.

<?php

/**
 * @param array $providers The collection of providers that will be used to scan the design payload
 * @return array
 */
function register_my_theme_provider(array $providers): array {
    $providers[] = [
        'id' => 'my_theme',
        'name' => 'My Theme Scanner',
        'description' => 'Scans the current active theme',
        'callback' => 'scanner_my_theme_provider', // The function that will be called to get the data
        'enabled' => \Yabe\Siul\Utils\Config::get(sprintf(
            'integration.%s.enabled',
            'my_theme' // The id of this custom provider
        ), true),
    ];

    return $providers;
}

add_filter('f!yabe/siul/core/cache:compile.providers', 'register_my_theme_provider');

Step 2: Adding the Compiler’s scanner callback

Now that we have added the scanner, we need to define how the scanner will scan the custom theme and return the data to the compiler.

<?php

function scanner_my_theme_provider(): array {
    // The file with this extension will be scanned
    $file_extensions = [
        'php',
        'js',
        'twig',
        'html',
    ];

    $contents = [];
    $finder = new \_YabeSiul\Symfony\Component\Finder\Finder();

    // The current active theme
    $wpTheme = wp_get_theme();
    $themeDir = $wpTheme->get_stylesheet_directory();

    // Check if the current theme is a child theme and get the parent theme directory
    $has_parent = $wpTheme->parent() ? true : false;
    $parentThemeDir = $wpTheme->parent()->get_stylesheet_directory() ?? null;

    // Scan the theme directory according to the file extensions
    foreach ($file_extensions as $extension) {
        $finder->files()->in($themeDir)->name('*.' . $extension);
        if ($has_parent) {
            $finder->files()->in($parentThemeDir)->name('*.' . $extension);
        }
    }

    // Get the file contents and send to the compiler
    foreach ($finder as $file) {
        $contents[] = [
            'name' => $file->getRelativePathname(),
            'content' => $file->getContents(),
        ];
    }

    return $contents;
}

Now that we have added the scanner and the scanner callback, we can now generate the final CSS file for your custom theme.