/workshop-gatsby-wordpress-wpml

Primary LanguageJavaScript

Gatsby Wordpress (ACF and WPML Plugins)

1 - Install Wordpress by Using Docker

  • docker-compose up -d to install wordpress
  • sudo docker exec -it gatsby_wordpress /bin/bash to access to the wordpress source files on "/var/www/html"
  • chmod a+rw /var/www/html/wp-content/themes /var/www/html/wp-content/plugins to temporarily allow full permissions(rwx) for the folder themes folder and plugins
  • Access to the WordPress Dashboard from http://localhost:8000 and install these plugins:
    • ACF Pro or ACF to add custom fields to posts and pages.
    • ACF to REST API to expose Advanced Custom Fields endpoints in the Wordpress REST API
    • WPML Multilingual CMS multilingual Plugin (not FREE)
    • Install WPML-REST-API which adds the current locale and available translations to all post types translated with WPML.
  • Install JSON Viewer chrome extension for formating and highlighting the preview of JSON files.

2 - Create a new Gatsby Project

  • Install gatsby-cli if it's not installed in your Machine
  • Start gatby new gatsby-wordpress to create a new gatsby project.
  • From the gatsby-wordpress folder run the command gatsby develop --host=0.0.0.0 --port=8888 this command include different port 8888, because we already set up wordpress to use the 8000.
  • Access to the Gatsby website from http://localhost:8888

3 - Setup Gatby for Wordpress

  • Install Gatsby Source wordpress npm install --save gatsby-source-wordpress
  • Update gatsby-config.js with the new gatsby-source-wordpress Config
  • Change baseUrl: gatsbyjsexamplewordpress.wordpress.com to baseUrl: localhost:8000 to connect Gatsby to the WordPress Blog.
  • Stop gatsby develop if it's already running, and run gatsby develop --host=0.0.0.0 --port=8888 again to fetch all the posts, pages, media, acf fields...
  • If as an example you want to access to the endopoints of the list of the posts, follow this URL http://localhost:8000/wp-json/wp/v2/posts

4 - Get the Posts Lists

  • Install FakerPress Plugin to generate some dummy Content.
  • Get to the FakerPress from the WordPress Admin Dashboard, click on Posts and generate 10 posts, or any other number you want.
  • Rerun again gatsby develop --host=0.0.0.0 --port=8888 to rebuild everything, because you add some new posts
  • View GraphiQL, which it's an in-browser IDE, to explore the site Data.
  • Add this query on GraphiQL to access to the posts list: 
    {
  allWordpressPost {
    edges {
      node {
        id
        title
      }
    }
  }
}

5 - Create Posts and Pages automatically

  • Pages and Posts will be created automatically after each build.
  • The file responsible for generating posts and pages is gatsby-node.js
  • The generated Posts and Pages has templates src/templates/post.js and src/templates/page.js

6 - Add a Custom Field

  • Add a Gallery Custom Field

  • Set the field to be shown on Pages not Posts

  • Add some image to the Gallery from any page

  • Rerun the command gatsby develop --host=0.0.0.0 --port=8888

  • This is an example of the query responsible for getting the custom field from the ACF plugin, plus defined how the image should be rendered:

    query($id: String!) {
  wordpressPage(id: { eq: $id }) {
    title
    content
    acf {
      gt_gallery {
        id
        localFile {
          childImageSharp {
            fixed(width: 400) {
              # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.
              ...GatsbyImageSharpFixed
            }
          }
        }
      }
    }
  }
}