How to add AMP Sidebar in wordpress website

Please see https://github.com/ampproject/amp-wp/issues/2044#issuecomment-511572808

Actually, which mode of the AMP plugin are you using? Reader or Transitional?

I am using transitional mode. I have added amp sidebar code in header.php. Now issue is appearing that on mobile on both amp and non amp version, Two menu buttons are showing. I want that for amp version amp sidebar with mobile button will show and for non-amp version regular menu button with mobile menu will show.

• This reply was modified 5 years, 3 months ago by franks123.
• This reply was modified 5 years, 3 months ago by franks123.

You’ll have to share the code for your header.php for us to provide much help.

Please share the code on a Gist because the forums don’t do well with sharing code.

ok i am sharing on this above mentioned link. Should i add whole header.php code there?

please see the code on this link
https://gist.github.com/martn234/7d4e98d47586ae3a985a2c1ac4edf49b

Thanks for the code. However, it’s hard for me to see the problem since I don’t have the stylesheets. Please share the URL for your site where the issue can be seen.

This is the link of amp version
https://creativesystems.0438cfd.netsolhost.com/category/creativesystem-blog/?amp
This is the link of non-amp version
https://creativesystems.0438cfd.netsolhost.com/

@franks123 If you are happy with how you’ve implemented the amp-sidebar component then you can use CSS rules to display/hide between your AMP and non AMP.

You can add CSS rules such the following to your active themes style.css file.

.header-btns-mobile {display: none;}
[amp] .header-search-mobile { display: none; }
[amp] .header-btns-mobile {display: inline;}

I think for amp version, css code should be added in head tag in header.php in <style amp-custom> tag.
[amp] will also be added with .header-search-mobile { display: none; }?
I have implement it in localhost. but in vain
Please tell me how to implement this.
If there is another way to implement this, then please tell me as well

• This reply was modified 5 years, 3 months ago by franks123.
• This reply was modified 5 years, 3 months ago by franks123.

@jamesosborne , I have hide the menu button for amp version. but for non-amp version, it is not working
.dl-menuwrapper {display: none;}

This thing is added in <style amp-custom> in head tag of header.php. this thing is working for amp version. but this mobile button is hide for non-amp version as well.

https://creativesystems.0438cfd.netsolhost.com/category/creativesystem-blog/?amp
but for non-amp version, how can i hide the amp menu button.
https://creativesystems.0438cfd.netsolhost.com/
You can see on both links as well.

One more thing, for amp sidebar, I have applied the whole css in head tag. IS this right, i have done or there is another way to implement this as well?

I think for amp css will work, if it is applied in head tag

• This reply was modified 5 years, 3 months ago by franks123.

@franks123 You can apply the below:

button#menu-button {display: none;}
[amp]button#menu-button {display: inline;}

Adding the amp-sidebar component in your header is fine, although I would recommend doing so with a child theme.

@jamesosborne
1) I have added amp-sidebar in child theme.
2) Still same issue appearing. I have hide the mobile menu button for amp vesrion by adding .dl-menuwrapper {display: none;} property in head tag of header.php. this is hiding the mobile menu button for non-amp version as well. If i add
.dl-menuwrapper {display: inline;} in styles.css file. then it is not applying due to property applied in head tag.
Please sugeest me how i show the mobile menu button for non-amp version and hide the amp mobile button for non-amp version. Head tag css property override the styles.css property.
You can see on this link in mobile.
https://creativesystems.0438cfd.netsolhost.com/

https://creativesystems.0438cfd.netsolhost.com/category/creativesystem-blog/?amp

• This reply was modified 5 years, 2 months ago by franks123.

@franks123 Why don’t you add a class to each button to specifically state whether it’s an AMP menu button or not? Using those classes you can specify the display property based on each.

[amp].ampbutton {display: inline;}
[amp].nonampbutton {display: none;}