Home>Support>Custom Row Id
  1. 6 years, 6 months ago Andrew Misplon Hi, I Work Here

    Hi Kevin

    Glad to hear you’re liking Page Builder. If you take a look with your browser’s developer tool you’ll see Page Builder is already adding a unique row ID. For example:


    The Latest Posts row is in a row with the ID pgc-home-3-0.

    Hope that helps.

  2. 6 years, 6 months ago Kevin Brooks

    Hi Andrew

    Thanks for your reply. There are a couple of reasons why this is less than ideal.

    In Page Builder, say my client edits a page and swaps rows 1 and rows 2. The IDs output for the rows are not tied to the individual rows in the editor, so the first row is still output as id=”pg-5-0″ and the second row is still id=”pg-5-1″ even though the content of the row has been changed in the editor. This effectively breaks my navigation if I have ‘about’ tied to pg-5-0 and my client moves it so that it is row 2 (pg-5-1).

    The other is that it would be much more user friendly for a visitor to see a named anchor of #about instead of #pg-5-0. That’s somewhat cosmetic, but it would be an added bonus.

    I hope this is something you’ll consider implementing in the future and if someone has a way to achieve this with the current version, I’d be very happy.

    Thanks so much,

  3. 6 years, 6 months ago Andrew Misplon Hi, I Work Here

    Thanks Kevin, I’ll chat with Greg and come back to you.

  4. 6 years, 6 months ago Greg Priday Hi, I Work Here

    Hi Kevin

    Right now it is possible to change the ID of a row. The only problem is that this change doesn’t carry over to the CSS, so your page wont display properly. In case you’re interested, on line 705 of siteorigin-panels.php, there’s a filter called siteorigin_panels_row_attributes. You can use this to modify the attributes array, which has the ID field.

    There is also a filter called siteorigin_panels_before_row. You can use this to add HTML before a row. I’ve just had a look at this filter and it doesn’t really give you enough useful information to tell which row is being displayed, so I’ve just made some changes in my development version that’ll make this a little more useful.

    When version 1.4.13 of Page Builder comes rolling out, the following code will do the trick. It wont work in the current version though.

    function mytheme_siteorigin_panels_before_row($code, $grid, $attr){
    	if($attr['id'] == 'pg-701-0') {
    		$code = '<div id="about-section"></div>';
    	return $code;
    add_filter('siteorigin_panels_before_row', 'mytheme_siteorigin_panels_before_row', 10, 3);
  5. 5 years, 11 months ago Coo van Leeuwen

    This thread seems a bit abandoned, but what Kevin is explaining is exactly what I need too. It would be great if we could give rows (and perhaps individual widgets in rows) custom ID’s.

    Is this on the roadmap by any chance?

    • 5 years, 11 months ago Andrew Misplon Hi, I Work Here

      Hi Coo

      From Page Builder 2.0 onwards you can enter a row, cell and widget class.

      Row & Cell: Click on the wrench icon on the far right of any row, Edit row, click Attributes on far right. Enter a row and cell class as required.

      Widget: Same as the above except click Edit when hovering over the widget.

      Hope you find these useful for your project.

  6. 5 years, 8 months ago Thierry Ouellet


    So I am using the new version 2.0 and indeed you can now apply custom css to rows, which is a really nice plus! However, I think it would be good to also give the option to assign an ID to rows for site navigation.


    • 5 years, 8 months ago Andrew Misplon Hi, I Work Here

      Hi Thierry

      Good point, I’ll pass this on. For now though you still could check the page source for an auto-generated row ID and use that.

  7. 5 years, 8 months ago moongirl

    I second Thierry input. I’m also using the latest version of Page Builder, and it would be useful to have the ability to assign custom IDs to rows and also widgets to use them as anchors in site navigation. Having something like #pg-701-0 is not ideal for this purpose.
    -Any idea when this feature would be added?!

    • 5 years, 8 months ago Andrew Misplon Hi, I Work Here

      Hi Moongirl

      Thanks for your additional input. I’ve passed this feature request on or rather chatted to the guys about it again. I unfortunately can’t say at this stage when it will be implemented. If you’d like to keep an eye on releases on what’s in them, please see:


  8. 5 years, 5 months ago littlestoatie

    +1 on this request. The ‘unique IDs’ really aren’t a solution because, as others have said, this ID changes everytime you move a section or add to a page. Then all menus must be re-written. It’s not a good situation.

    • 5 years, 5 months ago Andrew Misplon Hi, I Work Here

      Hey @littlestoatie. Thanks for reaching out. Appreciate the input. All noted :)

  9. 5 years, 4 months ago Mickey Kay

    Also +1. Would like to see this feature as well. Thanks for the great product y’all!

    • 5 years, 4 months ago Andrew Misplon Hi, I Work Here

      Thanks Mickey. Appreciate your feedback.

  10. 5 years, 4 months ago Tom Piraino

    This feature is key for one-page styled sites. +1 for this feature. Another one to consider is allowing “full-height” property to a row.

    Single page layouts with smooth scrolling to an anchored row that is full height (of the browser) would be great. I have this features with Visual Composer on some of my sites, but I’d rather use your products ;-)

    I’m seriously loving using your stuff, keep up the awesome work.

    • 5 years, 4 months ago Andrew Misplon Hi, I Work Here

      Thanks Tom. Solid feedback. I’ll bundle this into a request ticket and log it on our system now.

  11. 5 years, 2 months ago jacfab

    You can add

    $style_attributes['id'] = array($panels_data['grids'][$gi]['style']['class']);

    $style_attributes['class'] = array('panel-row-style-'.$panels_data['grids'][$gi]['style']['class']);[(code]

    in the file siteorigin-panels.php

    then you will have the custum class name you defined in the row or widget as an id !
    of course thats not the final solution, but it works for me for anchors and styling!

  12. 4 years, 10 months ago Si Forster

    +1 for this request, would make one page sites much more managable

  13. 4 years, 10 months ago Si Forster

    as a temporary solution, if you put a vantage headline at the top of each section, and stick an anchor tag without content inside the headline you can use your own tags for one page navigation

  14. 4 years, 10 months ago Si Forster

    sorry can’t work out how to edit posts…

    Even better, stick a span with id (Latest Offers) on your Vantage Headline title content.

  15. 4 years, 10 months ago pawelmb28

    custom ID would be nice (+1 for that feature)

    so far, adding text element with simple code

    <div id='my_custom_name'></div>

    solves the problem

    • 4 years, 10 months ago pawelmb28

      to be precise: this element can be added just before desired element, has 0 heigh, invisible, so it is quite good workaround

  16. 4 years, 8 months ago lee_apogee

    Can I add one for this too!

    Need to add anchors to menus and then still be able to edit

    Alternatively, can we add a filter/hook to output just the ID instead of data-row-id?



  17. 4 years, 7 months ago Mateusz Kadłubowski

    Any update regarding adding custom row ids for anchoring?

  18. 4 years, 6 months ago Pete Molinero

    I did a little detective work and found out that you can do custom widget ids with the following bit of code. I know it’s not for rows like the OP asked, but in my case I was more interested in ids for widgets.

    add_filter('siteorigin_panels_widget_style_fields', function($fields) {
        $fields['id'] = array(
            'name' => __('Widget ID', 'siteorigin-panels'),
            'type' => 'text',
            'group' => 'attributes',
            'description' => __('An HTML id', 'siteorigin-panels'),
            'priority' => 4,
        return $fields;
    add_filter('siteorigin_panels_widget_style_attributes', function($style_attributes, $style_args) {
        $style_attributes['id'] = $style_args['id'];
        return $style_attributes;
    }, 10, 4);

    That’ll add the Widget ID field to the WYSIWYG for widgets, and will also output it. Hope that helps someone!


  19. 4 years, 6 months ago Pete Molinero

    Just realized that while doing the work in the above post, I’d been mistakenly using an older version of the page builder. The latest version already has custom Row ID’s build in. :facepalm: Props to SiteOrigin for adding that!

    Still, that filter is nice if someone wants to add custom Widget ID’s!

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