diff --git a/examples/using-wordpress/gatsby-node.js b/examples/using-wordpress/gatsby-node.js
index 2d6f1e17024b6..b4e92f11b230f 100644
--- a/examples/using-wordpress/gatsby-node.js
+++ b/examples/using-wordpress/gatsby-node.js
@@ -2,22 +2,22 @@ const _ = require(`lodash`)
 const Promise = require(`bluebird`)
 const path = require(`path`)
 const slash = require(`slash`)
- 
-// Implement the Gatsby API “createPages”. This is 
-// called after the Gatsby bootstrap is finished so you have 
-// access to any information necessary to programatically 
-// create pages. 
-// Will create pages for Wordpress pages (route : /{slug}) 
-// Will create pages for Wordpress posts (route : /post/{slug}) 
+
+// Implement the Gatsby API “createPages”. This is
+// called after the Gatsby bootstrap is finished so you have
+// access to any information necessary to programatically
+// create pages.
+// Will create pages for Wordpress pages (route : /{slug})
+// Will create pages for Wordpress posts (route : /post/{slug})
 exports.createPages = ({ graphql, boundActionCreators }) => {
   const { createPage } = boundActionCreators
   return new Promise((resolve, reject) => {
-    // The “graphql” function allows us to run arbitrary 
-    // queries against the local Wordpress graphql schema. Think of 
-    // it like the site has a built-in database constructed 
-    // from the fetched data that you can run queries against. 
- 
-    // ==== PAGES (WORDPRESS NATIVE) ==== 
+    // The “graphql” function allows us to run arbitrary
+    // queries against the local Wordpress graphql schema. Think of
+    // it like the site has a built-in database constructed
+    // from the fetched data that you can run queries against.
+
+    // ==== PAGES (WORDPRESS NATIVE) ====
     graphql(
       `
       {
@@ -41,21 +41,21 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
           console.log(result.errors)
           reject(result.errors)
         }
- 
-        // Create Page pages. 
-        const pageTemplate = path.resolve('./src/templates/page.js')
-        // We want to create a detailed page for each 
-        // page node. We'll just use the Wordpress Slug for the slug. 
-        // The Page ID is prefixed with 'PAGE_' 
+
+        // Create Page pages.
+        const pageTemplate = path.resolve(`./src/templates/page.js`)
+        // We want to create a detailed page for each
+        // page node. We'll just use the Wordpress Slug for the slug.
+        // The Page ID is prefixed with 'PAGE_'
         _.each(result.data.allWordpressPage.edges, edge => {
-          // Gatsby uses Redux to manage its internal state. 
-          // Plugins and sites can use functions like "createPage" 
-          // to interact with Gatsby. 
+          // Gatsby uses Redux to manage its internal state.
+          // Plugins and sites can use functions like "createPage"
+          // to interact with Gatsby.
           createPage({
-            // Each page is required to have a `path` as well 
-            // as a template component. The `context` is 
-            // optional but is often necessary so the template 
-            // can query data specific to each page. 
+            // Each page is required to have a `path` as well
+            // as a template component. The `context` is
+            // optional but is often necessary so the template
+            // can query data specific to each page.
             path: `/${edge.node.slug}/`,
             component: slash(pageTemplate),
             context: {
@@ -64,9 +64,9 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
           })
         })
       })
-      // ==== END PAGES ==== 
- 
-      // ==== POSTS (WORDPRESS NATIVE AND ACF) ====   
+      // ==== END PAGES ====
+
+      // ==== POSTS (WORDPRESS NATIVE AND ACF) ====
       .then(() => {
         graphql(
           `{      
@@ -89,10 +89,10 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
             console.log(result.errors)
             reject(result.errors)
           }
-          const postTemplate = path.resolve('./src/templates/post.js')
-        // We want to create a detailed page for each 
-        // post node. We'll just use the Wordpress Slug for the slug. 
-        // The Post ID is prefixed with 'POST_' 
+          const postTemplate = path.resolve(`./src/templates/post.js`)
+          // We want to create a detailed page for each
+          // post node. We'll just use the Wordpress Slug for the slug.
+          // The Post ID is prefixed with 'POST_'
           _.each(result.data.allWordpressPost.edges, edge => {
             createPage({
               path: `/post/${edge.node.slug}/`,
@@ -104,8 +104,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
           })
           resolve()
         })
-      }) 
-    // ==== END POSTS ====      
- 
+      })
+    // ==== END POSTS ====
   })
-}
\ No newline at end of file
+}
diff --git a/examples/using-wordpress/src/components/Footer.js b/examples/using-wordpress/src/components/Footer.js
index b265c759c9e2e..4aae11cbcbfaf 100644
--- a/examples/using-wordpress/src/components/Footer.js
+++ b/examples/using-wordpress/src/components/Footer.js
@@ -1,13 +1,11 @@
-import React from 'react';
-import { Page, Row } from './styled';
+import React from "react"
+import { Page, Row } from "./styled"
 
 const Footer = props =>
   <footer>
     <Page>
-      <Row height={5}>
-        This is a sample footer.
-      </Row>
+      <Row height={5}>This is a sample footer.</Row>
     </Page>
   </footer>
 
-export default Footer; 
\ No newline at end of file
+export default Footer
diff --git a/examples/using-wordpress/src/components/Header.js b/examples/using-wordpress/src/components/Header.js
index 2dcc2d4bc0919..9b17b67e66300 100644
--- a/examples/using-wordpress/src/components/Header.js
+++ b/examples/using-wordpress/src/components/Header.js
@@ -1,39 +1,49 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Link from 'gatsby-link';
-import { H1, H2, H3, H4 } from '../components/styled';
-import { Row, Page, Column } from './styled';
-
-const Header = ({ title, subtitle, pages }) => {
+import React from "react"
+import PropTypes from "prop-types"
+import Link from "gatsby-link"
+import { H1, H2, H3, H4 } from "../components/styled"
+import { Row, Page, Column } from "./styled"
 
+const Header = ({ title, subtitle, pages }) => 
   // TODO : Sort order of menu based on field menu_order
-  return (
+   (
     <Page>
       <Row>
-        <H3>{title}</H3>
+        <H3>
+          {title}
+        </H3>
       </Row>
       <Row>
-        <H4>{subtitle}</H4>
+        <H4>
+          {subtitle}
+        </H4>
       </Row>
       <Row>
         <Column fluid xs={1} sm={10} md={10} lg={10}>
-        <span><Link to={'/'}>Home</Link> - </span>
+          <span>
+            <Link to={`/`}>Home</Link> -{` `}
+          </span>
           {pages.edges.map((p, i) => {
-            if (p.node.slug == 'blog') return
-            if (p.node.slug == 'home') return
-            return <span key={p.node.id}>{i !== 0 ? ' - ' : ''}<Link to={p.node.slug}>{unescape(p.node.title)}</Link></span>
+            if (p.node.slug == `blog`) return
+            if (p.node.slug == `home`) return
+            return (
+              <span key={p.node.id}>
+                {i !== 0 ? ` - ` : ``}
+                <Link to={p.node.slug}>
+                  {unescape(p.node.title)}
+                </Link>
+              </span>
+            )
           })}
         </Column>
         <hr />
       </Row>
     </Page>
   )
-}
 
 Header.propTypes = {
   title: PropTypes.string,
   pages: PropTypes.object.isRequired,
 }
 
-
-export default Header;
\ No newline at end of file
+export default Header
diff --git a/examples/using-wordpress/src/components/PostPreview.js b/examples/using-wordpress/src/components/PostPreview.js
index 47bf4b5bd226d..b4b51ebc29407 100644
--- a/examples/using-wordpress/src/components/PostPreview.js
+++ b/examples/using-wordpress/src/components/PostPreview.js
@@ -1,21 +1,34 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Row, Page, Column, BlockLink, P2, P4 } from './styled';
-import styled from 'styled-components';
-import theme from './styled/theme';
+import React from "react"
+import PropTypes from "prop-types"
+import { Row, Page, Column, BlockLink, P2, P4 } from "./styled"
+import styled from "styled-components"
+import theme from "./styled/theme"
 
