Editing framework elements

I’m not going to lie on this one, but digging in and trying to edit how current framework elements work isn’t really an easy task. The reason for this is because I feel like it adds a whole new level of complication to the internal working of the framework for you to do this. If you’re wanting to make major modifications to a framework element, I’d suggest just removing it all together and adding in your own custom element as described in the previous article, Add/Remove builder elements.

Editing how elements display

All functions for displaying the default framework elements can be found in this file of your theme:

/framework/functions/elements.php

In this file, you’ll notice that each element’s function is setup only after it’s been checked for an existing version first. So, to edit any of these functions, you’d copy them to your Child theme’s functions.php before the framework runs. This process is described in more detail over in the article, Editing framework functions.

I’m going to use the “Divider” element as an example because it’s the simplest one I could find. We can see that it’s displayed with the themeblvd_divider function in /framework/functions/elements.php.

if( ! function_exists( 'themeblvd_divider' ) ) :
/**
 * Display divider.
 *
 * @since 2.0.0
 *
 * @param array $type style of divider
 * @return string $output HTML output for divider
 */
function themeblvd_divider( $type ) {
	$output = '<div class="divider divider-'.$type.'"></div>';
	return $output;
}
endif;

So, let’s say we want to get whacky and instead of having the divider display as a DIV, we want it to be an actual horizontal rule <hr>. We’d simply copy that function to our Child theme’s function.php before the framework runs and make our changes something like this:

<?php
/**
 * My new divider function.
 */
function themeblvd_divider( $type ) {
	$output = '<hr class="divider divider-'.$type.'">';
	return $output;
}

/*-------------------------------------------------------*/
/* Run Theme Blvd framework (required)
/*-------------------------------------------------------*/

require_once( get_template_directory_uri() . '/framework/themeblvd.php' );

/*-------------------------------------------------------*/
/* Start Child Theme
/*-------------------------------------------------------*/

Now when the framework runs, and it comes to the themeblvd_divider function, it’ll skip it and use our new function declared first.

Editing how an element works within the Layout Builder admin

This is where things start to get tricky, and why I suggest just removing an element all together and adding in your own custom element as described in the previous article, Add/Remove builder elements.

I did try to put filters on just about everything throughout the framework where applicable in order to give you the most theoretical options for making your customizations; so that’s what you’d need to take advantage of here if you were trying to edit how a current framework element is used within the Layout Builder.

You can see the following link to where all of the Layout Builder element options are setup within our Theme Blvd Layout Builder plugin:

See plugin’s code: /includes/api/class-tb-builder-api.php, line 183

This is a huge, multi-dimensional array that has the filter attached “themeblvd_core_elements”. With this filter you could theoretically change any of an en element’s attributes – name, ID, settings, etc.

So if your customizations to how an element displays requires that you add a setting to it or change the way it’s presented to the user using the Layout Builder in the WordPress admin panel, you’d need to use that filter.

Let me just give you a very basic example. Let’s look at the “Divider” element that we previously changed to show a true horizontal rule <hr>. Maybe when our client is in the Layout Builder, we want them to see it presented as an element called “Horizontal Rule” instead of “Divider.”

In looking in /includes/api/class-tb-builder-api.php of the Layout Builder plugin, we can see where this element is setup within the array.

See plugin’s code: /includes/api/class-tb-builder-api.php, line 381

So, to accomplish our goal, we’d do something like this:

function my_element_mods( $elements ) {
	$elements['divider']['info']['name'] = 'Horizontal Rule';
	return $elements;
}
add_filter( 'themeblvd_core_elements', 'my_element_mods' );

You could imagine how this could be much more complicated if you were looking to change something more complex like the element’s options, and that’s why you can save yourself a lot of hassle by just removing the framework’s elements and adding your own if you’re looking to make major changes.