Bricks Widget Creator – Documentation

Do I need programming skills?

For the creation of Bricks widgets with the Widget Creator developer skills are generally recommended. You should have basic knowledge of HTML, CSS and JavaScript to take full advantage of it. However, creating widgets is possible even without programming knowledge. How? A good base for this is codepen.io, where you can find elements you like and create Bricks widgets from them. In this video I show you how.

What do I have to pay attention to when using variables?

The tool allows you to use the appropriate variables for all your created fields. These are the contents that the user can edit later in the Bricks Editor. In order to use the variables, each field you create needs a unique ID. The ID is automatically generated based on the field name once the input field is in focus. However, for some fields it may be necessary to assign more individual ID’s. By the way, variables can only be used in the HTML code block and are output with sanitization (kses) for security reasons.

Variable Types

There are different types of variables to express different things. Here you can find a list of the types. Our variable in this case is simply “custom”. On the left you will find the variable itselfs and on the right an example of how it can be used.

{{ custom }} {{ custom }}

This is a standard variable. It outputs the contents of a field where it is used.

{{ custom:class }} <h2 class="{{ custom:class }}">Headline</h2>

This variable type is mainly used for stylistic elements where it is advantageous to assign the element its own CSS class. So this variable is simply used as a CSS class and the styles directly affect the corresponding element.

{{ custom:var }} {% if {{custom:var}} == true %}

This variable type is only used for dynamic queries and statements, such as if statements or for loops or to store field values into php variables. This variable does not output any data here, but is regarded as a variable itself. For example, I can find out whether a certain field has been filled in by the user or not, or I can check whether a checkbox has been set to true and output different content accordingly.
Nice to know: The :var suffix outputs the raw value from the specific Bricks control. All controls are listed here: https://academy.bricksbuilder.io/topic/controls/. For the Color Control for example you get an object with the keys "hex" and "rgb". In this case {{ custom:var }}['rgb'] would give you the rgb value.

{{ custom:url }} <div style="background-url:({{ custom:url }})"></div>

This type is mainly used for media and outputs the URL of the media that the user uploaded.

{{ custom:bool }} {{ custom:bool }}

Used by checkboxes and returns TRUE if the checkbox is active and FALSE if not. It returns these values as boolean, not as string.

{{ custom:rgba }} <div style="background-color: {{ custom:rgba }}"></div>

Outputs the RGBA value of a color field, for example: rgba(0,0,0,.8);

{{ custom:attr }} <a {{ custom:attr }}></a>

Outputs only attributes for elements (eg. href="...", rel="..., target="...). This is mainly used for links.
Important: Bricks will override your own classes with dynamic classes. So it's best to use this variable as a wrapper.

Additional Logic

You have the possibility to include additional logic with the Widget Creator. For example, you can display a certain field only if another checkbox is set to True. Or you can loop a repeater field and set the output for all areas. Additional logic is provided with {% … %}

If Else Statement

				
					{% if {{custom:var}} == true %}
    Fires if the value of the control with the ID 'custom' is true
{% else %}
    Fires if not
{% endif %}
				
			

With elseif

				
					{% if {{custom:var}} == 'some value' %}
    Content
{% elseif {{custom:var}} == 'another value' %}
    Content
{% else %}
    Fires if not
{% endif %}
				
			

Structure / Style Wrapper

The Style Wrapper Class is very important. You can assign the styleWrapper class to one of your elements. For this element, the native Bricks controls in the “Style” tab and your pseuso class settings will have an effect. Otherwise the controls on the Style tab will do nothing.
				
					<div id="container">
    <h2 class="{{styleWrapper:class}}">Your Text</h2>
</div>
				
			

In this example the Style tab of the element has affect the h2 headline.

Pseudo Classes / Responsive Layouts

Basically, all the fields you create are static. They do not respond to pseudo-classes or custom screen resolutions. To make this possible, you must assign a dynamic class to this element. This is possible for several field types, such as Color, Slider, Number or Select. You create a dynamic class by activating “Use CSS Class”.

The classes are simply added as an element class as in the variable examples above. Now all you have to do is enter the property you want to address dynamically, for example “background-color”, and Bricks will respond dynamically to your styles!

PHP Syntax

For the code block you can use the basic PHP syntax. echo "Hello World" for example will output Hello World. This applies to the conditional logic as well as to the normal output. Here are a few very simple examples of how you could perform various functions.

In this example we want to show the first 5 letters of a string from a variable:

				
					echo substr({{ yourVariable:var }}, 0, 5);
				
			

As you can see, if we want to use field values to pass them as parameters in a function, we need the suffix :var. With this suffix you output the raw variable itself.

You also can use WordPress specific functions. For example we could create a loop for a custom post type which the user can choose from a select field:

				
					$q_query_args = array(
    'order' => 'DESC',
    'orderby' => 'date',
    'post_type' => array({{postType:var}})
);

// The Query
$query = new WP_Query($q_query_args);

// The Loop
if ( $query->have_posts() ) {
    while ( $query->have_posts() ) {
        $query->the_post();
        echo the_title();
    }
} else {
// There are no posts
}

// Reset Original Post Data
wp_reset_postdata();
				
			

In this example, we could create a select field with two Values: Page(page) and Post (post). Your code will refresh the user choice and output the correct loop data.

Notice: Please make sure to use the opening and closing PHP tags in the right places.

What about defining variables?

You also can define PHP variables with the related field values.

For example: What if we want to store the user input for a text field with the id cardTitle in a variable to use it later in multiple places? We could write the following:

				
					<?php $card_title = {{ cardTitle:var }}; ?>
				
			
Now the value is stored in the variable $card_title and you can use it however you want.
ins Konto einloggen