Hello,
I am trying to add a new attribute to the div with the class ‘panel-grid’. The attribute is called ‘data-anchor’ and the user can enter the value for this attribute in the ‘Row Styles’ section on the page Editor.
I followed the instructions at https://siteorigin.com/docs/page-builder/hooks/custom-row-settings/ and I was able to add the new attribute and its values to the div with the class ‘panel-row-style’, which is inside the panel-grid. Is it possible to create a filter that would allow me to add this new attribute to the div.panel-grid ?
The code I am using is:
/**
* Add data attribute on SiteOrigins panels
*/
function fp_row_fields($fields) {
$fields['fp-data-anchor'] = array(
'name' => __('FP Data Anchor', 'siteorigin-panels'),
'type' => 'text',
'group' => 'attributes',
'description' => __('Nombre de la seccion, sin espacios ni caracteres raros.', 'siteorigin-panels'),
'priority' => 8,
);
return $fields;
}
add_filter( 'siteorigin_panels_row_style_fields', 'fp_row_fields' );
/**
* Add data attribute to the row element
*/
function fp_row_attributes( $attributes, $args ) {
if( !empty( $args['fp-data-anchor'] ) ) {
$attributes['data-anchor'] = $args['fp-data-anchor'];
}
return $attributes;
}
add_filter('siteorigin_panels_row_style_attributes', 'fp_row_attributes', 10, 2);
Any pointers, or links to documentation, or suggestions will be much welcomed. I believe I am very close to the solution but I can’t figure it out yet.
Thank you in advance for your help. All the best, JP
Hi Jpmanson,
To apply to your attribute directly to the panel-grid, you’ll need to use the siteorigin_panels_row_attributes filter instead of siteorigin_panels_row_style_attributes.
Hello Alex,
Thank you for your reply. I replaced
with
in my code and now the ‘data-anchor’ attribute is not displayed anywhere, should I make any other changes to the code?
The URL to the page I’m working on is http://carlotabeltrame.com/
And the updated code is:
/** * Add data attribute on SiteOrigins panels */ function fp_row_fields($fields) { $fields['fp-data-anchor'] = array( 'name' => __('FP Data Anchor', 'siteorigin-panels'), 'type' => 'text', 'group' => 'attributes', 'description' => __('Nombre de la seccion, sin espacios ni caracteres raros.', 'siteorigin-panels'), 'priority' => 8, ); return $fields; } add_filter( 'siteorigin_panels_row_style_fields', 'fp_row_fields' ); /** * Add data attribute to the row element */ function fp_row_attributes( $attributes, $args ) { if( !empty( $args['fp-data-anchor'] ) ) { $attributes['data-anchor'] = $args['fp-data-anchor']; } return $attributes; } add_filter('siteorigin_panels_row_attributes', 'fp_row_attributes', 10, 2);Are there any error on the code? Or additional changes I should make?
Thank you for your help with this. I look forward to your comments. Kind regards, JP
Hi Jpmanson,
siteorigin_panels_row_attributes passes the entire row rather than just the attributes so you’ll need to replace:
With:
Hi Alex, thank you so much for your help. The filter is working perfectly.
In case this is useful I’m copying the final code below.
This code adds two filters: the first one allows the admin to enter a value for the attribute data-anchor (on the Row Styles > Attributes section of the Page Builder); and the second one adds the attribute and the value entered by the admin to the row (the div with the class panel-grid):
/** * Add data attribute on SiteOrigins panels */ function fp_row_fields($fields) { $fields['fp-data-anchor'] = array( 'name' => __('FP Data Anchor', 'siteorigin-panels'), 'type' => 'text', 'group' => 'attributes', 'description' => __('Nombre de la seccion, sin espacios ni caracteres raros.', 'siteorigin-panels'), 'priority' => 8, ); return $fields; } add_filter( 'siteorigin_panels_row_style_fields', 'fp_row_fields' ); /** * Add data attribute to the row element */ function fp_row_attributes( $attributes, $args ) { if( !empty( $args['style']['fp-data-anchor'] ) ) { $attributes['data-anchor'] = $args['style']['fp-data-anchor']; } return $attributes; } add_filter('siteorigin_panels_row_attributes', 'fp_row_attributes', 10, 2);