This article is for AMP Theme Framework users.
About this Component
Sidebar Component is used to add the area for displaying the menu, social icons etc in AMP theme.
How to use:
Following are the steps to use this component.
To initiate the support for the component in your theme just add the following code to the functions.php of the theme files.
This was the back-end part where we’ve just initiated, now to make it appear in the front-end follow the next step.
To add the Sidebar we need to call it.
example: add the following code in header.php header’s div of the theme files.
<?php amp_sidebar(['action'=>'open-button']); ?>
where we’ve set the ‘action’ => ‘open-button’ which sets a button for opening the sidebar.
Now add the following code after the closing the header’s div in header.php
<?php amp_sidebar(['action'=>'start', 'id'=>'sidebar', 'layout'=>'nodisplay', 'side'=>'right' ] ); ?>
here we’re adding different properties to the Sidebar such as from which side it should be ‘side’ => ‘right’.
Now come to the step where we’re going add the content in the Sidebar.
example: we wanted to add the menu, search etc, just call the components in header.php of themes file.
<?php amp_sidebar(['action'=>'close-button']); ?> // closing button <?php amp_menu(); ?> // menu component <?php amp_search();?> // search component <?php amp_social(); ?> // social component <?php amp_sidebar(['action'=>'end']); ?> // ending the sidebar
with this, you’re successfully able to add Sidebar on your theme.
That’s it for this tutorial!
We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.