-const BlogPreviewImg = styled.img`
-  width: 100%;
-`;
+const BlogPreviewImg = styled.img`width: 100%;`
 
 const PostPreview = ({ article, id }) => {
-  console.log('article is', article)
+  console.log(`article is`, article)
   return (
     <Column outline fluid xs={4} sm={4} md={4} lg={4}>
-      <BlockLink to={`/post/${id}`} paddingHorizontal={2} paddingTop={2} paddingBottom={5} block>
-        <BlogPreviewImg src={'http://via.placeholder.com/416x245'} alt="placeholder"/>
-        <P2 color={theme.color.han} dangerouslySetInnerHTML={{ __html: article.node.title }}></P2>
-        <P4 color={theme.color.han} dangerouslySetInnerHTML={{ __html: article.node.excerpt }}></P4>
+      <BlockLink
+        to={`/post/${id}`}
+        paddingHorizontal={2}
+        paddingTop={2}
+        paddingBottom={5}
+        block
+      >
+        <BlogPreviewImg
+          src={`http://via.placeholder.com/416x245`}
+          alt="placeholder"
+        />
+        <P2
+          color={theme.color.han}
+          dangerouslySetInnerHTML={{ __html: article.node.title }}
+        />
+        <P4
+          color={theme.color.han}
+          dangerouslySetInnerHTML={{ __html: article.node.excerpt }}
+        />
         <P4 color={theme.color.link}>Read More</P4>
       </BlockLink>
     </Column>
@@ -27,4 +40,4 @@ PostPreview.propType = {
   id: PropTypes.string,
 }
 
-export default PostPreview;
\ No newline at end of file
+export default PostPreview
diff --git a/examples/using-wordpress/src/components/PostsListSearchable.js b/examples/using-wordpress/src/components/PostsListSearchable.js
index 3e795d391f423..8aad87947fbd9 100644
--- a/examples/using-wordpress/src/components/PostsListSearchable.js
+++ b/examples/using-wordpress/src/components/PostsListSearchable.js
@@ -1,68 +1,63 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { H3, Row, Page, Column } from './styled';
-import PostPreview from './PostPreview'
+import React, { Component } from "react"
+import PropTypes from "prop-types"
+import { H3, Row, Page, Column } from "./styled"
+import PostPreview from "./PostPreview"
 
 class PostsListSearchable extends Component {
-
   // Put the props in the state
   constructor(props) {
     super(props)
     this.state = {
-      data: this.props.propsData.allWordpressPost.edges
+      data: this.props.propsData.allWordpressPost.edges,
     }
   }
 
   handleFilter = id => {
     this.setState({
-      data: this.props.propsData.allWordpressPost.edges.filter(p => {
-        return p.node.categories.includes(id.replace('CATEGORY_', ''))
-      })
+      data: this.props.propsData.allWordpressPost.edges.filter(p => p.node.categories.includes(id.replace(`CATEGORY_`, ``))),
     })
   }
 
-  resetFilter = () => this.setState({ data: this.props.propsData.allWordpressPost.edges })
+  resetFilter = () =>
+    this.setState({ data: this.props.propsData.allWordpressPost.edges })
 
   render() {
-
     return (
       <Page>
         <H3>The latests blog posts</H3>
         <Row gutter gutterWhite>
           <Column fluid xs={1} sm={10} md={10} lg={10}>
-          <span>Filter by category: </span>
+            <span>Filter by category: </span>
             <span onClick={() => this.resetFilter()}>All - </span>
-            {
-              this.props.propsData.allWordpressCategory.edges.map((cat, i) => {
-
-                return (<span
-                    key={cat.node.id}
-                    onClick={() => this.handleFilter(cat.node.id)}
-                  >
-                    {i !== 0 ? ' - ':''}{cat.node.name}
-                  </span>)
-              })
-            }
+            {this.props.propsData.allWordpressCategory.edges.map((cat, i) => (
+                <span
+                  key={cat.node.id}
+                  onClick={() => this.handleFilter(cat.node.id)}
+                >
+                  {i !== 0 ? ` - ` : ``}
+                  {cat.node.name}
+                </span>
+              ))}
             <span onClick={() => this.resetFilter()}> - Reset filter</span>
           </Column>
         </Row>
         <Row gutter>
-          {
-            this.state.data.map(article =>
-              <PostPreview key={article.node.slug} id={article.node.slug} article={article} />)}
-        </Row>
-        <Row gutter height={19}>
+          {this.state.data.map(article =>
+            <PostPreview
+              key={article.node.slug}
+              id={article.node.slug}
+              article={article}
+            />
+          )}
         </Row>
+        <Row gutter height={19} />
       </Page>
     )
   }
-
-
 }
 
-
 PostsListSearchable.propTypes = {
   propsData: PropTypes.object.isRequired,
 }
 
-export default PostsListSearchable;
\ No newline at end of file
+export default PostsListSearchable
diff --git a/examples/using-wordpress/src/components/styled/index.js b/examples/using-wordpress/src/components/styled/index.js
index c59ea262212d7..d8d1375e3da93 100644
--- a/examples/using-wordpress/src/components/styled/index.js
+++ b/examples/using-wordpress/src/components/styled/index.js
@@ -1,131 +1,134 @@
-import React from 'react';
-import styled, { injectGlobal, extend } from 'styled-components';
-import Link from 'gatsby-link';
-import * as PR from './propReceivers';
-import theme from './theme';
-import { fontFaceHelper } from '../../utils/fontFaceHelper';
-export {
-  Page,
-  Row,
-  Column
-} from './layout';
-
-
-const { ftz, color } = theme;
-
+import React from "react"
+import styled, { injectGlobal, extend } from "styled-components"
+import Link from "gatsby-link"
+import * as PR from "./propReceivers"
+import theme from "./theme"
+import { fontFaceHelper } from "../../utils/fontFaceHelper"
+export { Page, Row, Column } from "./layout"
 
+const { ftz, color } = theme
 
 /* Global Styles */
 injectGlobal`
-  ${fontFaceHelper('butler', 'butler_black-webfont')}
-  ${fontFaceHelper('butler', 'butler_black_stencil-webfont', 'normal')}
-  ${fontFaceHelper('butler', 'butler_regular-webfont')}
+  ${fontFaceHelper(`butler`, `butler_black-webfont`)}
+  ${fontFaceHelper(`butler`, `butler_black_stencil-webfont`, `normal`)}
+  ${fontFaceHelper(`butler`, `butler_regular-webfont`)}
   body {
     font-family: 'butler', sans-serif;
     margin: 0;
     background-color: ${color.lightGray};
   }
-`;
-
+`
 
 /* Global Tags */
 export const H1 = styled.h1`
-  ${props => PR.ftzProps(props, ftz.h1)}
-  ${props => PR.colorProps(props)}
-  ${PR.marginProps}
-`;
+  ${props => PR.ftzProps(props, ftz.h1)} ${props =>
+      PR.colorProps(props)} ${PR.marginProps};
+`
 export const H2 = styled.h2`
-  ${props => PR.ftzProps(props, ftz.h2)}
-  ${props => PR.colorProps(props)}
-  ${PR.marginProps}
-`;
+  ${props => PR.ftzProps(props, ftz.h2)} ${props =>
+      PR.colorProps(props)} ${PR.marginProps};
+`
 export const H3 = styled.h3`
-  ${props => PR.ftzProps(props, ftz.h3)}
-  ${props => PR.colorProps(props)}
-  ${PR.marginProps}
-`;
+  ${props => PR.ftzProps(props, ftz.h3)} ${props =>
+      PR.colorProps(props)} ${PR.marginProps};
+`
 export const H4 = styled.h4`
-  ${props => PR.ftzProps(props, ftz.h4)}
-  ${props => PR.colorProps(props)}
-  ${PR.marginProps}
-`;
+  ${props => PR.ftzProps(props, ftz.h4)} ${props =>
+      PR.colorProps(props)} ${PR.marginProps};
+`
 export const H5 = styled.h5`
-  ${props => PR.ftzProps(props, ftz.h5)}
-  ${props => PR.colorProps(props)}
-  ${PR.marginProps}
-`;
+  ${props => PR.ftzProps(props, ftz.h5)} ${props =>
+      PR.colorProps(props)} ${PR.marginProps};
+`
 export const H6 = styled.h6`
-  ${props => PR.ftzProps(props, ftz.h6)}
-  ${props => PR.colorProps(props)}
-  ${PR.marginProps}
-`;
+  ${props => PR.ftzProps(props, ftz.h6)} ${props =>
+      PR.colorProps(props)} ${PR.marginProps};
+`
 export const H7 = styled.h6`
-  ${props => PR.ftzProps(props, ftz.h6)}
-  ${props => PR.colorProps(props)}
-  ${PR.marginProps}
-`;
+  ${props => PR.ftzProps(props, ftz.h6)} ${props =>
+      PR.colorProps(props)} ${PR.marginProps};
+`
 export const P1 = styled.p`
-  ${props => PR.ftzProps(props, ftz.p1)}
-  ${props => PR.colorProps(props)}
-  ${PR.marginProps}
-`;
+  ${props => PR.ftzProps(props, ftz.p1)} ${props =>
+      PR.colorProps(props)} ${PR.marginProps};
+`
 export const P2 = styled.p`
-  ${props => PR.ftzProps(props, ftz.p2)}
-  ${props => PR.colorProps(props)}
-  ${PR.marginProps}
-`;
+  ${props => PR.ftzProps(props, ftz.p2)} ${props =>
+      PR.colorProps(props)} ${PR.marginProps};
+`
 export const P3 = styled.p`
-  ${props => PR.ftzProps(props, ftz.p3)}
-  ${props => PR.colorProps(props)}
-  ${PR.marginProps}
-`;
+  ${props => PR.ftzProps(props, ftz.p3)} ${props =>
+      PR.colorProps(props)} ${PR.marginProps};
+`
 export const P4 = styled.p`
-  ${props => PR.ftzProps(props, ftz.p4)}
-  ${props => PR.colorProps(props)}
-  ${PR.marginProps}
-`;
+  ${props => PR.ftzProps(props, ftz.p4)} ${props =>
+      PR.colorProps(props)} ${PR.marginProps};
+`
 export const P5 = styled.p`
-  ${props => PR.ftzProps(props, ftz.p5)}
-  ${props => PR.colorProps(props)}
-  ${PR.marginProps}
-`;
-
+  ${props => PR.ftzProps(props, ftz.p5)} ${props =>
+      PR.colorProps(props)} ${PR.marginProps};
+`
 
 /* Links */
-export const DefaultLink = styled(({
-  h1, h2, h3, h4, h5, h6, h7, p1, p2, p3, p4, p5, ftz, 
-  marginBottom, marginTop, marginLeft, marginRight, margin, marginVertical, marginHorizontal,
-  paddingBottom, paddingTop, paddingLeft, paddingRight, padding, paddingVertical, paddingHorizontal,
-  color, 
-  colorHover,
-  underline,
-  block,
-  ...rest
-}) => <Link {...rest}/>)`
+export const DefaultLink = styled(
+  ({
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    h7,
+    p1,
+    p2,
+    p3,
+    p4,
+    p5,
+    ftz,
+    marginBottom,
+    marginTop,
+    marginLeft,
+    marginRight,
+    margin,
+    marginVertical,
+    marginHorizontal,
+    paddingBottom,
+    paddingTop,
+    paddingLeft,
+    paddingRight,
+    padding,
+    paddingVertical,
+    paddingHorizontal,
+    color,
+    colorHover,
+    underline,
+    block,
+    ...rest
+  }) => <Link {...rest} />
+)`
   ${props => PR.ftzProps(props)}
   ${props => PR.colorProps(props, color.link)}
-  text-decoration: ${props => props.underline ? 'underline' : 'none'};
+  text-decoration: ${props => (props.underline ? `underline` : `none`)};
   &:hover {
-    ${props => PR.colorHoverProps(props, 'blue')}
-    ${props => props.block && typeof(props.block) === 'boolean' && `background-color: ${color.white}`}
+    ${props => PR.colorHoverProps(props, `blue`)}
+    ${props =>
+      props.block &&
+      typeof props.block === `boolean` &&
+      `background-color: ${color.white}`}
   }
-`;
+`
 
-export const StyledLink = DefaultLink.extend`
-  ${PR.marginProps}
-`;
+export const StyledLink = DefaultLink.extend`${PR.marginProps};`
 
 export const BlockLink = DefaultLink.extend`
-  ${PR.paddingProps}
-  display: block;
+  ${PR.paddingProps} display: block;
   &:hover {
-    background-color: ${color.white}
+    background-color: ${color.white};
   }
-`;
+`
 
 export const Div = styled.footer`
   ${PR.backgroundProps};
   ${PR.heightProps};
-`;
-
-
+`
diff --git a/examples/using-wordpress/src/components/styled/layout.js b/examples/using-wordpress/src/components/styled/layout.js
index ee7a43fc0f482..6cb5ae34c5012 100644
--- a/examples/using-wordpress/src/components/styled/layout.js
+++ b/examples/using-wordpress/src/components/styled/layout.js
@@ -1,14 +1,14 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-import { compute, ifDefined } from '../../utils/hedron';
-import * as PR from './propReceivers';
+import React from "react"
+import styled, { css } from "styled-components"
+import { compute, ifDefined } from "../../utils/hedron"
+import * as PR from "./propReceivers"
 import {
   Page as HedronPage,
   Row as HedronRow,
-  Column as HedronColumn
-} from 'hedron';
-import theme from './theme';
-const { sizes, color } = theme;
+  Column as HedronColumn,
+} from "hedron"
+import theme from "./theme"
+const { sizes, color } = theme
 
 /*
  * Media Queries
@@ -18,7 +18,6 @@ const { sizes, color } = theme;
  * lg: 992 and beyound 
  */
 
-
 // const media = {
 //   tablet: (...args) => css`
 //     @media (min-width: 420px) {
@@ -29,12 +28,12 @@ const { sizes, color } = theme;
 
 // Iterate through the sizes and create a media template
 export const media = Object.keys(sizes).reduce((acc, label) => {
-	acc[label] = (...args) => css`
+  acc[label] = (...args) => css`
 		@media (max-width: ${sizes[label] / 16}em) {
 			${css(...args)}
 		}
 	`
-	return acc
+  return acc
 }, {})
 
 /*
@@ -43,30 +42,24 @@ export const media = Object.keys(sizes).reduce((acc, label) => {
 export const Page = styled(HedronPage)`
   ${props =>
     props.fluid
-      ? 'width: 100%;'
+      ? `width: 100%;`
       : `
     margin: 0 auto;
     max-width: 100%;
-    ${props.width
-      ? `width: ${props.width};`
-      : `width: ${sizes.max};`
-    }
-    `
-  }
-`;
-
+    ${props.width ? `width: ${props.width};` : `width: ${sizes.max};`}
+    `}
+`
 
 export const RowHedron = styled(HedronRow)`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  ${ifDefined('alignContent', 'align-content')}
-  ${ifDefined('alignItems', 'align-items')}
-  ${ifDefined('alignSelf', 'align-self')}
-  ${ifDefined('justifyContent', 'justify-content')}
-  ${ifDefined('order')}
-`;
-
+  ${ifDefined(`alignContent`, `align-content`)}
+  ${ifDefined(`alignItems`, `align-items`)}
+  ${ifDefined(`alignSelf`, `align-self`)}
+  ${ifDefined(`justifyContent`, `justify-content`)}
+  ${ifDefined(`order`)}
+`
 
 export const gutter = props => css`
   padding-right: 40px;
@@ -75,41 +68,47 @@ export const gutter = props => css`
     padding-right: 15px;
     padding-left: 15px;
   `}
-`;
-
+`
 
-export const Row = styled(({ 
-  gutter, 
-  gutterWhite,
-  height, 
-  borderBottom, borderTop, borderLeft, borderRight,
-  outline,
-  ...rest 
-  }) => <RowHedron {...rest}/> )`
+export const Row = styled(
+  ({
+    gutter,
+    gutterWhite,
+    height,
+    borderBottom,
+    borderTop,
+    borderLeft,
+    borderRight,
+    outline,
+    ...rest
+  }) => <RowHedron {...rest} />
+)`
 
-  ${props => props.gutter && gutter };
-  ${props => css` background-color: ${props.gutterWhite ? color.white : color.lightGray}`};
+  ${props => props.gutter && gutter};
+  ${props =>
+    css` background-color: ${props.gutterWhite
+      ? color.white
+      : color.lightGray}`};
   ${PR.heightProps};
   ${PR.borderProps};
   ${PR.outlineProps};
-`;
-
+`
 
-export const Column = styled(({
-  outline, ...rest
-  }) => <HedronColumn {...rest}/>)`
+export const Column = styled(({ outline, ...rest }) =>
+  <HedronColumn {...rest} />
+)`
   display: block;
-  ${props => props.debug
-    ? `background-color: rgba(50, 50, 255, .1);
+  ${props =>
+    props.debug
+      ? `background-color: rgba(50, 50, 255, .1);
   outline: 1px solid #fff;`
-    : ''
-  }
+      : ``}
   box-sizing: border-box;
   padding: 0;
   width: 100%;
-  ${compute('xs')}
-  ${compute('sm')}
-  ${compute('md')}
-  ${compute('lg')}
+  ${compute(`xs`)}
+  ${compute(`sm`)}
+  ${compute(`md`)}
+  ${compute(`lg`)}
   ${PR.outlineProps}
-`;
\ No newline at end of file
+`
diff --git a/examples/using-wordpress/src/components/styled/propReceivers.js b/examples/using-wordpress/src/components/styled/propReceivers.js
index 90ed50fd49332..41b12408678d5 100644
--- a/examples/using-wordpress/src/components/styled/propReceivers.js
+++ b/examples/using-wordpress/src/components/styled/propReceivers.js
@@ -1,94 +1,229 @@
-import { css } from 'styled-components';
-import theme from './theme';
-const { ftz, color, goldenRatio } = theme; 
+import { css } from "styled-components"
+import theme from "./theme"
+const { ftz, color, goldenRatio } = theme
 
-// FONT SIZES 
+// FONT SIZES
 const ftzMap = p => {
-  if(p.h1) { return css`font-size: ${ftz.h1};`; }
-  if(p.h2) { return css`font-size: ${ftz.h2};`; }
-  if(p.h3) { return css`font-size: ${ftz.h3};`; }
-  if(p.h4) { return css`font-size: ${ftz.h4};`; }
-  if(p.h5) { return css`font-size: ${ftz.h5};`; }
-  if(p.h6) { return css`font-size: ${ftz.h6};`; }
-  if(p.h7) { return css`font-size: ${ftz.h7};`; }
-  if(p.p1) { return css`font-size: ${ftz.p1};`; }
-  if(p.p2) { return css`font-size: ${ftz.p2};`; }
-  if(p.p3) { return css`font-size: ${ftz.p3};`; }
-  if(p.p4) { return css`font-size: ${ftz.p4};`; }
-  if(p.p5) { return css`font-size: ${ftz.p5};`; }
+  if (p.h1) {
+    return css`font-size: ${ftz.h1};`
+  }
+  if (p.h2) {
+    return css`font-size: ${ftz.h2};`
+  }
+  if (p.h3) {
+    return css`font-size: ${ftz.h3};`
+  }
+  if (p.h4) {
+    return css`font-size: ${ftz.h4};`
+  }
+  if (p.h5) {
+    return css`font-size: ${ftz.h5};`
+  }
+  if (p.h6) {
+    return css`font-size: ${ftz.h6};`
+  }
+  if (p.h7) {
+    return css`font-size: ${ftz.h7};`
+  }
+  if (p.p1) {
+    return css`font-size: ${ftz.p1};`
+  }
+  if (p.p2) {
+    return css`font-size: ${ftz.p2};`
+  }
+  if (p.p3) {
+    return css`font-size: ${ftz.p3};`
+  }
+  if (p.p4) {
+    return css`font-size: ${ftz.p4};`
+  }
+  if (p.p5) {
+    return css`font-size: ${ftz.p5};`
+  }
 }
-export const ftzPropsVar = { h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6', h7: 'h7', p1: 'p1', p2: 'p2', p3: 'p3', p4: 'p4', p5: 'p5', ftz: 'ftz' }; 
-export const ftzProps = (props, def='inherit') => {
-  if (props.h1 || props.h2 || props.h3 || props.h4 || props.h5 || props.h6 || props.h7 || props.p1 || props.p2 || props.p3 || props.p4 || props.p5){
-    return ftzMap(props);
-  } else if(props.ftz) {
-    return css`font-size: ${props.ftz};`;
+export const ftzPropsVar = {
+  h1: `h1`,
+  h2: `h2`,
+  h3: `h3`,
+  h4: `h4`,
+  h5: `h5`,
+  h6: `h6`,
+  h7: `h7`,
+  p1: `p1`,
+  p2: `p2`,
+  p3: `p3`,
+  p4: `p4`,
+  p5: `p5`,
+  ftz: `ftz`,
+}
+export const ftzProps = (props, def = `inherit`) => {
+  if (
+    props.h1 ||
+    props.h2 ||
+    props.h3 ||
+    props.h4 ||
+    props.h5 ||
+    props.h6 ||
+    props.h7 ||
+    props.p1 ||
+    props.p2 ||
+    props.p3 ||
+    props.p4 ||
+    props.p5
+  ) {
+    return ftzMap(props)
+  } else if (props.ftz) {
+    return css`font-size: ${props.ftz};`
   } else {
-    return css`font-size: ${def};`;
+    return css`font-size: ${def};`
   }
 }
 
 // COLOR
-export const colorProps = (props, def='inherit') => css`
-  color: ${props.color && typeof(props.color === 'string') ? props.color : def};
-`;
-export const colorHoverProps = (props, def='inherit') => css`
-  color: ${props.colorHover && typeof(props.colorHover === 'string') ? props.colorHover : def};
-`;
+export const colorProps = (props, def = `inherit`) => css`
+  color: ${props.color && typeof (props.color === `string`)
+    ? props.color
+    : def};
+`
+export const colorHoverProps = (props, def = `inherit`) => css`
+  color: ${props.colorHover && typeof (props.colorHover === `string`)
+    ? props.colorHover
+    : def};
+`
 
 // MARGIN
-export const marginPropsVar = { marginBottom: 'marginBottom', marginTop: 'marginTop', marginLeft: 'marginLeft', marginRight: 'marginRight', margin: 'margin', marginVertical: 'marginVertical', marginHorizontal: 'marginHorizontal' };
+export const marginPropsVar = {
+  marginBottom: `marginBottom`,
+  marginTop: `marginTop`,
+  marginLeft: `marginLeft`,
+  marginRight: `marginRight`,
+  margin: `margin`,
+  marginVertical: `marginVertical`,
+  marginHorizontal: `marginHorizontal`,
+}
 export const marginProps = props => css`
-  ${props.marginBottom && `margin-bottom: ${typeof (props.marginBottom) === 'string' ? props.marginBottom : `${(props.marginBottom * goldenRatio)}px` || '1em'}`};
-  ${props.marginTop && `margin-top: ${typeof (props.marginTop) === 'string' ? props.marginTop : `${(props.marginTop * goldenRatio)}px` || '1em'}`};
-  ${props.marginLeft && `margin-left: ${typeof (props.marginLeft) === 'string' ? props.marginLeft : `${(props.marginLeft * goldenRatio)}px` || '1em'}`};
-  ${props.marginRight && `margin-right: ${typeof (props.marginRight) === 'string' ? props.marginRight : `${(props.marginRight * goldenRatio)}px` || '1em'}`};
-  ${props.margin && `margin: ${typeof (props.margin) === 'string' ? props.margin : `${(props.margin * goldenRatio)}px` || '1em'}`};
-  ${props.marginVertical && `
-    margin-top: ${typeof (props.marginVertical) === 'string' ? props.marginVertical : `${(props.marginVertical * goldenRatio)}px` || '1em'};
-    margin-bottom: ${typeof (props.marginVertical) === 'string' ? props.marginVertical : `${(props.marginVertical * goldenRatio)}px` || '1em'};
+  ${props.marginBottom &&
+    `margin-bottom: ${typeof props.marginBottom === `string`
+      ? props.marginBottom
+      : `${props.marginBottom * goldenRatio}px` || `1em`}`};
+  ${props.marginTop &&
+    `margin-top: ${typeof props.marginTop === `string`
+      ? props.marginTop
+      : `${props.marginTop * goldenRatio}px` || `1em`}`};
+  ${props.marginLeft &&
+    `margin-left: ${typeof props.marginLeft === `string`
+      ? props.marginLeft
+      : `${props.marginLeft * goldenRatio}px` || `1em`}`};
+  ${props.marginRight &&
+    `margin-right: ${typeof props.marginRight === `string`
+      ? props.marginRight
+      : `${props.marginRight * goldenRatio}px` || `1em`}`};
+  ${props.margin &&
+    `margin: ${typeof props.margin === `string`
+      ? props.margin
+      : `${props.margin * goldenRatio}px` || `1em`}`};
+  ${props.marginVertical &&
+    `
+    margin-top: ${typeof props.marginVertical === `string`
+      ? props.marginVertical
+      : `${props.marginVertical * goldenRatio}px` || `1em`};
+    margin-bottom: ${typeof props.marginVertical === `string`
+      ? props.marginVertical
+      : `${props.marginVertical * goldenRatio}px` || `1em`};
   `};
-  ${props.marginHorizontal && `
-    margin-left: ${typeof (props.marginHorizontal) === 'string' ? props.marginHorizontal : `${(props.marginHorizontal * goldenRatio)}px` || '1em'};
-    margin-right: ${typeof (props.marginHorizontal) === 'string' ? props.marginHorizontal : `${(props.marginHorizontal * goldenRatio)}px` || '1em'};
+  ${props.marginHorizontal &&
+    `
+    margin-left: ${typeof props.marginHorizontal === `string`
+      ? props.marginHorizontal
+      : `${props.marginHorizontal * goldenRatio}px` || `1em`};
+    margin-right: ${typeof props.marginHorizontal === `string`
+      ? props.marginHorizontal
+      : `${props.marginHorizontal * goldenRatio}px` || `1em`};
   `};
-`;
+`
 
 // PADDING
-export const paddingPropsVar = { paddingBottom: 'paddingBottom', paddingTop: 'paddingTop', paddingLeft: 'paddingLeft', paddingRight: 'paddingRight', padding: 'padding', paddingVertical: 'paddingVertical', paddingHorizontal: 'paddingHorizontal' };
+export const paddingPropsVar = {
+  paddingBottom: `paddingBottom`,
+  paddingTop: `paddingTop`,
+  paddingLeft: `paddingLeft`,
+  paddingRight: `paddingRight`,
+  padding: `padding`,
+  paddingVertical: `paddingVertical`,
+  paddingHorizontal: `paddingHorizontal`,
+}
 export const paddingProps = props => css`
-  ${props.paddingBottom && `padding-bottom: ${typeof (props.paddingBottom) === 'string' ? props.paddingBottom : `${(props.paddingBottom * goldenRatio)}px` || '1em'}`};
-  ${props.paddingTop && `padding-top: ${typeof (props.paddingTop) === 'string' ? props.paddingTop : `${(props.paddingTop * goldenRatio)}px` || '1em'}`};
-  ${props.paddingLeft && `padding-left: ${typeof (props.paddingLeft) === 'string' ? props.paddingLeft : `${(props.paddingLeft * goldenRatio)}px` || '1em'}`};
-  ${props.paddingRight && `padding-right: ${typeof (props.paddingRight) === 'string' ? props.paddingRight : `${(props.paddingRight * goldenRatio)}px` || '1em'}`};
-  ${props.padding && `padding: ${typeof (props.padding) === 'string' ? props.padding : `${(props.padding * goldenRatio)}px` || '1em'}`};
-  ${props.paddingVertical && `
-    padding-top: ${typeof (props.paddingVertical) === 'string' ? props.paddingVertical : `${(props.paddingVertical * goldenRatio)}px` || '1em'};
-    padding-bottom: ${typeof (props.paddingVertical) === 'string' ? props.paddingVertical : `${(props.paddingVertical * goldenRatio)}px` || '1em'};
+  ${props.paddingBottom &&
+    `padding-bottom: ${typeof props.paddingBottom === `string`
+      ? props.paddingBottom
+      : `${props.paddingBottom * goldenRatio}px` || `1em`}`};
+  ${props.paddingTop &&
+    `padding-top: ${typeof props.paddingTop === `string`
+      ? props.paddingTop
+      : `${props.paddingTop * goldenRatio}px` || `1em`}`};
+  ${props.paddingLeft &&
+    `padding-left: ${typeof props.paddingLeft === `string`
+      ? props.paddingLeft
+      : `${props.paddingLeft * goldenRatio}px` || `1em`}`};
+  ${props.paddingRight &&
+    `padding-right: ${typeof props.paddingRight === `string`
+      ? props.paddingRight
+      : `${props.paddingRight * goldenRatio}px` || `1em`}`};
+  ${props.padding &&
+    `padding: ${typeof props.padding === `string`
+      ? props.padding
+      : `${props.padding * goldenRatio}px` || `1em`}`};
+  ${props.paddingVertical &&
+    `
+    padding-top: ${typeof props.paddingVertical === `string`
+      ? props.paddingVertical
+      : `${props.paddingVertical * goldenRatio}px` || `1em`};
+    padding-bottom: ${typeof props.paddingVertical === `string`
+      ? props.paddingVertical
+      : `${props.paddingVertical * goldenRatio}px` || `1em`};
   `};
-  ${props.paddingHorizontal && `
-    padding-left: ${typeof (props.paddingHorizontal) === 'string' ? props.paddingHorizontal : `${(props.paddingHorizontal * goldenRatio)}px` || '1em'};
-    padding-right: ${typeof (props.paddingHorizontal) === 'string' ? props.paddingHorizontal : `${(props.paddingHorizontal * goldenRatio)}px` || '1em'};
+  ${props.paddingHorizontal &&
+    `
+    padding-left: ${typeof props.paddingHorizontal === `string`
+      ? props.paddingHorizontal
+      : `${props.paddingHorizontal * goldenRatio}px` || `1em`};
+    padding-right: ${typeof props.paddingHorizontal === `string`
+      ? props.paddingHorizontal
+      : `${props.paddingHorizontal * goldenRatio}px` || `1em`};
   `};
-`;
+`
 
 export const borderProps = props => css`
-  ${props.borderBottom && `border-bottom: ${props.borderWidth || '1px'} solid ${color.white}`};
-  ${props.borderTop && `border-top: ${props.borderWidth || '1px'} solid ${color.white}`};
-  ${props.borderLeft && `border-left: ${props.borderWidth || '1px'} solid ${color.white}`};
-  ${props.borderRight && `border-right: ${props.borderWidth || '1px'} solid ${color.white}`};
-`;
+  ${props.borderBottom &&
+    `border-bottom: ${props.borderWidth || `1px`} solid ${color.white}`};
+  ${props.borderTop &&
+    `border-top: ${props.borderWidth || `1px`} solid ${color.white}`};
+  ${props.borderLeft &&
+    `border-left: ${props.borderWidth || `1px`} solid ${color.white}`};
+  ${props.borderRight &&
+    `border-right: ${props.borderWidth || `1px`} solid ${color.white}`};
+`
 
 export const backgroundProps = props => css`
-  ${props.bgWhite && typeof(props.bgWhite) === 'boolean' && `background-color: ${color.white};`};
-  ${props.bgGrey && typeof(props.bgGrey) === 'boolean' && `background-color: ${color.gray};`};
-  ${props.bgColor && typeof(props.bgColor) === 'string' && `background-color: ${props.bgColor};`};
-`;
+  ${props.bgWhite &&
+    typeof props.bgWhite === `boolean` &&
+    `background-color: ${color.white};`};
+  ${props.bgGrey &&
+    typeof props.bgGrey === `boolean` &&
+    `background-color: ${color.gray};`};
+  ${props.bgColor &&
+    typeof props.bgColor === `string` &&
+    `background-color: ${props.bgColor};`};
+`
 
 export const heightProps = props => css`
-  ${props.height && typeof(props.height) === 'number' && `height: ${goldenRatio * props.height}px;`}
-`;
+  ${props.height &&
+    typeof props.height === `number` &&
+    `height: ${goldenRatio * props.height}px;`}
+`
 
 export const outlineProps = props => css`
-  ${props.outline && typeof(props.outline) === 'boolean' && 'outline: 1px solid white' }
-`;
\ No newline at end of file
+  ${props.outline &&
+    typeof props.outline === `boolean` &&
+    `outline: 1px solid white`}
+`
diff --git a/examples/using-wordpress/src/components/styled/theme.js b/examples/using-wordpress/src/components/styled/theme.js
index ac80a2e9cd5a4..9569fd88ab4f0 100644
--- a/examples/using-wordpress/src/components/styled/theme.js
+++ b/examples/using-wordpress/src/components/styled/theme.js
@@ -3,31 +3,31 @@ export const theme = {
     lg: 992,
     md: 768,
     sm: 450,
-    max: '1200px',
+    max: `1200px`,
   },
   goldenRatio: 7,
   color: {
-    gray: '#bfbfbf',
-    lightGray: '#efefef',
-    red: '#ac3842',
-    link: '#008caa',
-    white: '#fff',
-    han: '#464646',
+    gray: `#bfbfbf`,
+    lightGray: `#efefef`,
+    red: `#ac3842`,
+    link: `#008caa`,
+    white: `#fff`,
+    han: `#464646`,
   },
   ftz: {
-    h1: '77px',
-    h2: '63px',
-    h3: '42px',
-    h4: '28px',
-    h5: '21px',
-    h6: '18px',
-    h7: '14px',
-    p1: '28px',
-    p2: '21px',
-    p3: '18px',
-    p4: '16px',
-    p5: '12px',
+    h1: `77px`,
+    h2: `63px`,
+    h3: `42px`,
+    h4: `28px`,
+    h5: `21px`,
+    h6: `18px`,
+    h7: `14px`,
+    p1: `28px`,
+    p2: `21px`,
+    p3: `18px`,
+    p4: `16px`,
+    p5: `12px`,
   },
-};
+}
 
-export default theme;
\ No newline at end of file
+export default theme
diff --git a/examples/using-wordpress/src/html.js b/examples/using-wordpress/src/html.js
index d179c6bebd4c0..2d8b4d85526d5 100644
--- a/examples/using-wordpress/src/html.js
+++ b/examples/using-wordpress/src/html.js
@@ -1,6 +1,5 @@
-import React, { Component } from 'react'
-import * as PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
+import React, { Component } from "react"
+import * as PropTypes from "prop-types"
 
 let stylesStr
 if (process.env.NODE_ENV === `production`) {
@@ -13,11 +12,13 @@ if (process.env.NODE_ENV === `production`) {
 
 class Html extends Component {
   render() {
-    const head = Helmet.rewind() // TODO
     let css
     if (process.env.NODE_ENV === `production`) {
       css = (
-        <style id="gatsby-inlined-css" dangerouslySetInnerHTML={{ __html: stylesStr }} />
+        <style
+          id="gatsby-inlined-css"
+          dangerouslySetInnerHTML={{ __html: stylesStr }}
+        />
       )
     }
 
@@ -28,7 +29,10 @@ class Html extends Component {
           <meta name="referrer" content="origin" />
           <meta name="description" content="BCGDV" />
           <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
-          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0"
+          />
           {this.props.headComponents}
           {css}
         </head>
diff --git a/examples/using-wordpress/src/layouts/index.js b/examples/using-wordpress/src/layouts/index.js
index bda860ccf699b..b40299b425d8c 100644
--- a/examples/using-wordpress/src/layouts/index.js
+++ b/examples/using-wordpress/src/layouts/index.js
@@ -1,8 +1,7 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react"
+import PropTypes from "prop-types"
 
 class DefaultLayout extends React.Component {
-
   render() {
     return (
       <div>
@@ -16,4 +15,4 @@ DefaultLayout.propTypes = {
   location: PropTypes.object.isRequired,
 }
 
-export default DefaultLayout;
+export default DefaultLayout
diff --git a/examples/using-wordpress/src/pages/index.js b/examples/using-wordpress/src/pages/index.js
index bf1d35877d61d..4171896a5a44b 100644
--- a/examples/using-wordpress/src/pages/index.js
+++ b/examples/using-wordpress/src/pages/index.js
@@ -1,13 +1,12 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Helmet from 'react-helmet'
-import Header from '../components/Header';
-import Footer from '../components/Footer';
-import PostsListSearchable from '../components/PostsListSearchable'
-import { H1, Row, Page, Column } from '../components/styled';
+import React, { Component } from "react"
+import PropTypes from "prop-types"
+import Helmet from "react-helmet"
+import Header from "../components/Header"
+import Footer from "../components/Footer"
+import PostsListSearchable from "../components/PostsListSearchable"
+import { H1, Row, Page, Column } from "../components/styled"
 
 class Home extends Component {
-
   render() {
     // this.props is where all the data of my site lives: { data, history, location. match... }
     // much of this if from the router, but data object is where all my api data lives
@@ -21,10 +20,14 @@ class Home extends Component {
         <Page>
           <Row>
             <Helmet title={siteMetadata.title} />
-            <Header title={siteMetadata.title} subtitle={siteMetadata.subtitle} pages={wordpressPages} />
+            <Header
+              title={siteMetadata.title}
+              subtitle={siteMetadata.subtitle}
+              pages={wordpressPages}
+            />
           </Row>
           <Row>
-            <H1 dangerouslySetInnerHTML={{ __html: currentPage.title }}></H1>
+            <H1 dangerouslySetInnerHTML={{ __html: currentPage.title }} />
             <div dangerouslySetInnerHTML={{ __html: currentPage.content }} />
             <PostsListSearchable propsData={this.props.data} />
           </Row>
@@ -37,120 +40,110 @@ class Home extends Component {
   }
 }
 
-
-export default Home;
+export default Home
 
 Home.propTypes = {
   data: PropTypes.object.isRequired,
   allWordpressPage: PropTypes.object,
-  edges: PropTypes.array
+  edges: PropTypes.array,
 }
 
 // Set here the ID of the home page.
 export const pageQuery = graphql`
-query homePageQuery {
-
-  wordpressPage(id: {eq: "PAGE_5"}) {
-        id
-        title
-        content
-        excerpt
-        date
-        date_gmt
-        modified
-        modified_gmt
-        slug
-        status
-        author
-        featured_media
-        menu_order
-        comment_status
-        ping_status
-        template 
-  }
-
-  allWordpressPage{
-    edges {
-      node {
-        id
-        title
-        content
-        excerpt
-        date
-        date_gmt
-        modified
-        modified_gmt
-        slug
-        status
-        author
-        featured_media
-        menu_order
-        comment_status
-        ping_status
-        template
+  query homePageQuery {
+    wordpressPage(id: { eq: "PAGE_5" }) {
+      id
+      title
+      content
+      excerpt
+      date
+      date_gmt
+      modified
+      modified_gmt
+      slug
+      status
+      author
+      featured_media
+      menu_order
+      comment_status
+      ping_status
+      template
+    }
+    allWordpressPage {
+      edges {
+        node {
+          id
+          title
+          content
+          excerpt
+          date
+          date_gmt
+          modified
+          modified_gmt
+          slug
+          status
+          author
+          featured_media
+          menu_order
+          comment_status
+          ping_status
+          template
+        }
       }
     }
-  }
-
-allWordpressPost {
-    edges {
-      node {
-        id
-        slug
-        title
-        content
-        excerpt
-        date
-        date_gmt
-        modified
-        modified_gmt
-        status
-        author
-        featured_media
-        comment_status
-        ping_status
-        sticky
-        template
-        format
-        categories
-        tags
+    allWordpressPost {
+      edges {
+        node {
+          id
+          slug
+          title
+          content
+          excerpt
+          date
+          date_gmt
+          modified
+          modified_gmt
+          status
+          author
+          featured_media
+          comment_status
+          ping_status
+          sticky
+          template
+          format
+          categories
+          tags
+        }
       }
     }
-  }
-
-  allWordpressTag {
-    edges {
-      node {
-        id
-        slug
-        description
-        name
-        taxonomy
+    allWordpressTag {
+      edges {
+        node {
+          id
+          slug
+          description
+          name
+          taxonomy
+        }
       }
     }
-  }
-
-
-  allWordpressCategory {
-    edges {
-      node {
-        id
-        description
-        name
-        slug
-        taxonomy
+    allWordpressCategory {
+      edges {
+        node {
+          id
+          description
+          name
+          slug
+          taxonomy
+        }
       }
     }
-  }
-
-
-site {
-    id
-    siteMetadata {
-      title
-      subtitle
+    site {
+      id
+      siteMetadata {
+        title
+        subtitle
+      }
     }
   }
-
-}
-`
\ No newline at end of file
+`
diff --git a/examples/using-wordpress/src/templates/page.js b/examples/using-wordpress/src/templates/page.js
index f0218a199cb26..feaed5a2b1ff2 100644
--- a/examples/using-wordpress/src/templates/page.js
+++ b/examples/using-wordpress/src/templates/page.js
@@ -1,15 +1,13 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component } from "react"
+import PropTypes from "prop-types"
 
-import Helmet from 'react-helmet'
-import Header from '../components/Header';
-import Footer from '../components/Footer';
-import { H1, Row, Page, Column } from '../components/styled';
+import Helmet from "react-helmet"
+import Header from "../components/Header"
+import Footer from "../components/Footer"
+import { H1, Row, Page, Column } from "../components/styled"
 
 class PageTemplate extends Component {
-
   render() {
-
     const wordpressPages = this.props.data.allWordpressPage
     const siteMetadata = this.props.data.site.siteMetadata
     const currentPage = this.props.data.wordpressPage
@@ -19,12 +17,16 @@ class PageTemplate extends Component {
         <Page>
           <Row>
             <Helmet title={siteMetadata.title} />
-            <Header title={siteMetadata.title} subtitle={siteMetadata.subtitle} pages={wordpressPages} />
+            <Header
+              title={siteMetadata.title}
+              subtitle={siteMetadata.subtitle}
+              pages={wordpressPages}
+            />
           </Row>
           <Row>
-            <H1 dangerouslySetInnerHTML={{ __html: currentPage.title }}></H1>            
+            <H1 dangerouslySetInnerHTML={{ __html: currentPage.title }} />
           </Row>
-          <Row>            
+          <Row>
             <div dangerouslySetInnerHTML={{ __html: currentPage.content }} />
           </Row>
           <Row>
@@ -46,110 +48,99 @@ export default PageTemplate
 
 export const pageQuery = graphql`
   query currentPageQuery($id: String!) {
-    wordpressPage(id: {eq: $id}) {
-       id
-        title
-        content
-        excerpt
-        date
-        date_gmt
-        modified
-        modified_gmt
-        slug
-        status
-        author
-        featured_media
-        menu_order
-        comment_status
-        ping_status
-        template
-      }
-
-
-  allWordpressPage {
-    edges {
-      node {
-        id
-        title
-        content
-        excerpt
-        date
-        date_gmt
-        modified
-        modified_gmt
-        slug
-        status
-        author
-        featured_media
-        menu_order
-        comment_status
-        ping_status
-        template
+    wordpressPage(id: { eq: $id }) {
+      id
+      title
+      content
+      excerpt
+      date
+      date_gmt
+      modified
+      modified_gmt
+      slug
+      status
+      author
+      featured_media
+      menu_order
+      comment_status
+      ping_status
+      template
+    }
+    allWordpressPage {
+      edges {
+        node {
+          id
+          title
+          content
+          excerpt
+          date
+          date_gmt
+          modified
+          modified_gmt
+          slug
+          status
+          author
+          featured_media
+          menu_order
+          comment_status
+          ping_status
+          template
+        }
       }
     }
-  }
-
-allWordpressPost {
-    edges {
-      node {
-        id
-        slug
-        title
-        content
-        excerpt
-        date
-        date_gmt
-        modified
-        modified_gmt
-        status
-        author
-        featured_media
-        comment_status
-        ping_status
-        sticky
-        template
-        format
-        categories
-        tags
+    allWordpressPost {
+      edges {
+        node {
+          id
+          slug
+          title
+          content
+          excerpt
+          date
+          date_gmt
+          modified
+          modified_gmt
+          status
+          author
+          featured_media
+          comment_status
+          ping_status
+          sticky
+          template
+          format
+          categories
+          tags
+        }
       }
     }
-  }
-
-  allWordpressTag {
-    edges {
-      node {
-        id
-        slug
-        description
-        name
-        taxonomy
+    allWordpressTag {
+      edges {
+        node {
+          id
+          slug
+          description
+          name
+          taxonomy
+        }
       }
     }
-  }
-
-
-  allWordpressCategory {
-    edges {
-      node {
-        id
-        description
-        name
-        slug
-        taxonomy
+    allWordpressCategory {
+      edges {
+        node {
+          id
+          description
+          name
+          slug
+          taxonomy
+        }
       }
     }
-  }
-
-
-site {
-    id
-    siteMetadata {
-      title
-      subtitle
+    site {
+      id
+      siteMetadata {
+        title
+        subtitle
+      }
     }
   }
-
-
-
-  }
-`
\ No newline at end of file
+`
diff --git a/examples/using-wordpress/src/templates/post.js b/examples/using-wordpress/src/templates/post.js
index b01794fdf2542..32db237b6f9b1 100644
--- a/examples/using-wordpress/src/templates/post.js
+++ b/examples/using-wordpress/src/templates/post.js
@@ -1,13 +1,12 @@
-import React from 'react';
-import Helmet from 'react-helmet'
-import Header from '../components/Header';
-import Footer from '../components/Footer';
-import { H1, Row, Page, Column } from '../components/styled';
+import React from "react"
+import Helmet from "react-helmet"
+import Header from "../components/Header"
+import Footer from "../components/Footer"
+import { H1, Row, Page, Column } from "../components/styled"
 
 class PostTemplate extends React.Component {
-
   render() {
-    const post = this.props.data.wordpressPost;
+    const post = this.props.data.wordpressPost
 
     const wordpressPages = this.props.data.allWordpressPage
 
@@ -18,12 +17,16 @@ class PostTemplate extends React.Component {
         <Page>
           <Row>
             <Helmet title={siteMetadata.title} />
-            <Header title={siteMetadata.title} subtitle={siteMetadata.subtitle} pages={wordpressPages} />
+            <Header
+              title={siteMetadata.title}
+              subtitle={siteMetadata.subtitle}
+              pages={wordpressPages}
+            />
           </Row>
           <Row>
-            <H1 dangerouslySetInnerHTML={{ __html: post.title }}></H1>            
+            <H1 dangerouslySetInnerHTML={{ __html: post.title }} />
           </Row>
-          <Row>            
+          <Row>
             <div dangerouslySetInnerHTML={{ __html: post.content }} />
           </Row>
           <Row>
@@ -31,126 +34,111 @@ class PostTemplate extends React.Component {
           </Row>
         </Page>
       </div>
-
     )
   }
 }
 //<img src={post.image.sizes.thumbnail} />
 
-
 export default PostTemplate
 
 export const pageQuery = graphql`
   query currentPostQuery($id: String!) {
-
-    wordpressPost(id: {eq: $id}) {
-        id
-        slug
-        title
-        content
-        excerpt
-        date
-        date_gmt
-        modified
-        modified_gmt
-        status
-        author
-        featured_media
-        comment_status
-        ping_status
-        sticky
-        template
-        format
-        categories
-        tags  
-    }   
-
-
-  allWordpressPage {
-    edges {
-      node {
-        id
-        title
-        content
-        excerpt
-        date
-        date_gmt
-        modified
-        modified_gmt
-        slug
-        status
-        author
-        featured_media
-        menu_order
-        comment_status
-        ping_status
-        template
+    wordpressPost(id: { eq: $id }) {
+      id
+      slug
+      title
+      content
+      excerpt
+      date
+      date_gmt
+      modified
+      modified_gmt
+      status
+      author
+      featured_media
+      comment_status
+      ping_status
+      sticky
+      template
+      format
+      categories
+      tags
+    }
+    allWordpressPage {
+      edges {
+        node {
+          id
+          title
+          content
+          excerpt
+          date
+          date_gmt
+          modified
+          modified_gmt
+          slug
+          status
+          author
+          featured_media
+          menu_order
+          comment_status
+          ping_status
+          template
+        }
       }
     }
-  }
-
-allWordpressPost {
-    edges {
-      node {
-        id
-        slug
-        title
-        content
-        excerpt
-        date
-        date_gmt
-        modified
-        modified_gmt
-        status
-        author
-        featured_media
-        comment_status
-        ping_status
-        sticky
-        template
-        format
-        categories
-        tags
+    allWordpressPost {
+      edges {
+        node {
+          id
+          slug
+          title
+          content
+          excerpt
+          date
+          date_gmt
+          modified
+          modified_gmt
+          status
+          author
+          featured_media
+          comment_status
+          ping_status
+          sticky
+          template
+          format
+          categories
+          tags
+        }
       }
     }
-  }
-
-  allWordpressTag {
-    edges {
-      node {
-        id
-        slug
-        description
-        name
-        taxonomy
+    allWordpressTag {
+      edges {
+        node {
+          id
+          slug
+          description
+          name
+          taxonomy
+        }
       }
     }
-  }
-
-
-  allWordpressCategory {
-    edges {
-      node {
-        id
-        description
-        name
-        slug
-        taxonomy
+    allWordpressCategory {
+      edges {
+        node {
+          id
+          description
+          name
+          slug
+          taxonomy
+        }
       }
     }
-  }
-
-
-site {
-    id
-    siteMetadata {
-      title
-      subtitle
+    site {
+      id
+      siteMetadata {
+        title
+        subtitle
+      }
     }
   }
-
-
-
-
-  }
-`
\ No newline at end of file
+`
diff --git a/examples/using-wordpress/src/utils/fontFaceHelper.js b/examples/using-wordpress/src/utils/fontFaceHelper.js
index e10aec9ad5f34..8b902f1b62816 100644
--- a/examples/using-wordpress/src/utils/fontFaceHelper.js
+++ b/examples/using-wordpress/src/utils/fontFaceHelper.js
@@ -1,10 +1,17 @@
 // this function is used to import custom fonts
-export function fontFaceHelper(name, src, fontWeight = 'normal', fontStyle = 'normal') {
+export function fontFaceHelper(
+  name,
+  src,
+  fontWeight = `normal`,
+  fontStyle = `normal`
+) {
   return `
     @font-face{
       font-family: "${name}";
-      src: url(${require('../assets/fonts/' + src + '.woff')}) format("woff"),
-           url(${require('../assets/fonts/' + src + '.woff2')}#${name}) format("woff2");
+      src: url(${require(`../assets/fonts/` + src + `.woff`)}) format("woff"),
+           url(${require(`../assets/fonts/` +
+             src +
+             `.woff2`)}#${name}) format("woff2");
 
       font-style: ${fontStyle};
       font-weight: ${fontWeight};
@@ -13,7 +20,7 @@ export function fontFaceHelper(name, src, fontWeight = 'normal', fontStyle = 'no
 }
 
 //mapping with font-files:
-// Ultra 		    900	
+// Ultra 		    900
 // Black 		    800
 // Heavy 	      700
 // Bold 		    600
@@ -22,11 +29,11 @@ export function fontFaceHelper(name, src, fontWeight = 'normal', fontStyle = 'no
 // Light 		    300
 // ExtraLight 	200
 // Thin     	  100
-// Hairline 	  0 ? 
+// Hairline 	  0 ?
 
 //OR
 
-// Ultra 		    1000	
+// Ultra 		    1000
 // Black 		    900
 // Heavy 	      800
 // Bold 		    700
@@ -35,4 +42,4 @@ export function fontFaceHelper(name, src, fontWeight = 'normal', fontStyle = 'no
 // Light 		    400
 // ExtraLight 	300
 // Thin     	  200
-// Hairline 	  100 ? 
\ No newline at end of file
+// Hairline 	  100 ?
diff --git a/examples/using-wordpress/src/utils/hedron.js b/examples/using-wordpress/src/utils/hedron.js
index 368655b0c2d33..9f7935ce62301 100644
--- a/examples/using-wordpress/src/utils/hedron.js
+++ b/examples/using-wordpress/src/utils/hedron.js
@@ -1,11 +1,12 @@
-import { divvy, breakpoint } from 'hedron/lib/utils/';
+import { divvy, breakpoint } from "hedron/lib/utils/"
 
 export const compute = name =>
   breakpoint(name, (props, name) =>
     ((divisions, size, shift) => `
-     ${size ? `width: ${divvy(divisions, size)}%;` : ''}
-     ${shift ? `margin-left: ${divvy(divisions, shift)}%;` : ''}
-     `)(props.divisions, props[name], props[`${name}Shift`]));
+     ${size ? `width: ${divvy(divisions, size)}%;` : ``}
+     ${shift ? `margin-left: ${divvy(divisions, shift)}%;` : ``}
+     `)(props.divisions, props[name], props[`${name}Shift`])
+  )
 
-export const ifDefined = (prop, css = prop) =>
-  props => props[prop] ? `${css}: ${props[prop]}` : '';
+export const ifDefined = (prop, css = prop) => props =>
+  props[prop] ? `${css}: ${props[prop]}` : ``
diff --git a/packages/gatsby-plugin-glamor/src/gatsby-node.js b/packages/gatsby-plugin-glamor/src/gatsby-node.js
index 0cf843611b0d6..2a4ba6917ed46 100644
--- a/packages/gatsby-plugin-glamor/src/gatsby-node.js
+++ b/packages/gatsby-plugin-glamor/src/gatsby-node.js
@@ -10,11 +10,10 @@ exports.modifyWebpackConfig = ({ config }) =>
 
 // Add Glamor support
 exports.modifyBabelrc = ({ babelrc }) => {
-  return {plugins: babelrc.plugins.concat([
-    [
-      `transform-react-jsx`,
-      { pragma: `Glamor.createElement` },
-    ],
-    `babel-plugin-glamor`,
-  ])}
+  return {
+    plugins: babelrc.plugins.concat([
+      [`transform-react-jsx`, { pragma: `Glamor.createElement` }],
+      `babel-plugin-glamor`,
+    ]),
+  }
 }
diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js
index e65bd2d257e94..b7c4bb688b1cf 100644
--- a/packages/gatsby-remark-images/src/index.js
+++ b/packages/gatsby-remark-images/src/index.js
@@ -85,16 +85,16 @@ module.exports = (
               const srcSet = responsiveSizesResult.srcSet
 
               // Generate default alt tag
-              const srcSplit = node.url.split("/");
-              const fileName = srcSplit[srcSplit.length - 1];
-              const fileNameNoExt = fileName.replace(/\.[^/.]+$/, "")
-              const defaultAlt = fileNameNoExt.replace(/[^A-Z0-9]/ig, " ");
+              const srcSplit = node.url.split(`/`)
+              const fileName = srcSplit[srcSplit.length - 1]
+              const fileNameNoExt = fileName.replace(/\.[^/.]+$/, ``)
+              const defaultAlt = fileNameNoExt.replace(/[^A-Z0-9]/gi, ` `)
 
               // TODO
               // add support for sub-plugins having a gatsby-node.js so can add a
               // bit of js/css to add blurry fade-in.
               // https://www.perpetual-beta.org/weblog/silky-smooth-image-loading.html
-              
+
               // Construct new image node w/ aspect ratio placeholder
               let rawHTML = `
           <span
@@ -118,9 +118,9 @@ module.exports = (
           </span>
           `
 
-          // Make linking to original image optional.
-          if(options.linkImagesToOriginal) {
-            rawHTML = `
+              // Make linking to original image optional.
+              if (options.linkImagesToOriginal) {
+                rawHTML = `
           <a
             class="gatsby-resp-image-link"
             href="${originalImg}"
@@ -130,8 +130,8 @@ module.exports = (
           >
           ${rawHTML}
           </a>
-            `;
-          }
+            `
+              }
 
               // Replace the image node with an inline HTML node.
               node.type = `html`
diff --git a/packages/gatsby-source-wordpress/src/gatsby-node.js b/packages/gatsby-source-wordpress/src/gatsby-node.js
index fc5c3cf6a7767..b3c135e6a934e 100644
--- a/packages/gatsby-source-wordpress/src/gatsby-node.js
+++ b/packages/gatsby-source-wordpress/src/gatsby-node.js
@@ -31,8 +31,12 @@ exports.sourceNodes = async (
   { boundActionCreators, getNode, hasNodeChanged, store },
   { baseUrl, protocol, hostingWPCOM, useACF, auth, verboseOutput }
 ) => {
-
-  const { createNode, touchNode, setPluginStatus, createParentChildLink } = boundActionCreators
+  const {
+    createNode,
+    touchNode,
+    setPluginStatus,
+    createParentChildLink,
+  } = boundActionCreators
   _verbose = verboseOutput
   _siteURL = `${protocol}://${baseUrl}`
   _getNode = getNode
@@ -50,16 +54,42 @@ exports.sourceNodes = async (
   }
 
   console.log()
-  console.log(colorized.out(`=START PLUGIN=====================================`, colorized.color.Font.FgBlue))
+  console.log(
+    colorized.out(
+      `=START PLUGIN=====================================`,
+      colorized.color.Font.FgBlue
+    )
+  )
   console.time(`=END PLUGIN=====================================`)
   console.log(``)
-  console.log(colorized.out(`Site URL: ${_siteURL}`, colorized.color.Font.FgBlue))
-  console.log(colorized.out(`Site hosted on Wordpress.com: ${hostingWPCOM}`, colorized.color.Font.FgBlue))
-  console.log(colorized.out(`Using ACF: ${useACF}`, colorized.color.Font.FgBlue))
-  console.log(colorized.out(`Using Auth: ${auth.user} ${auth.pass}`, colorized.color.Font.FgBlue))
-  console.log(colorized.out(`Verbose output: ${verboseOutput}`, colorized.color.Font.FgBlue))
+  console.log(
+    colorized.out(`Site URL: ${_siteURL}`, colorized.color.Font.FgBlue)
+  )
+  console.log(
+    colorized.out(
+      `Site hosted on Wordpress.com: ${hostingWPCOM}`,
+      colorized.color.Font.FgBlue
+    )
+  )
+  console.log(
+    colorized.out(`Using ACF: ${useACF}`, colorized.color.Font.FgBlue)
+  )
+  console.log(
+    colorized.out(
+      `Using Auth: ${auth.user} ${auth.pass}`,
+      colorized.color.Font.FgBlue
+    )
+  )
+  console.log(
+    colorized.out(
+      `Verbose output: ${verboseOutput}`,
+      colorized.color.Font.FgBlue
+    )
+  )
   console.log(``)
-  console.log(colorized.out(`Mama Route URL: ${url}`, colorized.color.Font.FgBlue))
+  console.log(
+    colorized.out(`Mama Route URL: ${url}`, colorized.color.Font.FgBlue)
+  )
   console.log(``)
 
   // Touch existing Wordpress nodes so Gatsby doesn`t garbage collect them.
@@ -71,11 +101,15 @@ exports.sourceNodes = async (
   let allRoutes = await axiosHelper(url, auth)
 
   if (allRoutes != undefined) {
-
     let validRoutes = getValidRoutes(allRoutes, url, baseUrl)
 
     console.log(``)
-    console.log(colorized.out(`Fetching the JSON data from ${validRoutes.length} valid API Routes...`, colorized.color.Font.FgBlue))
+    console.log(
+      colorized.out(
+        `Fetching the JSON data from ${validRoutes.length} valid API Routes...`,
+        colorized.color.Font.FgBlue
+      )
+    )
     console.log(``)
 
     for (let route of validRoutes) {
@@ -84,7 +118,10 @@ exports.sourceNodes = async (
     }
 
     for (let item of _parentChildNodes) {
-      createParentChildLink({ parent: _getNode(item.parentId), child: _getNode(item.childNodeId) })
+      createParentChildLink({
+        parent: _getNode(item.parentId),
+        child: _getNode(item.childNodeId),
+      })
     }
 
     setPluginStatus({
@@ -94,9 +131,10 @@ exports.sourceNodes = async (
     })
 
     console.timeEnd(`=END PLUGIN=====================================`)
-
   } else {
-    console.log(colorized.out(`No routes to fetch. Ending.`, colorized.color.Font.FgRed))
+    console.log(
+      colorized.out(`No routes to fetch. Ending.`, colorized.color.Font.FgRed)
+    )
   }
   return
 }
@@ -134,9 +172,31 @@ async function axiosHelper(url, auth) {
  * @param {any} e 
  */
 function httpExceptionHandler(e) {
-  console.log(colorized.out(`The server response was "${e.response.status} ${e.response.statusText}"`, colorized.color.Font.FgRed))
-  if (e.response.data.message != undefined) console.log(colorized.out(`Inner exception message : "${e.response.data.message}"`, colorized.color.Font.FgRed))
-  if (e.response.status == 400 || e.response.status == 401 || e.response.status == 402 || e.response.status == 403) console.log(colorized.out(`Auth on endpoint is not implemented on this gatsby-source plugin.`, colorized.color.Font.FgRed))
+  console.log(
+    colorized.out(
+      `The server response was "${e.response.status} ${e.response.statusText}"`,
+      colorized.color.Font.FgRed
+    )
+  )
+  if (e.response.data.message != undefined)
+    console.log(
+      colorized.out(
+        `Inner exception message : "${e.response.data.message}"`,
+        colorized.color.Font.FgRed
+      )
+    )
+  if (
+    e.response.status == 400 ||
+    e.response.status == 401 ||
+    e.response.status == 402 ||
+    e.response.status == 403
+  )
+    console.log(
+      colorized.out(
+        `Auth on endpoint is not implemented on this gatsby-source plugin.`,
+        colorized.color.Font.FgRed
+      )
+    )
 }
 
 /**
@@ -148,24 +208,36 @@ function httpExceptionHandler(e) {
  * @returns 
  */
 function getValidRoutes(allRoutes, url, baseUrl) {
-
   let validRoutes = []
 
   for (let key of Object.keys(allRoutes.data.routes)) {
-
     if (_verbose) console.log(`Route discovered :`, key)
     let route = allRoutes.data.routes[key]
 
     // A valid route exposes its _links (for now)
     if (route._links) {
-
       const entityType = getRawEntityType(route)
 
-      // Excluding the "technical" API Routes        
-      const excludedTypes = [undefined, `v2`, `v3`, `1.0`, `2.0`, `embed`, `proxy`, ``, baseUrl]
+      // Excluding the "technical" API Routes
+      const excludedTypes = [
+        undefined,
+        `v2`,
+        `v3`,
+        `1.0`,
+        `2.0`,
+        `embed`,
+        `proxy`,
+        ``,
+        baseUrl,
+      ]
       if (!excludedTypes.includes(entityType)) {
-
-        if (_verbose) console.log(colorized.out(`Valid route found. Will try to fetch.`, colorized.color.Font.FgGreen))
+        if (_verbose)
+          console.log(
+            colorized.out(
+              `Valid route found. Will try to fetch.`,
+              colorized.color.Font.FgGreen
+            )
+          )
 
         const manufacturer = getManufacturer(route)
 
@@ -189,52 +261,67 @@ function getValidRoutes(allRoutes, url, baseUrl) {
             validType = refactoredEntityTypes.category
             break
           default:
-            validType = `${typePrefix}${manufacturer.replace(/-/g, `_`)}_${entityType.replace(/-/g, `_`)}`
+            validType = `${typePrefix}${manufacturer.replace(
+              /-/g,
+              `_`
+            )}_${entityType.replace(/-/g, `_`)}`
             break
         }
-        validRoutes.push({ 'url': route._links.self, 'type': validType })
+        validRoutes.push({ url: route._links.self, type: validType })
       } else {
-        if (_verbose) console.log(colorized.out(`Invalid route.`, colorized.color.Font.FgRed))
+        if (_verbose)
+          console.log(
+            colorized.out(`Invalid route.`, colorized.color.Font.FgRed)
+          )
       }
     } else {
-      if (_verbose) console.log(colorized.out(`Invalid route.`, colorized.color.Font.FgRed))
+      if (_verbose)
+        console.log(colorized.out(`Invalid route.`, colorized.color.Font.FgRed))
     }
-
   }
 
-
-
   if (_useACF) {
-    // The OPTIONS ACF API Route is not giving a valid _link so let`s add it manually.     
+    // The OPTIONS ACF API Route is not giving a valid _link so let`s add it manually.
     validRoutes.push({
-      'url': `${url}/acf/v2/options`,
-      'type': `${typePrefix}acf_options`,
+      url: `${url}/acf/v2/options`,
+      type: `${typePrefix}acf_options`,
     })
-    if (_verbose) console.log(colorized.out(`Added ACF Options route.`, colorized.color.Font.FgGreen))
+    if (_verbose)
+      console.log(
+        colorized.out(`Added ACF Options route.`, colorized.color.Font.FgGreen)
+      )
     if (_hostingWPCOM) {
       // TODO : Need to test that out with ACF on Wordpress.com hosted site. Need a premium account on wp.com to install extensions.
-      console.log(colorized.out(`The ACF options pages is untested under wordpress.com hosting. Please let me know if it works.`, colorized.color.Effect.Blink))
+      console.log(
+        colorized.out(
+          `The ACF options pages is untested under wordpress.com hosting. Please let me know if it works.`,
+          colorized.color.Effect.Blink
+        )
+      )
     }
   }
 
   return validRoutes
-
 }
 
-
 /**
  * Extract the raw entity type from route
  * 
  * @param {any} route 
  */
-const getRawEntityType = route => route._links.self.substring(route._links.self.lastIndexOf(`/`) + 1, route._links.self.length)
+const getRawEntityType = route =>
+  route._links.self.substring(
+    route._links.self.lastIndexOf(`/`) + 1,
+    route._links.self.length
+  )
 
 /**
  * Extract the route manufacturer
  * 
  * @param {any} route 
  */
-const getManufacturer = route => route.namespace.substring(0, route.namespace.lastIndexOf(`/`))
+const getManufacturer = route =>
+  route.namespace.substring(0, route.namespace.lastIndexOf(`/`))
 
 /**
  * Fetch the data from specified route url, using the auth provided.
@@ -243,17 +330,18 @@ const getManufacturer = route => route.namespace.substring(0, route.namespace.la
  * @param {any} auth 
  */
 async function fetchData(route, auth, createNode) {
-
   const type = route.type
   const url = route.url
 
-  console.log(colorized.out(`=== [ Fetching ${type} ] ===`, colorized.color.Font.FgBlue), url)
+  console.log(
+    colorized.out(`=== [ Fetching ${type} ] ===`, colorized.color.Font.FgBlue),
+    url
+  )
   if (_verbose) console.time(`Fetching the ${type} took`)
 
   let routeResponse = await axiosHelper(url, auth)
 
   if (routeResponse) {
-
     // Process entities to creating GraphQL Nodes.
     if (Array.isArray(routeResponse.data)) {
       for (let ent of routeResponse.data) {
@@ -265,17 +353,24 @@ async function fetchData(route, auth, createNode) {
 
     // TODO : Get the number of created nodes using the nodes in state.
     let length
-    if (routeResponse != undefined && routeResponse.data != undefined && Array.isArray(routeResponse.data)) {
+    if (
+      routeResponse != undefined &&
+      routeResponse.data != undefined &&
+      Array.isArray(routeResponse.data)
+    ) {
       length = routeResponse.data.length
-    } else if (routeResponse.data != undefined && !Array.isArray(routeResponse.data)) {
+    } else if (
+      routeResponse.data != undefined &&
+      !Array.isArray(routeResponse.data)
+    ) {
       length = Object.keys(routeResponse.data).length
     }
-    console.log(colorized.out(`${type} fetched : ${length}`, colorized.color.Font.FgGreen))
-
+    console.log(
+      colorized.out(`${type} fetched : ${length}`, colorized.color.Font.FgGreen)
+    )
   }
 
   if (_verbose) console.timeEnd(`Fetching the ${type} took`)
-
 }
 
 /**
@@ -319,7 +414,10 @@ function createGraphQLNode(ent, type, createNode) {
 
   node = addFields(ent, node, createNode)
 
-  if (type == refactoredEntityTypes.post || type == refactoredEntityTypes.page) {
+  if (
+    type == refactoredEntityTypes.post ||
+    type == refactoredEntityTypes.page
+  ) {
     // TODO : Move this to field recursive and add other fields that have rendered child field
     node.title = ent.title.rendered
     node.content = ent.content.rendered
@@ -337,7 +435,6 @@ function createGraphQLNode(ent, type, createNode) {
  * @returns the new entity with fields
  */
 function addFields(ent, newEnt, createNode) {
-
   newEnt = recursiveAddFields(ent, newEnt)
 
   // TODO : add other types of child nodes
@@ -379,7 +476,9 @@ function recursiveAddFields(ent, newEnt) {
             newEnt[key] = recursiveAddFields(ent[key], {})
           } else if (Array.isArray(ent[key])) {
             if (ent[key].length > 0 && typeof ent[key][0] == `object`) {
-              ent[k].map((el, i) => { newEnt[key][i] = recursiveAddFields(el, {}) })
+              ent[k].map((el, i) => {
+                newEnt[key][i] = recursiveAddFields(el, {})
+              })
             }
           }
         }
@@ -400,22 +499,30 @@ function getValidName(key) {
   const NAME_RX = /^[_a-zA-Z][_a-zA-Z0-9]*$/
   if (!NAME_RX.test(nkey)) {
     nkey = `_${nkey}`.replace(/-/g, `_`).replace(/:/g, `_`)
-    if (_verbose) console.log(colorized.out(`Object with key "${key}" breaks GraphQL naming convention. Renamed to "${nkey}"`, colorized.color.Font.FgRed))
+    if (_verbose)
+      console.log(
+        colorized.out(
+          `Object with key "${key}" breaks GraphQL naming convention. Renamed to "${nkey}"`,
+          colorized.color.Font.FgRed
+        )
+      )
   }
   if (restrictedNodeFields.includes(nkey)) {
-    if (_verbose) console.log(`Restricted field found for ${nkey}. Prefixing with ${conflictFieldPrefix}.`)
+    if (_verbose)
+      console.log(
+        `Restricted field found for ${nkey}. Prefixing with ${conflictFieldPrefix}.`
+      )
     nkey = `${conflictFieldPrefix}${nkey}`
   }
   return nkey
 }
 
-
 // const mkdirp = require(`mkdirp`)
-    // const cacheSitePath = `${store.getState().program.directory}/.cache/source-wordpress`
-    // mkdirp(cacheSitePath, function (err) {
-    //   if (err) console.error(err)
-    // })
-    // "get-urls": "^7.x",
+// const cacheSitePath = `${store.getState().program.directory}/.cache/source-wordpress`
+// mkdirp(cacheSitePath, function (err) {
+//   if (err) console.error(err)
+// })
+// "get-urls": "^7.x",
 // const getUrls = require(`get-urls`)
 // const downloader = require(`./image-downloader.js`)
 // const getImagesAndGraphQLNode = (node, auth, createNode, cacheSitePath) => {
@@ -440,5 +547,4 @@ function getValidName(key) {
 
 //   })
 
-
 // }
diff --git a/packages/gatsby-source-wordpress/src/output-color.js b/packages/gatsby-source-wordpress/src/output-color.js
index ea265d8d7c416..6ec16b5ec0f47 100644
--- a/packages/gatsby-source-wordpress/src/output-color.js
+++ b/packages/gatsby-source-wordpress/src/output-color.js
@@ -37,11 +37,9 @@ const color = {
   },
 }
 
-const colorized =
-  {
-    out,
-    color,
-  }
-
+const colorized = {
+  out,
+  color,
+}
 
-module.exports = colorized
\ No newline at end of file
+module.exports = colorized
diff --git a/packages/gatsby-transformer-remark/src/extend-node-type.js b/packages/gatsby-transformer-remark/src/extend-node-type.js
index 69d2e92ba6e7f..5d690c44c26c7 100644
--- a/packages/gatsby-transformer-remark/src/extend-node-type.js
+++ b/packages/gatsby-transformer-remark/src/extend-node-type.js
@@ -38,11 +38,11 @@ module.exports = (
 
   return new Promise((resolve, reject) => {
     // Setup Remark.
-    const remark = new Remark().data('settings', {
+    const remark = new Remark().data(`settings`, {
       commonmark: true,
       footnotes: true,
       pedantic: true,
-    });
+    })
 
     async function getAST(markdownNode) {
       const cachedAST = await cache.get(astCacheKey(markdownNode))
diff --git a/packages/gatsby-transformer-toml/src/__tests__/gatsby-node.js b/packages/gatsby-transformer-toml/src/__tests__/gatsby-node.js
index 08fbaece74fb8..7e1425a6049ed 100644
--- a/packages/gatsby-transformer-toml/src/__tests__/gatsby-node.js
+++ b/packages/gatsby-transformer-toml/src/__tests__/gatsby-node.js
@@ -19,8 +19,8 @@ describe(`Process TOML nodes correctly`, () => {
   const loadNodeContent = node => Promise.resolve(node.content)
 
   it(`Correctly creates nodes from TOML test file`, async () => {
-  // Unfortunately due to TOML limitations no JSON -> TOML convertors exist,
-  // which means that we are stuck with JS template literals.
+    // Unfortunately due to TOML limitations no JSON -> TOML convertors exist,
+    // which means that we are stuck with JS template literals.
     node.content = `
     [the]
     test_string = "You'll hate me after this - #"
diff --git a/packages/gatsby-transformer-toml/src/gatsby-node.js b/packages/gatsby-transformer-toml/src/gatsby-node.js
index e8deda0f0e496..598fda2bd584f 100644
--- a/packages/gatsby-transformer-toml/src/gatsby-node.js
+++ b/packages/gatsby-transformer-toml/src/gatsby-node.js
@@ -24,7 +24,7 @@ async function onCreateNode({ node, boundActionCreators, loadNodeContent }) {
     .update(parsedContentStr)
     .digest(`hex`)
 
-  const newNode =  {
+  const newNode = {
     ...parsedContent,
     id: parsedContent.id ? parsedContent.id : `${node.id} >>> TOML`,
     children: [],
diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js
index 00fc2b0921aad..16b0e0a67c8af 100644
--- a/packages/gatsby/src/utils/webpack.config.js
+++ b/packages/gatsby/src/utils/webpack.config.js
@@ -520,7 +520,7 @@ module.exports = async (
     // and server (see
     // https://github.com/defunctzombie/package-browser-field-spec); setting
     // the target tells webpack which file to include, ie. browser vs main.
-    target: (stage === `build-html` || stage === `develop-html`) ? `node` : `web`,
+    target: stage === `build-html` || stage === `develop-html` ? `node` : `web`,
     profile: stage === `production`,
     devtool: devtool(),
     output: output(),
diff --git a/www/src/pages/docs/node-apis.js b/www/src/pages/docs/node-apis.js
index fb0a6a368af63..df448317e9795 100644
--- a/www/src/pages/docs/node-apis.js
+++ b/www/src/pages/docs/node-apis.js
@@ -23,7 +23,7 @@ class NodeAPIDocs extends React.Component {
         </p>
         <pre>
           <code
-            class="language-javascript"
+            className="language-javascript"
             dangerouslySetInnerHTML={{
               __html: `// Promise API
 exports.createPages = () => {