Add sidebar to page template on Gatsby – Learn WordPress from a to z

In the previous post, I made a page template with everyone in Gatsby . Then today I continue to guide you how to add sidebar to page template in Gatsby. As you already know. Because we make the page template for the default pages. So leaving the website blank is inevitable. To fix that problem. Then one of the easy ways is to insert the sidebar.

Add sidebar to page template in Gatsby

First of all, to create a sidebar, you need to think about what to put on the sidebar. I will leave the website information along with the latest articles. After you have identified yourself and your friends, go to the dashboard to create a custom field to put website information into GraphQL. I create the following:

Then me and my friends also turned on GraphQL to create a query.

<code>gatsby clean;gatsby develop</code>

You execute the query as follows:

<code>query MyQuery {
  allWordpressAcfOptions {
    edges {
      node {
        options {
          logo_pic {
            source_url
            slug
            alt_text
          }
          short_web_des
          social_list {
            social_item
            social_link
          }
        }
      }
    }
  }
}
</code>

And you will see the results returned as the custom field creation section on the WordPress dashboard. Next, you create the sidebar.js file into the src\components folder and initialize the sidabar component :

<code>import React from 'react'
import {graphql, StaticQuery, Link} from "gatsby"
import SideItem from "./sideItem"
const Sidebar = () =&gt;{  return(
<div classname="sidebar">
    <staticquery query="{graphql`{" allwordpressacfoptions edges node options logo_pic source_url slug alt_text short_web_des social_list social_item social_link render="{props"> props.allWordpressAcfOptions.edges.node[0].options.map(sideItem =&gt;(
                 <div classname="sidebar__logo">
                   <img class="d--none" alt="{sideItem.logo_pic.alt_text}" src="%7BsideItem.logo_pic.source_url%7D/">
</div>
                 <div classname="sidebar__des">{sideItem.short_web_des}</div>
                 <div classname="sidebar__social">
                        {sideItem.social_list.map(social=&gt;(
                          <a href="%7Bsocial.ssocial_link%7D" rel="nofollow noopener" target="_blank">{social.social_item}</a>
                     ))}
                 </div>
     ))} /&gt;
export default Sidebar
<p>So we have finished the first steps to create the sidebar for the page template page. To render more of the latest news, you also rely on the above query and the <strong>allWordpressPost </strong> query and then perform a static query to render the interface.</p>
<h2 id="tong-ket-1">summary</h2>
<p>That's it, I have completed the tutorial on creating page template. You can add pages and Gatsby will automatically create the page through the template we created earlier. In the next post, I will work with you to make Archive template on <strong>Gatsby</strong></p>
<p>Thank you for watching</p>
                          
                      
</staticquery>
</div></code>