Render footer from WordPress to Gatsby – Learn WordPress from a to z

In the previous post, I showed you how to overlay menus on Gatsby . So for this lesson we will render the last but extremely important component. With our layout frame it’s the footer .

Render footer on Gatsby

First you create the Footer.js file in the components folder. Then initialize the code as follows:

<code>import React from 'react'
import {graphql, StaticQuery, Link} from "gatsby";
const Footer = () =&gt;()
export default Footer</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span>
</div>

Then you and I need to think about what we need to show in the footer ? I will have 1 subfooter. Site introduction, contact information, and a table of contents of  web pages. After shaping the idea, we can start working on it. On the WordPress admin page , you install the plugin to put ACF on the Rest API . Then in the WordPress admin, create a Theme Options section to contain their common custom fields , you can see it here . I created a field as subfooter as shown in the picture.

Then I use the command

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

to start gatsby . And go to the link http://localhost:8000/__graphql to see the query sub footer results from GraphQL . Then I enter the command to see the query results:

<code>
query MyQuery {
  wordpressAcfOptions {
    options {
      subfooter
    }
  }
}
</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>
</div>

And here is the returned result:

<code>
{
  "data": {
    "wordpressAcfOptions": {
      "options": {
        "subfooter": "This is subfooter"
      }
    }
  }
}
</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>
</div>

The rest is that we use the Static Query tag to provide the interface. You go back to the Footer.js file to add this field.

<code>
import React from 'react'
import {graphql, StaticQuery, Link} from "gatsby";
const Footer = () =&gt;(
  <footer><div classname="footer__contain"></div>
      <div classname="footer__sub">
        <staticquery query="{graphql`{" wordpressacfoptions options subfooter render="{props"> (
           <p>
             {props.wordpressAcfOptions.options.subfooter}
           </p>
         )}/&gt;
      </staticquery>
</div>
  </footer>
)
export default Footer
</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>

And here is the result on the interface.

Then I want to add website introduction, contact information, I will do the same as above. And finally the index of pages under the footer for the web. You just need to import Navbar.js into Footer.js and you will be able to successfully add it. That’s one of the conveniences of breaking down components .

<code>
import React from 'react';
import Navbar from "./Navbar";
import {graphql, StaticQuery, Link} from "gatsby";
const Footer = () =&gt;(
  <footer><div classname="footer__contain">
           <navbar></navbar>
</div>
      <div classname="footer__sub">
        <staticquery query="{graphql`{" wordpressacfoptions options subfooter render="{props"> (
           <p>
             {props.wordpressAcfOptions.options.subfooter}
           </p>
         )}/&gt;
      </staticquery>
</div>
  </footer>
)
export default Footer
</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>
</div>

And this is the result

So I have guided you to complete the footer component creation in Gatsby

summary

Through this article, I have helped you to make footer from WordPress to Gatsby . In the next post, I will show you how to render sliders and CTA images of homepage on Gatsby .

Thank you.