giving layout builder elements named anchors

[Israel Curtis]

I found one other topic in the forums which seems to deal with this need:

http://support.themeblvd.com/forums/topic/using-named-anchors-in-builder-elements/

but as it’s in a forum for a theme which I haven’t purchased, I can’t see the answer, so I’ll ask here…

I’m loving the layout builder, and I’ve seen the docs for using filters to add my own classes, but I would actually like to have unique html ID’s for some elements (particularly the headlines or dividers, maybe). This would make it very simple to use anchor links in my nav to scroll down to each element section on a very long page. Best case scenario would be a small option field inside each layout builder element box that allowed ID entry. But I’d even settle for something automatically generated, as long as I could copy it into the nav link.

Any ideas how I can pull this off in the current framework?

Topic

[Jason Bobich]

Hello,

That question actually won’t help you. The person was just trying to put a giant block of HTML in a single Content element where they linked to different areas within. It turned out they were just making a bunch of typos in their HTML, and not linking to various ID’s properly.

Anyway, your question is interesting and I do have one idea. Instead of trying to filter an ID into the elements themselves as they’re currently setup, you could hook in before and after each element to wrap it in some DIV that’s only purpose is to hold this ID.

In the Layout Builder —

See here: https://github.com/themeblvd/Theme-Blvd-Layout-Builder/blob/master/tb-builder.php#L321

And here: https://github.com/themeblvd/Theme-Blvd-Layout-Builder/blob/master/tb-builder.php#L472

This might get a little complex because you’ll have to hook it for every type of element.

/**
 * Before each element
 */
function my_element_before( $id ) {
	printf( '<div id="%s">', $id );
}
add_action( 'themeblvd_element_columns_before', 'my_element_before' );
add_action( 'themeblvd_element_content_before', 'my_element_before' );
// etc...

/**
 * After each element
 */
function my_element_after() {
	echo '</div>';
}
add_action( 'themeblvd_element_columns_after', 'my_element_after' );
add_action( 'themeblvd_element_content_after', 'my_element_after' );
// etc...

[Israel Curtis]

Very nice! I had resorted to inserting <i id="myid"></i>My Headline in the text box for headlines, giving me something to target. Clunky, but it worked.

However, this solution might solve something else I needed to do, which was group multiple builder elements and wrap in a div so that I could style their background similarly. Think this might do it…

[Israel Curtis]

so the DIV id’s that get generated are a little unwieldy, like “#element_59965303851a2ec5061165”, but it’s better than nothing. In the process of implementing this, however, I realized something else that is missing – the ability to group multiple elements together in a container.

So how about this: a new layout builder “Group” element that simply wraps the member elements in a DIV, and the only parameter for the “Group” element (besides the responsive show/hide) is a field for ID name. I’m finding it rather difficult to do some kinds of CSS styling for elements I want to group visually (like backgrounds that span multiple elements, like a headline box above a content box). This way, we get grouping and custom ID’s in one shot. And if someone wanted a custom ID for just one element, they could just put one element inside a group wrapper.

Is there a way to pull this functionality off with filters/hooks, or is it going to require a future update?

[Jason Bobich]

The ID’s of the elements are just basic use of PHP uniqueid function. The purpose is to create a unique ID in order to associate with each element upon its creation. The fact that it’s outputted in your HTML is more of an after thought, and a bonus to give you more theoretical options.

But once an element is created and has an ID, that ID does not change. So, if you know the ID and what type of element it is, I would think you could easily wrap it in some DIV using the actions I presented previously. For example, say you know the first element in a group has ID “ABC” and the last element has ID “XYZ”, and they are both “content” type elements —

/**
 * Before the first element of the group
 */
function my_element_before( $id ) {
	if( $id == ‘ABC’ )
		echo ‘<div>’;
}
add_action( ‘themeblvd_element_content_before’, ‘my_element_before’ );

/**
 * After the last element of the group
 */
function my_element_before( $id ) {
	if( $id == ‘XYZ’ )
		echo ‘</div>’;
}
add_action( ‘themeblvd_element_content_before’, ‘my_element_before’ );

That’s one idea, anyway.

However, this isn’t something I would change in an update, I don’t think. This is all pretty advanced past the basic functionality of the Layout Builder. Each element has its own PHP function that you can simply call. So, I would think that if you wanted a custom markup structure, you’d just create your own page template or something. It seems like in this case, the Builder actually makes things more complex.

[Author]

Replies