0

I am trying to pass the sidebar that I have in the shop, inside a side drawer that will have the filters. I have created the HTML/CSS and the js responsible for this to work. But I am trying to get the content of all the sidebar from the database and apply it inside my drawer. I am a bit of a junior in PHP and in WordPress development. So any guideline on how to achieve this would be appreciated. I am aware of the options table and that under sidebars_widgets i can find the content. But I can not retrieve this and apply it inside the HTML code.

Also, I don't want to use any plugins. So answers like this will not help. I am aware that there are some plugins that can create shortcodes of any widget in order to use them later inside any text or HTML, but I highly want to avoid them.

Improve this question
8
  • couldn't you display the sidebar inside the HTML that renders your side drawer? Or display it in a hidden div then move the dom nodes with javascript? Plugin recommendations are off topic here so you wouldnt get any eitherway. Also note that directly grabbing sidebars_widgets would not work for rendered widgets, and that sidebars are now widget block areas, and blocks can be inserted that are not widgets
    – Tom J Nowell ♦
    Oct 8, 2021 at 15:47
  • hmm @TomJNowell, with 300k users of wordpress.org/plugins/classic-widgets "classic" widgets are unlikely to die any time soon, and that is not counting people that disable the block based widgets in other core endorsed ways.
    – Mark Kaplun
    Oct 8, 2021 at 19:16
  • @MarkKaplun that plugin doesn't change anything, OP shouldn't be reaching into the raw options to parse widgets out, wether it's the classic widgets UI or the block based widget areas, it's not necessary or a good idea
    – Tom J Nowell ♦
    Oct 9, 2021 at 0:15
  • @TomJNowell Sorry for my late response on this. I never got a notification in my email. "couldn't you display the sidebar inside the HTML that renders your side drawer?" To answer that, yes. I used in a test environment a plugin that was creating shortcodes for the widget bars. So I put the shortcode of the sidebar inside the HTML that I created. But this option seems to bother me a lot, so I try to optimize this a bit. I know that widgets are also serialized data and are not the best practice to try to fetch them without caution. Feel free to correct me.
    – Efstef
    Oct 19, 2021 at 18:02
  • <div style="display:none;" id="my-hamburger-menu-widgets"><?php dynamic_sidebar('menu-sidebar'); ?></div> then query for it in JS, remove it from the DOM, re-insert it inside the profile menu. Otherwise if what you've already done works then this is not optimising, this is micro-optimisation, which is a very bad thing. Directly reading the widget data from the database is very bad, and deprives widgets and themes of chances to use hooks and actions, and will break if the storage format changes. Use the provided APIs instead
    – Tom J Nowell ♦
    Oct 20, 2021 at 12:35

1 Answer 1

Reset to default
0

So after some tests, I finally got this working. Thanks to some guidelines from @Tom J Nowell I achieved to pass a sidebar inside a side-draw without the use of any plugin. What I was trying to achieve was very simple, as most of the WordPress themes out there have the sidebar below or on top of the main shop archive page. So the conclusion was simple as that

<div class="drawer-cont">
           <?php dynamic_sidebar('shop-sidebar'); ?> 
</div>

Where ('shop-sidebar') was the name of my sidebar on the widgets' area. If someone else is in that position, then just simply try to add the name of your sidebar with the '-' in the spaces. As specified on the WordPress codex:

If your theme specifies the ‘id’ or ‘name’ parameter for its registered sidebars you can pass an ID or name as the $index parameter. Otherwise, you can pass in a numerical index to display the sidebar at that index.

So in other words, if your themes use the name parameter to register sidebars, you can pass the name of the sidebar with the dash in place of the spaces. In most cases, this will work.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.