This code enables you to add a left side widget area which pushes the content to the right when open.
Update : You might find this new tutorial which uses a different method easier to work with as it includes a more simple jQuery method which uses minimal code.
In this example, the widget area is populated with a custom menu widget. The vertical menu is fixed so it always extends from the very top of the screen to the very bottom:
All the code for this feature is pre-installed in the Genesis Sample child theme by StudioPress.
Once you install the theme, add the HTML for the button anywhere you like. In this example, it was added to the header right widget however you can hook it in anywhere.
<button class="toggle-menu menu-left push-body">Menu</button>
Use in Other Child Themes
If you want to use the code in another theme, follow these simple steps:
- Copy & paste the code between lines 33 – 52 from functions.php and paste into your child themes functions file. This code loads the 2 js files, the CSS as well as registering and hooking in the widget area.
- Copy and paste the push-widget folder into your child themes root directory. thats all there is to it!
Here’s the theme which includes all the code for logged in members: