Home>Support>Add attribute to div.panel-grid

Add attribute to div.panel-grid

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

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 days, 3 hours ago Alex S Hi, I Work Here

    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.

  2. 9 days, 3 hours ago jpmanson

    Hello Alex,

    Thank you for your reply. I replaced

    siteorigin_panels_row_style_attributes

    with

    siteorigin_panels_row_attributes

    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

  3. 8 days, 19 hours ago Alex S Hi, I Work Here

    Hi Jpmanson,

    siteorigin_panels_row_attributes passes the entire row rather than just the attributes so you’ll need to replace:

    $args['fp-data-anchor']
    

    With:

    $args['style']['fp-data-anchor']
    
  4. 8 days, 8 hours ago jpmanson

    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);
    
    
Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More