Setting p as the default HTML tag for Basic Text elements in Bricks

Updated on 13 Feb 2024

One of the most annoying defaults in Bricks is the div tag that gets applied to the output of Basic Text elements.

<div id="brxe-qgttsu" class="brxe-text-basic">Here goes your text ... Select any part of your text to access the formatting toolbar.</div>

via GIPHY

It is certainly possible to select p from the select dropdown menu and go on with your life.

The easiest way to change the default HTML tag from div to p for new elements going forward is using Advanced Themer.

If you do not want to use Advanced Themer (not sure why one wouldn’t!), here’s one way in which the same can be done: Copy the default element over to the child theme and modify it.

This tutorial shows how.

Step 1

Install and activate the Bricks child theme if you haven’t already.

This can be done at any time and not just when you are about to begin working on a site. Your site won’t be affected.

Step 2

Copy

/wp-content/themes/bricks/includes/elements/text-basic.php

to

/wp-content/themes/bricks-child/elements

Step 3

Edit the above file at /wp-content/themes/bricks-child/elements/text-basic.php.

a) Near the top of the file, comment out or delete

namespace Bricks;

b) Change

class Element_Text_Basic extends Element {

to

class Element_Text_Basic extends \Bricks\Element {

c) Inside set_controls()

change

$this->controls['tag'] = [
  'tab'         => 'content',
  'label'       => esc_html__( 'HTML tag', 'bricks' ),
  'type'        => 'select',
  'options'     => [
    'div'        => 'div',
    'p'          => 'p',
    'span'       => 'span',
    'figcaption' => 'figcaption',
    'address'    => 'address',
    'figure'     => 'figure',
    'custom'     => esc_html__( 'Custom', 'bricks' ),
  ],
  'lowercase'   => true,
  'inline'      => true,
  'placeholder' => 'div',
];

to

$this->controls['tag'] = [
  'tab'         => 'content',
  'label'       => esc_html__( 'HTML tag', 'bricks' ),
  'type'        => 'select',
  'options'     => [
    'div'        => 'div',
    'p'          => 'p',
    'span'       => 'span',
    'figcaption' => 'figcaption',
    'address'    => 'address',
    'figure'     => 'figure',
    'custom'     => esc_html__( 'Custom', 'bricks' ),
  ],
  'lowercase'   => true,
  'inline'      => true,
  'placeholder' => 'p',
  'default' => 'p',
];

d) Change

Helpers

to

\Bricks\Helpers

Step 4

Edit child theme’s functions.php.

Change

/**
 * Register custom elements
 */
add_action( 'init', function() {
  $element_files = [
    __DIR__ . '/elements/title.php',
  ];

  foreach ( $element_files as $file ) {
    \Bricks\Elements::register_element( $file );
  }
}, 11 );

to

/**
 * Register custom elements
 */
add_action( 'init', function() {
  $element_files = [
    __DIR__ . '/elements/text-basic.php',
  ];

  foreach ( $element_files as $file ) {
    \Bricks\Elements::register_element( $file );
  }
}, 11 );

and you are done.

Now when a Basic Text element is added:

<p id="brxe-ctzttq" class="brxe-text-basic">Here goes your text ... Select any part of your text to access the formatting toolbar.</p>

All is well in the world again.

via GIPHY

Reference

https://academy.bricksbuilder.io/article/select-control/