Let’s say i’m creating a widget which will list posts in a grid. What is the best practice for this? Usually i use for example bootstrap or other framework in my theme which i can use, but is it possible to use the layout builder to programatically create rows and cells? One thought was to use
the_widgeton the class SiteOrigin_Panels_Widgets_Layout but this extends on WP_Widget which means i have to keep digging in to what i should send as $args / $instance data.
Or should i try to figure out the CSS class system for SO and render my stuff this way? The problem is that it’s not bound to classes, widths and stuff are bound to id’s. Byt maybe there is a class for example building my rows like:
<div class="panel-grid panel-no-style"> <div class="panel-grid-cell cell-mobile-12 cell-tablet-4 cell-desktop-3"> <?php //My widget ?> </div> </div>
Is this possible and if so, is there any documentation for SO classes? (The fictional classes above are the “cell-mobile-12 cell-tablet-4 cell-desktop-3”).
The preferred way in this case should be something more like
do_so_row(array( 'cols' => 4, ... ))
or similar.
I hope you get what i’m trying to achieve :)
Hi Linuzitac,
We recommend creating widgets using the SiteOrigin Widgets Bundle. The SiteOrigin Widgets Bundle is a fully fledged widget development plugin that gives you a foundation to easily create widgets. You can find the developer docs here.
How you structure how the widget renders is up to you. You could set it up to output using SiteOrigin Page Builder rows but it’s not something I recommend due to the complex nature of doing this and for consistency reasons, it should ideally be avoided.
Regardless, the Layout Builder works by using a Builder Form Field and then rendering that using SiteOrigin_Panels::renderer()->render() (full method). You could replicate this by building a custom panels_data and layout_data and render that. For a better idea on how that would look, you should create a very basic layout using the layout builder and then dump $instance[‘panels_data’]and $layout_data