### Install Task CLI

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-starter-plugin

Installs the Task CLI globally using npm, which is required for running build tasks.

```bash
npm install -g @go-task/cli

```

--------------------------------

### Build Distribution Files

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-starter-plugin

Run the 'build' task to create an installable zip archive for WordPress and Joomla. Individual archives can be created using 'build-wordpress' or 'build-joomla'.

```bash
task build
```

```bash
task build-wordpress
task build-joomla
```

--------------------------------

### Setup WordPress Plugin

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-starter-plugin

Copies the necessary plugin files from the build folder to the plugin root for WordPress integration. This task should be run in the plugin root folder.

```bash
task setup-wordpress

```

--------------------------------

### Setup Joomla Plugin

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-starter-plugin

Copies the necessary plugin files from the build folder to the plugin root for Joomla integration. This task should be run in the plugin root folder.

```bash
task setup-joomla

```

--------------------------------

### Start a Style from Scratch with Less

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-child-themes

Import all necessary Less files, including platform styles, UIkit framework, the Master UIkit Theme, and YOOtheme Pro theme styles, to build a custom theme from the ground up.

```less
// Import platform specific styles for Wordpress or Joomla
@import "../../yootheme/less/platform.less";

// Import the UIkit framework
@import "../../yootheme/vendor/assets/uikit/src/less/uikit.less";

// Import the `Master` UIkit theme. It extends UIkit with variables and mixins for YOOtheme Pro.
@import "../../yootheme/vendor/assets/uikit-themes/master/_import.less";

// Import YOOtheme Pro theme specific styles
@import "../../yootheme/less/theme.less";

// Add custom Less code here


```

--------------------------------

### Advanced Settings Tab Definition

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-elements

This example shows the definition of the 'advanced' tab in `builder.php`, listing the fields that comprise the advanced settings.

```php
'advanced' => [
    'title' => 'Advanced',
    'fields' => [
        'name',
        'status',
        'source',
        'id',
        'class',
        'attributes',
        'css'
    ]
]
```

--------------------------------

### Add Menu Item to Customizer Panels

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-modules

Extend the customizer by adding a new panel to the 'Settings' section. This example adds 'My Panel' with a field and links it to the settings section.

```php
use YOOtheme\Config;

class SettingsListener
{
    public static function initCustomizer(Config $config)
    {
        $config->set('customizer.panels.my-panel', [
            'title'  => 'My Panel',
            'width'  => 400,
            'fields' => [
                'option_a' => [
                    'label' => 'Option A',
                    'description' => 'A description text.'
                ]
            ]
        ]);

        $config->set('customizer.sections.settings.fields.settings.items.my-panel', 'My Panel');
    }
}

```

--------------------------------

### Builder Field Definition Example

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-elements

This is an example of a field definition in `builder.php`, specifying properties like label, description, type, and options for a 'maxwidth' field.

```php
'maxwidth' => [
    'label' => 'Max Width',
    'description' => 'Set the maximum content width.',
    'type' => 'select',
    'options' => [
        'None' => '',
        'Small' => 'small',
        'Medium' => 'medium',
        'Large' => 'large',
        'X-Large' => 'xlarge',
        '2X-Large' => '2xlarge'
    ]
]
```

--------------------------------

### Group Field Layout Example

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-elements

Illustrates the 'group' field type for compactly arranging fields. It supports a 'divider' property and can contain other fields, typically with a label.

```php
'fields' => [
    'content' => [
        'label' => 'Content'
    ],
    'option_a' => [
        'label' => 'Select',
        'type' => 'select',
        'options' => [
            'Option 1' => 0,
            'Option 2' => 1,
            'Option 3' => 2
        ]
    ],
    'option_b' => [
        'label' => 'Checkbox',
        'type' => 'checkbox',
        'text' => 'Some text'
    ],
    'option_c' => [
        'label' => 'Text'
    ]
],
'fieldset' => [
    'default' => [
        'fields' => [
            'content',
            [
                'label' => 'Group 1',
                'type' => 'group',
                'divider' => true,
                'fields' => [
                    'option_a',
                    'option_b'
                ]
            ],
            [
                'label' => 'Group 2',
                'type' => 'group',
                'fields' => [
                    'option_a',
                    'option_b'
                ]
            ]
        ]
    ]
]
```

--------------------------------

### Grid Field Layout Example

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-elements

Demonstrates the 'grid' field type for arranging other fields within a layout. It includes a 'width' property for cell sizing and nested fields.

```php
'fields' => [
    'image' => [
        'label' => 'Image',
        'type' => 'image'
    ],
    'width' => [
        'label' => 'Width'
    ],
    'height' => [
        'label' => 'Height'
    ]
],
'fieldset' => [
    'default' => [
        'fields' => [
            'image',
            [
                'description' => 'A description text below the grid.',
                'type' => 'grid',
                'name' => '_image_dimension',
                'width' => '1-2',
                'fields' => [
                    'width',
                    'height'
                ]
            ]
        ]
    ]
]
```

