Page Builder looks great so far, but I’d like to be able to link directly to rows from my site’s navigation. Is there a way to add a custom ID to a row so that I can reference it as a link anchor?
Custom Row Id
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
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:
http://demo.siteorigin.com/vantage/
The Latest Posts row is in a row with the ID pgc-home-3-0.
Hope that helps.
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,
Kevin
Thanks Kevin, I’ll chat with Greg and come back to you.
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);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?
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.
Hi,
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.
Thanks!
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.
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?!
Thanks!
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:
https://github.com/siteorigin/siteorigin-panels/releases
+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.
Hey @littlestoatie. Thanks for reaching out. Appreciate the input. All noted :)
Also +1. Would like to see this feature as well. Thanks for the great product y’all!
Thanks Mickey. Appreciate your feedback.
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.
Thanks Tom. Solid feedback. I’ll bundle this into a request ticket and log it on our system now.
You can add
after
$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!
+1 for this request, would make one page sites much more managable
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
sorry can’t work out how to edit posts…
Even better, stick a span with id (Latest Offers) on your Vantage Headline title content.
custom ID would be nice (+1 for that feature)
so far, adding text element with simple code
solves the problem
to be precise: this element can be added just before desired element, has 0 heigh, invisible, so it is quite good workaround
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?
Thanks
Lee
Any update regarding adding custom row ids for anchoring?
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!
Pete
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!