Title: invalid_element:
Last modified: August 20, 2019

---

# invalid_element:

 *  Resolved [Daniel](https://wordpress.org/support/users/dssaez/)
 * (@dssaez)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/invalid_element/)
 * Hi there,
 * I’m trying to introduce an AMP component “<amp-sidebar>” but I keep receiving
   the same error -> invalid_element: <amp-sidebar>.
 * It seems that the AMP plugin does not add the sidebar script on the <head> tag,
   I have already added it:
    <script async custom-element=”amp-sidebar” src=”[https://cdn.ampproject.org/v0/amp-sidebar-0.1.js”></script&gt](https://cdn.ampproject.org/v0/amp-sidebar-0.1.js”></script&gt);
 * and still getting the same error so the the validation is removing the “<amp-
   sidebar>” and not being displayed.
 * I have added the “<amp-sidebar>” on the content of a page and also on a theme
   to include it on the “<header></header>”, I have tried both separately but always
   same error, it seems the validation does not allow this.
 * Could anyone help please? or there is a way I can avoid validating the tag “<
   amp-sidebar>”?
 * Thank youuuu, have a great day.
 * Daniel.

Viewing 10 replies - 1 through 10 (of 10 total)

 *  Thread Starter [Daniel](https://wordpress.org/support/users/dssaez/)
 * (@dssaez)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/invalid_element/#post-11848872)
 * Hi again,
 * I forgot to show you the easy amp-sidebar I’m using to make some tests:
 * \`<amp-sidebar id=”sidebar1″ layout=”nodisplay” side=”right”>
    <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.
 *  [James Osborne](https://wordpress.org/support/users/jamesosborne/)
 * (@jamesosborne)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/invalid_element/#post-11850185)
 * [@dssaez](https://wordpress.org/support/users/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](https://gist.github.com/westonruter/b22cfae13f0862d5b9716c776c60f882)
   plugin. If you are using `transitional` or `standard` mode you can look at [this](https://wordpress.org/support/topic/hamburger-menu-9/)
   support topic for tips.
 * If you want to share your site we can take a look. And you can use this [playground](https://playground.amp.dev/?url=https%3A%2F%2Fpreview.amp.dev%2Fdocumentation%2Fexamples%2Fcomponents%2Famp-sidebar&format=websites&_gl=1*1ifccwd*_ga*YW1wLU9HSzJQUlkwTzItdHdLWkZ4YnZ4a0E.)
   to ensure you have a valid sidebar. Replace the body content with your own sidebar
   code.
 *  Thread Starter [Daniel](https://wordpress.org/support/users/dssaez/)
 * (@dssaez)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/invalid_element/#post-11853088)
 * 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/](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](https://wordpress.org/support/users/dssaez/)
 * (@dssaez)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/invalid_element/#post-11853097)
 * I’m sharing again the easy sidebar code:
    `<amp-sidebar id=”sidebar1″ 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>`
 *  [James Osborne](https://wordpress.org/support/users/jamesosborne/)
 * (@jamesosborne)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/invalid_element/#post-11853395)
 * [@dssaez](https://wordpress.org/support/users/dssaez/) Can you place the following
   into a amp [playground](https://playground.amp.dev/) 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](https://wordpress.org/support/users/dssaez/)
 * (@dssaez)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/invalid_element/#post-11853810)
 * 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>”
 *  [James Osborne](https://wordpress.org/support/users/jamesosborne/)
 * (@jamesosborne)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/invalid_element/#post-11853847)
 * [@dssaez](https://wordpress.org/support/users/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](https://wordpress.org/support/users/dssaez/)
 * (@dssaez)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/invalid_element/#post-11853970)
 * 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.
 *  [James Osborne](https://wordpress.org/support/users/jamesosborne/)
 * (@jamesosborne)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/invalid_element/#post-11856198)
 * [@dssaez](https://wordpress.org/support/users/dssaez/) Great to hear. If the 
   plugins working well for you leave a [review](https://wordpress.org/support/plugin/amp/reviews/).
 *  Plugin Author [Weston Ruter](https://wordpress.org/support/users/westonruter/)
 * (@westonruter)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/invalid_element/#post-11861451)
 * 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](https://github.com/ampproject/amp-wp/pull/3084/files#r317214582)

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘invalid_element:’ is closed to new replies.

 * ![](https://ps.w.org/amp/assets/icon.svg?rev=2527602)
 * [AMP](https://wordpress.org/plugins/amp/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/amp/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/amp/)
 * [Active Topics](https://wordpress.org/support/plugin/amp/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/amp/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/amp/reviews/)

 * 10 replies
 * 3 participants
 * Last reply from: [Weston Ruter](https://wordpress.org/support/users/westonruter/)
 * Last activity: [6 years, 9 months ago](https://wordpress.org/support/topic/invalid_element/#post-11861451)
 * Status: resolved