Including styles and scripts for an element

To give your elements style and dynamic functionality, you can include CSS and JavaScript files in the frontend as well as the backend.

Frontend assets

Frontend assets will be included on all pages where there's an instance of the element they belong to. This means that no CSS or JS files will be loaded unless actually required on that page.

To add frontend assets to an element type, simply add a frontend_assets() method to your element's class and enqueue files using Wordpress' usual wp_enqueue_style() and wp_enqueue_script() functions.

This method must be declared public static.

class Text_Element extends Layotter_Element
{
    // ...

    public static function frontend_assets() {
        wp_enqueue_style('handle', '/url/to/file.css');
        wp_enqueue_script('handle', '/url/to/file.js');
    }
}

Backend assets

Backend assets will be included on all admin pages where Layotter is enabled. This is necessary to make sure that assets are already available when adding a new element to a page.

You can add backend assets just like frontend assets, the only difference is the method's name: backend_assets().

This function must be declared public static.

Make sure to prefix your class names to prevent conflicts with classes used by other element types or Wordpress itself.

class Text_Element extends Layotter_Element
{
    // ...

    public static function backend_assets() {
        wp_enqueue_style('handle', '/path/to/backend-css-file.css');
        wp_enqueue_script('handle', '/path/to/backend-css-file.js');
    }
}