--------------------------------

### Loading Multiple Modules in config.php

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-child-themes

To organize extensive customizations, load multiple module definitions using the `$app->load` method. This example loads all bootstrap files from subdirectories within a 'modules' directory.

```php
<?php

$app->load(__DIR__ . '/modules/*/bootstrap.php');

return [];

```

--------------------------------

### Provide Data for Custom Type

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-sources

A data provider class to fetch objects for the custom type. The `get` method takes an ID and returns an object with the required fields.

```php
class MyTypeProvider
{
    public static function get($id)
    {
        // Query objects
        return (object) ['my_field' => 'the data'];
    }
}

```

--------------------------------

### Initialize Plugin Configuration

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-starter-plugin

Runs the create:plugin command within the newly created plugin directory to generate initial plugin files and metadata. You will be prompted for plugin details.

```bash
composer create:plugin

```

--------------------------------

### Initialize Git Repository

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-starter-plugin

Use this command to initialize a new Git repository for your plugin, setting the default branch to 'main'.

```bash
git init -b main
```

--------------------------------

### Create New Plugin with Composer

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-starter-plugin

Creates a new YOOtheme starter plugin using Composer's create-project command. Replace PLUGIN_NAME with your desired plugin name.

```bash
composer create-project yootheme/starter-plugin PLUGIN_NAME

```

--------------------------------

### Configure Plugin Metadata

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-starter-plugin

Edit the .env file to change plugin metadata such as title, name, version, and description. After changes, re-run setup tasks and the build task.

```dotenv
TITLE='My Plugin'
NAME='myplugin'
VERSION='0.0.1'
DESCRIPTION='Lorem ipsum'
DATE='{{ now | date "2006-01-02" }}'
COPYRIGHT='Copyright (C)'
LICENSE='GNU General Public License'
AUTHOR='My Company'
AUTHOREMAIL='me@example.com'
AUTHORURL='https://example.com'
```

--------------------------------

### Initialize Custom GraphQL Sources

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-sources

The `initSource` listener method is called during schema initialization. Use `Source::objectType` to add custom types and `Source::queryType` to make them queryable.

```php
class SourceListener
{
    public function initSource($source)
    {
        $source->objectType('MyType', MyType::config());
        $source->queryType(MyQueryType::config());
    }
}

```

--------------------------------

### Register Source Listener for Custom Sources

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-sources

Register the 'source.init' event to initialize custom GraphQL sources. This involves including necessary listener and type provider classes.

```php
include_once __DIR__ . '/src/SourceListener.php';
include_once __DIR__ . '/src/MyTypeProvider.php';
include_once __DIR__ . '/src/Type/MyType.php';
include_once __DIR__ . '/src/Type/MyQueryType.php';

return [

    'events' => [

        'source.init' => [
            SourceListener::class => ['initSource']
        ]

    ]

];

```

--------------------------------

### Basic Module Definition

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-modules

A minimal module definition file. This PHP file should return an array with configuration options for the module.

```php
<?php

return [

    // Set theme configuration values
    'theme' => [

    ],

    // Register event handlers
    'events' => [

    ]

];

```

--------------------------------

### UIkit Less Variable Mapping Example

Source: https://yootheme.com/support/yootheme-pro/wordpress/style-variables

See how UIkit component variables can be mapped to global variables or calculated based on other properties, demonstrated with the primary button background color.

```less
@button-primary-background: @global-primary-background;
```

--------------------------------

### Defining Field Order and Layout

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-elements

Sets the order and layout of fields within the element's editing interface in the page builder. This example places 'my_field' in the default fieldset.

```php
'fieldset' => [
    'default' => [
        'fields' => [
            'my_field'
        ]
    ]
]

```

--------------------------------

### Add Media Button with Multiple Media Types

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-elements

Configure the 'media' property as an array to support multiple media types. Each type can have its own 'item' configuration for mapping media properties.

```php
'fields' => [
    'content' => [
        'label' => 'Items',
        'type' => 'content-items',
        'item' => 'example_item',
        'media' => [
            ['type' => 'image', 'item' => ['title' => 'title', 'image' => 'src']],
            ['type' => 'video', 'item' => ['title' => 'title', 'video' => 'src']],
        ],
    ]
]
```

--------------------------------

### Add Menu Item to Customizer Sections

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-modules

Use the YOOtheme\Config service to add a new menu item to the customizer's sections. This example adds 'My Section' with a single field.

```php
use YOOtheme\Config;

class SettingsListener
{
    public static function initCustomizer(Config $config)
    {
        $config->set('customizer.sections.my-section', [
            'title'  => 'My Section',
            'width'  => 400,
            'priority'  => 100,
            'fields' => [
                'option_a' => [
                    'label' => 'Option A',
                    'description' => 'A description text.'
                ]
            ]
        ]);
    }
}

```

