Skip to main content

Creating your first component

All components are located under the Components directory relative to the theme root. You should create a component by creating a well-named directory and include the following (if not empty):

Components/MyWellNamedComponent
├── assets/           # component's specific assets
├── index.twig        # structure
├── functions.php     # register component's functions and fields
├── script.js         # scripts
└── _style.scss       # styles

Initialize component​

Use the functions.php file to register your component.

functions.php
namespace Loonar\Components\MyWellNamedComponent;

If your component will use custom fields, then you need to add the following:

functions.php
namespace Loonar\Components\MyWellNamedComponent;

use ACFComposer\ACFComposer;

add_filter('ACF/Components/MyWellNamedComponent', function ($fields) {
  return $fields[] = [
    'label' => 'My Well Named Component',
    'name' => 'my_well_named_component',
    'type' => 'group',
    'instructions' => '',
    'required' => 0,
    'wrapper' => [
      'width' => '',
      'class' => '',
      'id' => '',
    ],
    'layout' => 'block',
    'wpml_cf_preferences' => WPML_COPY_ONCE,
    'sub_fields' => [
      // ...component's fields
    ],
  ];

  return $fields;
});

Initialize Loonar​

Use the _style.scss file to register Loonar. By doing so, you will have access to all functions, mixins and placeholder provided by Loonar.

_style.scss
@use '~@loonar' as *;

By using the as * at the end of module declaration, you will have direct access to loonar functions, mixins and placeholders, without the need to use namespace.

Using Loonar​

There are many functions, mixins and placeholder to use in your component.