Render Header Menu from WordPress to Gatbsy – Learn WordPress from a to z

In the previous post, I showed you how to connect Gatsby to WordPress and a basic guide on how to use GraphQL . Then with this article we will continue to learn and create header menu from WordPress to Gastby .

Create Menus on WordPress

To create a menu to bring from WordPress to Gatsby you need the WP API Menus plugin to put the menu data into the WordPress api. After activating the plugin we will start creating menus in WordPress. Go to the dashboard to create a menu, then go to the terminal and turn on Gatsby :

<code>gatsby develop</code><div><span>1</span></div>

Then we turn on GraphQL to test by going to the following path: http://localhost:8000/__graphql. Please query with the following line of code:

<code>query MyQuery {
  allWordpressMenusMenusItems {
    edges {
      node {
        name
        items {
          slug
          title
        }
      }
    }
  }
}
</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span>
</div>

And the returned result will be as follows:

<code>{
  "data": {
    "allWordpressMenusMenusItems": {
      "edges": [
        {
          "node": {
            "name": "Main menu",
            "items": [
              {
                "slug": null,
                "title": "Home"
              },
              {
                "slug": "sample-page",
                "title": "Sample Page"
              }
            ]
          }
        }
      ]
    }
  }
}
</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span>
</div>

So we have completed the step of putting the menu and viewing the results returned on GraphQL. Next we will render on Gatsby

Bringing menus from WordPress to Gatsby

And the returned result will be as follows:

<code>import React from 'react'
import {graphql, StaticQuery, Link} from "gatsby";
const Navbar = () =&gt;(
   <div classname="navbar">
     <div classname="navbar__contain container">
       <ul classname="navbar__list">
           <staticquery query="{graphql`{" edges node items render="{props">props.allWordpressMenusMenusItems.edges[0].node.items.map((menuItem,index) =&gt;(
                   <li classname="navbar__item" key="{index}">
                       <link classname="navbar__link" to="{menuItem.slug}">{menuItem.title}
                    </li>
                    ))}/&gt;
             </staticquery>
</ul>
    </div>
  </div>
)
export default Navbar
</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span><span>27</span><span>28</span><span>29</span>
</div>

I will explain the code as follows: first you need to import the react module and graphql, StaticQuery , Link for us to use. I create a react component according to the arrow function declaration like ES6 and export the Navbar component so that it can be included in the Layout component in layout.js that the default theme has created. Then I use the StaticQuery tag to query the data that we have sampled on GraphQL . And use the render property to render the array of data to the front page using the map function in JavaScript. When rendering, remember to pass the key to each child component to avoid getting an error on the console. Here I use the Link tag to make navigator for the internal pages.

summary

Through this article, I have helped you to link render headers from WordPress to Gatsby. Next article I will guide you to make Hamburger button and overlay menu when responsive on Gatsby

Thank you.