{"id":3554,"date":"2017-09-09T10:50:28","date_gmt":"2017-09-09T10:50:28","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&p=3554"},"modified":"2020-05-07T08:34:52","modified_gmt":"2020-05-07T08:34:52","slug":"sidebar","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/sidebar\/","title":{"rendered":"Sidebar"},"content":{"rendered":"\n

This article is for AMP Theme Framework<\/a> users.<\/p>\n\n\n\n

About this Component<\/h3>\n\n\n\n

Sidebar Component is used to add the area for displaying the menu, social icons etc in AMP theme.<\/p>\n\n\n\n

How to use:<\/h3>\n\n\n\n

Following are the steps to use this component.<\/p>\n\n\n\n

Step 1:<\/strong><\/p>\n\n\n\n

To initiate the support for the component in your theme just add the following code to the functions.php of the theme files.<\/p>\n\n\n\n

\/\/Sidebar\nadd_amp_theme_support('AMP-sidebar');<\/pre><\/div>\n\n\n\n
This was the back-end part where we’ve just initiated, now to make it appear in the front-end follow the next step.<\/p>\n\n\n\n
Step 2:<\/strong><\/p>\n\n\n\n
To add the Sidebar<\/strong> we need to call it.
example: add the following code in header.php header’s div of the theme files.<\/p>\n\n\n\n
<?php amp_sidebar(['action'=>'open-button']); ?><\/pre><\/div>\n\n\n\n
where we’ve set the ‘action’ => ‘open-button’ which sets a button for opening the sidebar.<\/p>\n\n\n\n
Step 2-I:<\/strong><\/p>\n\n\n\n
Now add the following code after the closing the header’s div in header.php<\/p>\n\n\n\n
<?php amp_sidebar(['action'=>'start',\n    'id'=>'sidebar',\n    'layout'=>'nodisplay',\n    'side'=>'right'\n] ); ?><\/pre><\/div>\n\n\n\n
here we’re adding different properties to the Sidebar <\/strong>such as from which side it should be ‘side’ => ‘right’.<\/p>\n\n\n\n
Step 2-II:<\/strong><\/p>\n\n\n\n
Now come to the step where we’re going add the content in the Sidebar<\/strong>.
example: we wanted to add the menu, search etc, just call the components in header.php of themes file.<\/p>\n\n\n\n
<?php amp_sidebar(['action'=>'close-button']); ?> \/\/ closing button\n<?php amp_menu(); ?> \/\/ menu component\n<?php amp_search();?> \/\/ search component\n<?php amp_social(); ?>  \/\/ social component\n<?php amp_sidebar(['action'=>'end']); ?> \/\/ ending the sidebar<\/pre><\/div>\n\n\n\n
with this, you’re successfully able to add Sidebar<\/strong> on your theme.<\/p>\n\n\n\n
That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n
We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n
\n\t\t\tAsk your Questions Directly!<\/strong>
\n\t\t\t
If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t