Thread Starter
Daniel
(@dssaez)
Hi again,
I forgot to show you the easy amp-sidebar I’m using to make some tests:
<ul>
<li>Nav item 1</li>
<li><a href=”#idTwo” on=”tap:idTwo.scrollTo”>Nav item 2</a></li>
<li>Nav item 3</li>
<li><a href=”#idFour” on=”tap:idFour.scrollTo”>Nav item 4</a></li>
<li>Nav item 5</li>
<li>Nav item 6</li>
</ul>
</amp-sidebar>
This one of the easiest amp-sidebars I have found in amp.dev
Daniel.
@dssaez The plugin will automatically call the required amp-sidebar component script tag once you place valid amp-sidebar markup in your site.
If you are trying to link the sidebar with your primary navigation menu and you are using reader mode amp you can use this plugin. If you are using transitional or standard mode you can look at this support topic for tips.
If you want to share your site we can take a look. And you can use this playground to ensure you have a valid sidebar. Replace the body content with your own sidebar code.
Thread Starter
Daniel
(@dssaez)
Hi James,
thank you so much for your answer.
I’m using “standard” settings, so the whole site is amp and I’m doing my own theme.
The thing is that I’m adding a really simple sidebar code, I have added in many places like inside of <header> tag, out of <header> tag in the header.php or in a gutenberg page …:
<amp-sidebar id=”sidebar1″ side=”left” layout=”nodisplay”>
- Nav item 1
- Nav item 3
- Nav item 5
- Nav item 6
</amp-sidebar>
The validation of the plugin always says that the tag “amp-sidebar” is not valid:
invalid_element: <amp-sidebar>
I have tried this same code adding the sidebar script in another page out of my WordPress and it works fine, I mean it is a really easy example to make it work.
I guess I’m missing something I have to do with my theme. I have also created a plugin which adds Gutenberg blocks to display amp-carousel or amp-fit-text with no problems.
I have read the support links to sent me but I don’t get much there, I’m assuming I may have to add some theme support like the following but it does not make much sense to me: https://amp-wp.org/documentation/playbooks/toggling-hamburger-menus/
add_theme_support(
‘amp’,
array(
‘nav_menu_toggle’ => array(
‘nav_container_id’ => ‘site-navigation’,
‘nav_container_toggle_class’ => ‘toggled-on’,
‘menu_button_id’ => ‘site-navigation-toggle’,
‘menu_button_toggle_class’ => ‘toggled-on’,
),
)
);
Thank you so much for your help, waiting for your comments,
have a good day
Thread Starter
Daniel
(@dssaez)
I’m sharing again the easy sidebar code:
<ul>
<li>Nav item 1</li>
<li>Nav item 3</li>
<li>Nav item 5</li>
<li>Nav item 6</li>
</ul>
</amp-sidebar>
@dssaez Can you place the following into a amp playground window and check that it’s working for you, after the <body> tag.
<amp-sidebar id="sidebar" side="left" layout="nodisplay">
<ul>
<li>Nav item 1</li>
<li>Nav item 3</li>
<li>Nav item 5</li>
<li>Nav item 6</li>
</ul>
</amp-sidebar>
<button on="tap:sidebar.toggle">Toggle sidebar</button>
You’ll need to add the amp-sidebar script also between the <head> tags
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
That might be a good way to test your code, there is a syntax error in what you provided, between commas and quotation marks.
Thread Starter
Daniel
(@dssaez)
Hello James,
thank you again for your time,
I have placed the code you gave me above into the amp playground window and everything works fine. I like this amp playground, very useful.
Then I just copy same code into my WordPress, I even add the amp-sidebar script into the <head> tag with the hook ‘wp_head’, actually I can see the script is there on the page when I inspect it. The AMP plugin itself does not add the amp-sidebar script.
And still the same stuff, amp validation says “invalid_element: <amp-sidebar>”
@dssaez Are you checking the sidebar on AMP URLs only, and have you placed the sidebar code right below the <body> tag, which is the recommended placement?
If you want to share you site we can take a look.
Thread Starter
Daniel
(@dssaez)
Super James, that’s our man,
and that’s the stuff -> The <amp-sidebar> should be a direct child of the <body>
As you have mentioned on your previous comment, the anp-sidebar has to be a direct child, I was wrapping it with another tag and I did not realized.
So the pluin is doing great, it was all on me, I missed this little point which got quite big. Well, I hope this useful for someone.
Thank you so much for your help James, it was a pleasure.
Big hug and enjoy life.
@dssaez Great to hear. If the plugins working well for you leave a review.
FYI: I just learned that AMP just started allowing amp-sidebar to not have to be a direct child of the body. This will be part of the next AMP plugin release: https://github.com/ampproject/amp-wp/pull/3084/files#r317214582
