{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/create-gatsby-wordpress-portfolio-website/",
    "result": {"data":{"site":{"siteMetadata":{"title":"CrewCode Solutions"}},"markdownRemark":{"id":"01234bb6-dd89-55cf-9e13-d2f90c279338","excerpt":"In this article i will explain you step by step to create gatsby portfolio website using wordpress as headless cms Step 1: Creating Wordpress Website In order…","html":"<p>In this article i will explain you step by step to create gatsby portfolio website using wordpress as headless cms</p>\n<h4>Step 1: Creating Wordpress Website</h4>\n<p>In order to do a local setup for the wordpress download local wp from this link <a href=\"https://localwp.com/\">Local Wp</a> and you can create your wordpress website there</p>\n<h4>Step 2: Install necessary plugin required for running graphql query</h4>\n<p>In order to run graphql query and also for accessing data from gatsby website we need to install plugin so that we can access wordpress data as REST API from gatsby website. <strong><em>here are the list of plugins that we need to install and activate</em></strong></p>\n<ol>\n<li>\n<p>Advance Custom Fields</p>\n</li>\n<li>\n<p>WP Gatsby</p>\n</li>\n<li>\n<p>WP Graphql</p>\n</li>\n<li>\n<p>WPGraphQL for Advanced Custom Fields : this plugin you need to download externally and upload from this link\n<a href=\"https://www.wpgraphql.com/acf/\">WPGraphQL for Advanced Custom Fields</a></p>\n</li>\n</ol>\n<h4>Step 3: Create and Install custom theme in wordpress</h4>\n<p>Here we are going to create our own theme and install it in wordpress, this theme will prevent anyone from accessing wordpress link so that wordpress act only as headless cms</p>\n<ul>\n<li>\n<p><strong><em>In your wordpress local which you have installed previously to create wordpress site you will find an option to go to site folder just click that link</em></strong> and you will be automatically navigated to the files and folder for your wordpress site</p>\n</li>\n<li>\n<p>In your wordpress website folder <strong><em>just navigate to app->public->wp-content->themes</em></strong></p>\n</li>\n<li>\n<p>Inside themes folder create a your theme folder with any name of your choice i'm going to name it as wp-gatsby-js-theme</p>\n</li>\n<li>\n<p>Once you have created your theme folder just navigate to that folder and create following files</p>\n<ol>\n<li>\n<p>functions.php</p>\n</li>\n<li>\n<p>index.php</p>\n</li>\n<li>\n<p>style.css</p>\n</li>\n<li>\n<p>portfolio_under_content.php : this file is custom template file for our custom post type</p>\n</li>\n<li>\n<p>Any theme image of your choice <strong><em>just name it as screenshot.png</em></strong></p>\n</li>\n</ol>\n</li>\n<li>\n<p>Once you have created the above file just copy paste following code</p>\n</li>\n</ul>\n<p><strong><em>Leave the file style.css blank in index.php just add php open and close tag</em></strong></p>\n<p><strong><em>Paste the following code in functions.php</em></strong></p>\n<pre><code class=\"language-php\">&#x3C;?php\nadd_theme_support( 'custom-logo' );\nadd_theme_support( 'menus' );\nadd_theme_support('post-thumbnails');\n\nfunction add_nav_menus() {\n    register_nav_menus( array(\n        'nav menu'=>'Navigation Bar',\n        'footer menu'=> 'Footer Bar',\n    ));\n}\nadd_action('init', 'add_nav_menus');\n\nfunction create_custom_portfolio_post_type(){\n\tregister_post_type('portfolio', array(\n\t    'labels'=>array(\n\t\t\t'name'=>__('Portfolio'),\n\t\t\t'singular_name'=>__('Portfolio')\n\t\t ),\n\t\t'public'=> true,\n\t\t'show_in_graphql' => true,\n\t\t'graphql_single_name' => 'Portfolio',\n        'graphql_plural_name' => 'Portfolios',\n\t\t'show_in_admin_bar'=> true,\n\t\t'show_in_rest' => true\n\t));\n\n\tadd_post_type_support('portfolio', array(\n\t    'thumbnail',\n\t\t'excerpt'\n\t));\n}\n\nadd_action('init', 'create_custom_portfolio_post_type');\n?>\n</code></pre>\n<p><strong><em>Paste the following code in portfolio_under_content.php</em></strong></p>\n<pre><code class=\"language-php\">  &#x3C;?php /* Template Name: Portfolio Items below content */ ?>\n</code></pre>\n<ul>\n<li>Once you have added the respective code <strong><em>login to wordpress admin and activate the theme</em></strong></li>\n</ul>\n<h4>Step 4: Add Post to your custom post type portfolio, add pages, add menus in wordpress</h4>\n<ul>\n<li>\n<p>Once you have activated the theme above you will be able to see a menu with the name Portfolio just click on that then you will be able to add new portfolio with images and excerpt please add 1 or two portfolios with featured images and excerpt</p>\n</li>\n<li>\n<p>Create page such as portfolio, home etc by navigating to pages -> add new</p>\n</li>\n<li>\n<p>When you create portfolio page make sure to select template as Portfolio under content as custom template</p>\n</li>\n<li>\n<p>Create Advance custom fields and make sure to select all the settings as show in screen shot below</p>\n</li>\n</ul>\n<p><img src=\"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/Gatsby-Wordpress-portfolio-1.png\" alt=\"page\"></p>\n<p><img src=\"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/Gatsby-Wordpress-portfolio-2.png\" alt=\"page\"></p>\n<p><img src=\"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/Gatsby-Wordpress-portfolio-3.png\" alt=\"page\"></p>\n<ul>\n<li>Create menu for your header by navigating to appearance -> menu link in sidebar, make sure all the settings are same as shown in screen shot below</li>\n</ul>\n<p><img src=\"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/Gatsby-Wordpress-portfolio-4.png\" alt=\"menu-item\"></p>\n<h4>Step 5: Create Gatsby portfolio website and install necessary plugins</h4>\n<p>Create a fresh gatsby website using following steps</p>\n<ul>\n<li>Install gatsby cli using following command</li>\n</ul>\n<pre><code class=\"language-js\">npm install --save gatsby-cli\n</code></pre>\n<ul>\n<li>Create gatsby website using following command</li>\n</ul>\n<pre><code class=\"language-js\">gatsby new 'your-website-name'\n</code></pre>\n<ul>\n<li>Navigate to the path of your newly created project and install the following package</li>\n</ul>\n<pre><code class=\"language-js\">npm install --save gatsby-source-graphql bluebird styled-components\n</code></pre>\n<ul>\n<li>Go to your project folder and find <strong><em>gatsby-config.js</em></strong> and add this piece of code to your plugins array</li>\n</ul>\n<pre><code class=\"language-js\"> {\n      resolve: `gatsby-source-graphql`,\n      options: {\n        typeName: \"WPGraphQL\",\n        fieldName: \"wpcontent\",\n        url: `http://gatsbywordpress.local/graphql`,\n      },\n    },\n</code></pre>\n<ul>\n<li>Go to your project folder again and find <strong><em>gatsby-node.js</em></strong> and just copy and replace the whole code with the following code</li>\n</ul>\n<pre><code class=\"language-js\">const _ = require(`lodash`);\nconst Promise = require(`bluebird`);\nconst path = require(`path`);\nconst slash = require(`slash`);\n\n// Implement the Gatsby API “createPages”. This is\n// called after the Gatsby bootstrap is finished so you have\n// access to any information necessary to programmatically\n// create pages.\n// Will create pages for WordPress pages (route : /{slug})\n// Will create pages for WordPress posts (route : /post/{slug})\nexports.createPages = ({ graphql, actions }) => {\n  const { createPage, createRedirect } = actions;\n  createRedirect({\n    fromPath: \"/\",\n    toPath: \"/home\",\n    redirectInBrowser: true,\n    IsPermanent: true,\n  });\n  return new Promise((resolve, reject) => {\n    // The “graphql” function allows us to run arbitrary\n    // queries against the local WordPress graphql schema. Think of\n    // it like the site has a built-in database constructed\n    // from the fetched data that you can run queries against.\n\n    // ==== PAGES (WORDPRESS NATIVE) ====\n    graphql(\n      `\n        {\n          wpcontent {\n            pages {\n              edges {\n                node {\n                  id\n                  slug\n                  status\n                  template {\n                    templateName\n                  }\n                  title\n                  content\n                }\n              }\n            }\n          }\n        }\n      `\n    )\n      .then((result) => {\n        if (result.errors) {\n          console.log(result.errors);\n          reject(result.errors);\n        }\n\n        // Create Page pages.\n        const pageTemplate = path.resolve(\"./src/templates/page.js\");\n        const portfolioUnderContentTemplate = path.resolve(\n          \"./src/templates/portfolioUnderContent.js\"\n        );\n        // We want to create a detailed page for each\n        // page node. We'll just use the WordPress Slug for the slug.\n        // The Page ID is prefixed with 'PAGE_'\n        _.each(result.data.wpcontent.pages.edges, (edge) => {\n          // Gatsby uses Redux to manage its internal state.\n          // Plugins and sites can use functions like \"createPage\"\n          // to interact with Gatsby.\n\n          createPage({\n            // Each page is required to have a `path` as well\n            // as a template component. The `context` is\n            // optional but is often necessary so the template\n            // can query data specific to each page.\n            path: `/${edge.node.slug}/`,\n            component: slash(\n              edge.node.template &#x26;&#x26;\n                edge.node.template.templateName ===\n                  \"Portfolio Items Below Content\"\n                ? portfolioUnderContentTemplate\n                : pageTemplate\n            ),\n            context: edge.node,\n          });\n        });\n      })\n      // ==== END PAGES ====\n\n      // ==== PORTFOLIO ====\n      .then(() => {\n        graphql(\n          `\n            {\n              wpcontent {\n                portfolios {\n                  edges {\n                    node {\n                      content\n                      portfolio {\n                        portfolioUrl\n                      }\n                      title\n                      slug\n                      link\n                      featuredImage {\n                        node {\n                          sourceUrl\n                        }\n                      }\n                      excerpt\n                    }\n                  }\n                }\n              }\n            }\n          `\n        ).then((result) => {\n          if (result.errors) {\n            console.log(result.errors);\n            reject(result.errors);\n          }\n          const portfolioTemplate = path.resolve(\n            \"./src/templates/portfolio.js\"\n          );\n          // We want to create a detailed page for each\n          // post node. We'll just use the WordPress Slug for the slug.\n          // The Post ID is prefixed with 'POST_'\n          _.each(result.data.wpcontent.portfolios.edges, (edge) => {\n            createPage({\n              path: `/portfolio/${edge.node.slug}/`,\n              component: slash(portfolioTemplate),\n              context: edge.node,\n            });\n          });\n        });\n      })\n      // ==== END PORTFOLIO ====\n\n      // ==== BLOG POSTS ====\n      .then(() => {\n        graphql(\n          `\n            {\n              wpcontent {\n                posts {\n                  edges {\n                    node {\n                      excerpt\n                      id\n                      date\n                      title\n                      content\n                      slug\n                    }\n                  }\n                }\n              }\n            }\n          `\n        ).then((result) => {\n          if (result.errors) {\n            console.log(result.errors);\n            reject(result.errors);\n          }\n\n          const posts = result.data.wpcontent.posts.edges;\n          const postsPerPage = 2;\n          const numberOfPages = Math.ceil(posts.length / postsPerPage);\n          const blogPostListTemplate = path.resolve(\n            \"./src/templates/blogPostList.js\"\n          );\n\n          Array.from({ length: numberOfPages }).forEach((page, index) => {\n            createPage({\n              component: slash(blogPostListTemplate),\n              path: index === 0 ? \"/blog\" : `/blog/${index + 1}`,\n              context: {\n                posts: posts.slice(\n                  index * postsPerPage,\n                  index * postsPerPage + postsPerPage\n                ),\n                numberOfPages,\n                currentPage: index + 1,\n              },\n            });\n          });\n\n          const pageTemplate = path.resolve(\"./src/templates/page.js\");\n          _.each(posts, (post) => {\n            createPage({\n              path: `/post/${post.node.slug}`,\n              component: slash(pageTemplate),\n              context: post.node,\n            });\n          });\n\n          resolve();\n        });\n      });\n    // ==== END POSTS ====\n  });\n};\n</code></pre>\n<ul>\n<li>\n<p>Go to your project folder again and find templates folder or create a folder templates if it doesn't exist inside src folder and create following templates</p>\n</li>\n<li>\n<p>Go to your project folder and Create template <strong><em>blogPostList.js</em></strong> under src->templates folder and copy paste the following code</p>\n</li>\n</ul>\n<pre><code class=\"language-js\">import React from \"react\";\nimport Layout from \"../components/layout\";\nimport { Link } from \"gatsby\";\nimport styled from \"styled-components\";\nimport Seo from \"../components/seo\";\n\nconst Pagination = styled.div`\n  display: flex;\n  justify-content: flex-end;\n`;\n\nconst PageNumberWrapper = styled.div`\n  border: 1px solid #eee;\n  background: ${(props) => (props.isCurrentPage ? \"#eee\" : \"white\")};\n`;\n\nconst PageNumber = styled(Link)`\n  display: block;\n  padding: 8px 16px;\n`;\n\nconst BlogList = ({ pageContext }) => (\n  &#x3C;Layout>\n    &#x3C;Seo title={\"Blog\"} />\n    {pageContext.posts.map((post) => (\n      &#x3C;div key={post.node.wordpress_id}>\n        &#x3C;h3 dangerouslySetInnerHTML={{ __html: post.node.title }} />\n        &#x3C;small>{post.node.date}&#x3C;/small>\n        &#x3C;p dangerouslySetInnerHTML={{ __html: post.node.excerpt }} />\n        &#x3C;div>\n          &#x3C;Link to={`/post/${post.node.slug}`}>Read more&#x3C;/Link>\n        &#x3C;/div>\n      &#x3C;/div>\n    ))}\n    &#x3C;Pagination>\n      {Array.from({ length: pageContext.numberOfPages }).map((page, index) => (\n        &#x3C;PageNumberWrapper\n          key={index}\n          isCurrentPage={index + 1 === pageContext.currentPage}\n        >\n          &#x3C;PageNumber to={index === 0 ? \"/blog\" : `/blog/${index + 1}`}>\n            {index + 1}\n          &#x3C;/PageNumber>\n        &#x3C;/PageNumberWrapper>\n      ))}\n    &#x3C;/Pagination>\n  &#x3C;/Layout>\n);\n\nexport default BlogList;\n</code></pre>\n<ul>\n<li>Go to your project folder Create template <strong><em>page.js</em></strong> under src->templates folder and copy paste the following code</li>\n</ul>\n<pre><code class=\"language-js\">import React from \"react\";\nimport Layout from \"../components/layout\";\nimport Seo from \"../components/seo\";\n//import PortfolioItems from \"../components/PortfolioItems\"\n\nconst Page = ({ pageContext }) => (\n  &#x3C;Layout>\n    &#x3C;Seo title={pageContext.title} />\n    &#x3C;h1 dangerouslySetInnerHTML={{ __html: pageContext.title }} />\n    &#x3C;div dangerouslySetInnerHTML={{ __html: pageContext.content }} />\n  &#x3C;/Layout>\n);\n\nexport default Page;\n</code></pre>\n<ul>\n<li>Go to your project folder Create template <strong><em>portfolio.js</em></strong> under src->templates folder and copy paste the following code</li>\n</ul>\n<pre><code class=\"language-js\">import React from \"react\";\nimport Layout from \"../components/layout\";\nimport styled from \"styled-components\";\nimport Seo from \"../components/seo\";\n\nconst FeaturedImage = styled.img`\n  max-width: 300px;\n  margin: 16px 0;\n`;\n\nconst portfolio = ({ pageContext }) => (\n  &#x3C;Layout>\n    &#x3C;Seo title={pageContext.title} />\n    &#x3C;h1>{pageContext.title}&#x3C;/h1>\n    &#x3C;strong>Website url:&#x3C;/strong>\n    &#x3C;a\n      href={pageContext.portfolio.portfolioUrl}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n    >\n      {pageContext.portfolio.portfolioUrl}\n    &#x3C;/a>\n    &#x3C;div>\n      &#x3C;FeaturedImage src={pageContext.featuredImage.node.sourceUrl} />\n    &#x3C;/div>\n    &#x3C;div dangerouslySetInnerHTML={{ __html: pageContext.content }} />\n  &#x3C;/Layout>\n);\n\nexport default portfolio;\n</code></pre>\n<ul>\n<li>Go to your project folder Create template <strong><em>portfolioUnderContent.js</em></strong> under src->templates fodler and copy paste the following code</li>\n</ul>\n<pre><code class=\"language-js\">import React from \"react\";\nimport Layout from \"../components/layout\";\nimport PortfolioItems from \"../components/PortfolioItems\";\nimport Seo from \"../components/seo\";\nconst PorfolioUnderContent = ({ pageContext }) => (\n  &#x3C;Layout>\n    &#x3C;Seo title={pageContext.title} />\n    &#x3C;h1 dangerouslySetInnerHTML={{ __html: pageContext.title }} />\n    &#x3C;div dangerouslySetInnerHTML={{ __html: pageContext.content }} />\n    &#x3C;PortfolioItems />\n  &#x3C;/Layout>\n);\n\nexport default PorfolioUnderContent;\n</code></pre>\n<ul>\n<li>Go to your project folder Create templates <strong><em>post.js</em></strong> under src->templates folder and copy paste the following code</li>\n</ul>\n<pre><code class=\"language-js\">import React from \"react\";\n\nconst BlogPost = ({ pageContext }) => {\n  return (\n    &#x3C;div>\n      &#x3C;h1>{pageContext.title}&#x3C;/h1>\n    &#x3C;/div>\n  );\n};\n\nexport default BlogPost;\n</code></pre>\n<h4>Step 5: Update the layout of your gatsby website</h4>\n<p>We need to add layout and other necessary component to make our site fully functional</p>\n<ul>\n<li><strong><em>Updating layout</em></strong> Go to your project folder and finsd components folder and inside that folder create file <strong><em>layout.js</em></strong> and just copy paste the following code</li>\n</ul>\n<pre><code class=\"language-js\">import React from \"react\";\nimport MainMenu from \"./MainMenu\";\nimport styled, { createGlobalStyle } from \"styled-components\";\n\nconst GlobalStyles = createGlobalStyle`\n  @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');\n\n  body, html{\n    font-family: 'Open Sans', sans-serif;\n    margin: 0 !important;\n    padding: 0 !important;\n  }\n`;\n\nconst LayoutWrapper = styled.div`\n  max-width: 960px;\n  margin: 0 auto;\n`;\n\nconst Layout = ({ children }) => (\n  &#x3C;div>\n    &#x3C;GlobalStyles />\n    &#x3C;MainMenu />\n    &#x3C;LayoutWrapper>{children}&#x3C;/LayoutWrapper>\n  &#x3C;/div>\n);\n\nexport default Layout;\n</code></pre>\n<ul>\n<li><strong><em>Updating menu</em></strong> Go to your project folder and finsd components folder and inside that folder create file <strong><em>MainMenu.js</em></strong> and just copy paste the following code</li>\n</ul>\n<pre><code class=\"language-js\">import React from \"react\";\nimport { graphql, StaticQuery, Link } from \"gatsby\";\nimport styled from \"styled-components\";\nimport SiteInfo from \"./SiteInfo\";\n\nconst MainMenuWrapper = styled.div`\n  display: flex;\n  background-color: #212529;\n`;\n\nconst MainMenuInner = styled.div`\n  max-width: 960px;\n  margin: 0 auto;\n  display: flex;\n  width: 960px;\n  height: 100%;\n`;\n\nconst MenuItem = styled(Link)`\n  color: white;\n  display: block;\n  padding: 16px 16px;\n`;\n\nconst MainMenu = () => (\n  &#x3C;StaticQuery\n    query={graphql`\n      {\n        wpcontent {\n          menus(where: { slug: \"main-menu\" }) {\n            nodes {\n              menuItems {\n                edges {\n                  node {\n                    url\n                    description\n                    label\n                    path\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n    `}\n    render={(props) => {\n      return (\n        &#x3C;MainMenuWrapper>\n          &#x3C;MainMenuInner>\n            &#x3C;SiteInfo />\n            {props.wpcontent.menus.nodes[0].menuItems.edges.map((item) => (\n              &#x3C;MenuItem to={`${item.node.path}`} key={item.node.label}>\n                {item.node.label}\n              &#x3C;/MenuItem>\n            ))}\n          &#x3C;/MainMenuInner>\n        &#x3C;/MainMenuWrapper>\n      );\n    }}\n  />\n);\n\nexport default MainMenu;\n</code></pre>\n<ul>\n<li><strong><em>Updating portfolio items</em></strong> Go to your project folder and finsd components folder and inside that folder create file PortfolioItems.js and just copy paste the following code</li>\n</ul>\n<pre><code class=\"language-js\">import React from \"react\";\nimport { graphql, StaticQuery, Link } from \"gatsby\";\nimport styled from \"styled-components\";\n\nconst PortfolioItemsWrapper = styled.div`\n  display: flex;\n  justify-content: center;\n`;\n\nconst PortfolioItem = styled.div`\n  width: 300px;\n  border: 1px solid #efefef;\n  padding: 16px;\n  margin: 16px;\n`;\n\nconst PortfolioImage = styled.img`\n  max-width: 100%;\n`;\n\nconst PortfolioItems = () => {\n  return (\n    &#x3C;StaticQuery\n      query={graphql`\n        {\n          wpcontent {\n            portfolios {\n              edges {\n                node {\n                  content\n                  title\n                  slug\n                  link\n                  featuredImage {\n                    node {\n                      sourceUrl\n                    }\n                  }\n                  excerpt\n                }\n              }\n            }\n          }\n        }\n      `}\n      render={(props) => (\n        &#x3C;PortfolioItemsWrapper>\n          {props.wpcontent.portfolios.edges.map((portfolioItem) => (\n            &#x3C;PortfolioItem key={portfolioItem.node.id}>\n              &#x3C;h2>{portfolioItem.node.title}&#x3C;/h2>\n              &#x3C;PortfolioImage\n                src={portfolioItem.node.featuredImage.node.sourceUrl}\n                alt=\"Thumbnail\"\n              />\n              &#x3C;div\n                dangerouslySetInnerHTML={{ __html: portfolioItem.node.excerpt }}\n              />\n              &#x3C;Link to={`/portfolio/${portfolioItem.node.slug}`}>\n                Read more\n              &#x3C;/Link>\n            &#x3C;/PortfolioItem>\n          ))}\n        &#x3C;/PortfolioItemsWrapper>\n      )}\n    />\n  );\n};\n\nexport default PortfolioItems;\n</code></pre>\n<ul>\n<li><strong><em>Updating seo template used for seo purpose</em></strong> Go to your project folder and finsd components folder and inside that folder create file seo.js and just copy paste the following code</li>\n</ul>\n<pre><code class=\"language-js\">/**\n * SEO component that queries for data with\n *  Gatsby's useStaticQuery React hook\n *\n * See: https://www.gatsbyjs.com/docs/use-static-query/\n */\n\nimport * as React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Helmet } from \"react-helmet\";\nimport { useStaticQuery, graphql } from \"gatsby\";\n\nfunction Seo({ description, lang, meta, title }) {\n  const { site } = useStaticQuery(\n    graphql`\n      query {\n        site {\n          siteMetadata {\n            title\n            description\n            author\n          }\n        }\n      }\n    `\n  );\n\n  const metaDescription = description || site.siteMetadata.description;\n  const defaultTitle = site.siteMetadata?.title;\n\n  return (\n    &#x3C;Helmet\n      htmlAttributes={{\n        lang,\n      }}\n      title={title}\n      titleTemplate={defaultTitle ? `%s / ${defaultTitle}` : null}\n      meta={[\n        {\n          name: `description`,\n          content: metaDescription,\n        },\n        {\n          property: `og:title`,\n          content: title,\n        },\n        {\n          property: `og:description`,\n          content: metaDescription,\n        },\n        {\n          property: `og:type`,\n          content: `website`,\n        },\n        {\n          name: `twitter:card`,\n          content: `summary`,\n        },\n        {\n          name: `twitter:creator`,\n          content: site.siteMetadata?.author || ``,\n        },\n        {\n          name: `twitter:title`,\n          content: title,\n        },\n        {\n          name: `twitter:description`,\n          content: metaDescription,\n        },\n      ].concat(meta)}\n    >\n      &#x3C;link\n        href=\"https://fonts.googleapis.com/css?family=Open+Sans\"\n        rel=\"stylesheet\"\n      />\n    &#x3C;/Helmet>\n  );\n}\n\nSeo.defaultProps = {\n  lang: `en`,\n  meta: [],\n  description: ``,\n};\n\nSeo.propTypes = {\n  description: PropTypes.string,\n  lang: PropTypes.string,\n  meta: PropTypes.arrayOf(PropTypes.object),\n  title: PropTypes.string.isRequired,\n};\n\nexport default Seo;\n</code></pre>\n<ul>\n<li><strong><em>Updating Site Info to be diaplyed in header</em></strong> Go to your project folder and find components folder and inside that folder create file SiteInfo.js and just copy paste the following code</li>\n</ul>\n<pre><code class=\"language-js\">import React from \"react\";\nimport { graphql, StaticQuery } from \"gatsby\";\nimport styled from \"styled-components\";\n\nconst SiteInfoWrapper = styled.div`\n  flex-grow: 1;\n  color: white;\n  margin: auto 0;\n`;\n\nconst SiteTitle = styled.div`\n  font-weight: bold;\n`;\n\nconst SiteInfo = () => (\n  &#x3C;StaticQuery\n    query={graphql`\n      {\n        wpcontent {\n          generalSettings {\n            title\n            url\n            description\n          }\n        }\n      }\n    `}\n    render={(props) => (\n      &#x3C;SiteInfoWrapper>\n        &#x3C;SiteTitle>{props.wpcontent.generalSettings.title}&#x3C;/SiteTitle>\n        &#x3C;div>{props.wpcontent.generalSettings.description}&#x3C;/div>\n      &#x3C;/SiteInfoWrapper>\n    )}\n  />\n);\n\nexport default SiteInfo;\n</code></pre>\n<h4>Step 6: Run the gatsby website and wordpress website</h4>\n<p>Run the gatsby website using command</p>\n<pre><code class=\"language-js\"> npm start\n</code></pre>\n<p>Visit your local url and congratulations just now you have created full fledged gatsby and wordpress website</p>","fields":{"slug":"/create-gatsby-wordpress-portfolio-website/"},"frontmatter":{"title":"Create Gatsby and Wordpress portfolio website step by step","date":"June 06, 2022","description":"In this article i will explain you step by step to create gatsby and wordpress portfolio website step by step by creating wordpress as headless wordpress cms","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/Gatsby.jpg"}},"previous":{"fields":{"slug":"/create-gatsby-markdown-blog-website/"},"frontmatter":{"title":"Create Gatsby responsive blog website with markdown files","date":"May 25, 2022","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/Gatsby.jpg"}},"next":{"fields":{"slug":"/deploying-nextjs-app-on-vercel/"},"frontmatter":{"title":"Deploying Next JS App on vercel","date":"June 15, 2022","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/nextjs-and-vercel.jpeg"}}},"pageContext":{"id":"01234bb6-dd89-55cf-9e13-d2f90c279338","previousPostId":"a723ff61-472b-5e27-8834-ad0318aeb460","nextPostId":"471c9b58-1a68-52ce-aa8c-171a232aef92"}},
    "staticQueryHashes": ["3860684146"]}