--------------------------------

### Recommended PHP Settings in php.ini

Source: https://yootheme.com/support/yootheme-pro/wordpress/installation-issues

Modify the `php.ini` file to increase PHP resource limits for better performance during installation. These settings are recommended for handling larger data and longer script execution.

```ini
post_max_size = 24M
upload_max_filesize = 24M
max_execution_time = 60
memory_limit = 128M
```

--------------------------------

### Basic Module Definition in config.php

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-child-themes

Use this file to define custom modules. It should return an array with the module definition.

```php
<?php

return [

    // Module definition

];

```

--------------------------------

### Add a Custom Panel to an Existing Section

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-modules

Extend the 'Settings' section with a new panel, defining its title, width, and fields using JSON.

```json
 {
    "sections": {
        "settings": {
            "fields": {
                "settings": {
                    "items": {
                        "my-panel": "My Panel"
                    }
                }
            }
        }
    },
    "panels": {
        "my-panel": {
            "title": "My Panel",
            "width": 400,
            "fields": {
                "option_b": {
                    "label": "Option B",
                    "description": "A description text."
                }
            }
        }
    }
}


```

--------------------------------

### Configure Placeholder Item Props with Field Values

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-elements

Customize placeholder items by setting specific field values within the 'props' object for each child element. This example shows setting 'position_x' and 'position_y' for multiple placeholder items.

```php
'placeholder' => [
    'children' => [
        ['type' => 'example_item', 'props' => ['position_x' => 20, 'position_y' => 50]],
        ['type' => 'example_item', 'props' => ['position_x' => 50, 'position_y' => 20]],
        ['type' => 'example_item', 'props' => ['position_x' => 70, 'position_y' => 70]],
    ],
]
```

--------------------------------

### Compile Less Sources with StylerConfig Event

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-modules

Listen for the StylerConfig event and set 'update' to true to trigger Less source compilation upon opening the customizer. This requires a StyleListener class.

```php
use YOOtheme\Theme\Styler\StylerConfig;

include_once __DIR__ . '/src/StyleListener.php';

return [

    'events' => [
        StylerConfig::class => [StyleListener::class => 'config'],
    ]

];

```

```php
use YOOtheme\Theme\Styler\StylerConfig;

class StyleListener
{
    public static function config(StylerConfig $config): StylerConfig
    {
        if (/* Your conditional code */) {
            // Style needs to be re-compiled
            $config['update'] = true;
        }

        return $config;
    }
}

```

--------------------------------

### Configure Update Server

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-starter-plugin

Set UPDATEURI and other package information in the .env file to enable 1-click updates. Upload generated files to the UPDATEURI and zip archives to DOWNLOADURL.

```dotenv
# Update server
UPDATEURI='https://example.com/updates'

# Package information
STABILITY='stable'
DOWNLOADURL='https://example.com/downloads'
PHPMINIMUM='7.4'
JOOMLAMINIMUM='(5\.[01]|4\.[01234]|3\.10)\.'
WORDPRESSMINIMUM='6.2'
```

--------------------------------

### Customize an Existing Style with Less

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-child-themes

Import a base style and add custom Less code to modify its appearance. Ensure the path to the base style is correct.

```less
// Import a style, for example `Fuse`
@import "../../yootheme/less/theme.fuse.less";

// Add custom Less code here

```

--------------------------------

### Match Template to View

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-templates

Implement custom matching logic for templates by listening to the `builder.template` event. Return an array with the `type` and `query` of the matching template definition, and optionally pass parameters.

```php
<?php

namespace MyApp;

class TemplateListener
{
    public static function matchTemplate($view, $tpl)
    {
        $layout = $view->getLayout();
        $context = $view->get('context');

        // match context and layout from view object
        if ($context === 'com_example.index' && $layout === 'default' && !$tpl) {

            // get current item from view, like an Article object
            $item = $view->get('item');

            // return type, query and parameters of the matching view
            return [
                'type' => $context,
                'query' => ['my_field' => $item->my_prop],
                'params' => ['item' => $item],
            ];
        }
    }
}

```

--------------------------------

### Enable Dynamic Content Mapping

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-elements

Set the 'source' property to `true` on a field to allow it to map dynamic content from a content source.

```php
'fields' => [
    'content' => [
        'label' => 'Content',
        'description' => 'A text field that can be mapped to a field of a content source.',
        'source' => true
    ]
]
```

--------------------------------

### Create a New Element

Source: https://yootheme.com/support/yootheme-pro/wordpress/developers-starter-plugin

Use this command to create a new element, replacing ELEMENT_NAME with your desired element name. You can optionally specify a module.

```bash
composer create:element ELEMENT_NAME
```

```bash
composer create:element ELEMENT_NAME MODULE_NAME
```