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.
Demo Video #
Once you install the code, 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>Code Installation – From Download Folder #
To use the code in your child theme, follow these simple steps:
- Copy & paste the code 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 code for logged in members:
Was This Tutorial Helpful?