Modules and Events

Create your own module to extend or customize YOOtheme Pro.

YOOtheme Pro uses Modules to set up its application code. The code is structured into many single modules. This modular architecture helps to keep our code base clean and tidy. In a child theme, you can also use your own custom module to extend or modify YOOtheme Pro’s functionality.

The module definition is used to provide bootstrapping, routing and other configuration options. Here you can listen for events, add custom classes and your own controllers.

Adding Modules

Simply create a file called config.php in your child theme and make sure it returns a PHP array. This array acts as the module definition. Two array keys are required: name and main.


return [

    // Unique module name
    'name' => 'yootheme/child',

    // Bootstrap code, executed when module is loaded
    'main' => function () {
        // Executed when child theme is active

    // Listen to any events triggered by YOOtheme Pro
    'events' => [

        '' => function ($theme) {
            // Before theme is rendered (regular site view)

        'theme.admin' => function ($theme) {
            // Before customizer is rendered (admin view)

        'view' => function () {
            // Before a layout is rendered (always)



Asset Files

To add custom asset files in your child theme, listen for the event in your custom module definition. Use the add function of the Asset Managers for styles and scripts to add your files on each front-end site view. The first parameter is a unique identifier for the asset. The second parameter is the path of the script

'' => function ($theme) {

    $this->app['styles']->add('my-identifier', 'assets/css/custom.css');
    $this->app['scripts']->add('my-identifier', 'assets/js/custom.js');


Note Internally, styles and scripts each work with their own Asset Manager. As these are separate from each other, you can assign the same name to a CSS and JS file without conflict (both called my-identifier in the above example). However, no two scripts or stylesheets may have the same identifier.

Theme Settings

Each module in YOOtheme Pro brings its own configuration. Those configurations may be modified and extended during the application bootstrap.

Retrieve a module

All modules are handled by the Module Manager and any module can be retrieved by its name.

'theme.init' => function ($theme) {

    $module = $this->app['modules']->get('yootheme/settings');


Read config

To read the config of a module, you can access the config property of the module instance. This object is the result of both the default config stored inside the index.php and the module’s corresponding config file in /config/MODULE_NAME.php.

'theme.init' => function ($theme) {

    $config = $this->app['modules']->get('yootheme/settings')->config;


Modify config

To modify a module config, you'll have to read the config as shown above and then set or merge new values into it.

'theme.init' => function ($theme) {


        'defaults' => [
            'lazyload' => false

    ], true);


The example above will change the default value for the lazyload option to false.

YOOtheme Pro’s config values can be accessed through the theme module yootheme/theme, which is also passed as the first parameter to the the theme events. Here you can read or modify values directly.

'theme.init' => function ($theme) {

    // Gets a theme config value
    $myConfigValue = $theme->get('my-config-value');

    // Sets a theme config value
    $theme->set('my-config-value', 'foo');


Customizer config

The customizer config is loaded using the application config service. The customizer configuration values are loaded from each modules config/customizer.json file. For example vendor/yootheme/theme/config/customizer.json You can access its values through the customizer namespace and get/set a value from a deeply nested array using "dot" notation.

'theme.init' => function ($theme) {

    // Gets the registered panels for the customizer

    // Adds a new panel called "My Panel" to the customizer
    $this->app['config']->set('', [
        'title'  => 'My Panel',
        'width'  => 400,
        'fields' => [
            'my-field' => [
                'label' => 'My Field',
                'description' => 'My Field\'s Description.',

    // Adds the panel to the menu in the "settings" section
    $this->app['config']->set('', 'My Panel');


The example above will add a panel my-panel to the settings panel of the customizer.

YOOtheme Pro Documentation