Clicky

  1. Home
  2. Developer Docs
  3. Custom AMP Theme
  4. AMP Theme Framework
  5. Sidebar
Searching...

Sidebar

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.

Step 1:

To initiate the support for the component in your theme just add the following code to the functions.php of the theme files.

//Sidebar
add_amp_theme_support('AMP-sidebar');

This was the back-end part where we’ve just initiated, now to make it appear in the front-end follow the next step.

Step 2:

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.

Step 2-I:

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’.

Step 2-II:

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.

Ask your Questions Directly!
If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!
Updated on May 7, 2020
Tagged:

    Are you still looking for a solution?

    Then fill out the below form and we will reach out to you within a few hours.

    Was this article helpful?

    Yes
    No

    Related Articles

    Comments

    1. my sidebar is closed on tap, how can i prevent that behavior?

    2. Hi dear support team
      I want to delete sidebar from my AMP version of site . How to do it? Would you help me?
      Cincerely

    3. Hello, I have a bug related to this component, when opening a menu, a parameter # appears in the url # which is sometimes not removed in mobile devices and therefore the menu cannot be opened

    Leave a Comment