gridsome/gridsome-starter-wordpress

👩‍💻 WordPress starter for Gridsome

Gridsome

Build super fast, modern websites with Vue.js

Gridsome is a Vue-powered static site generator for building CDN-ready websites for any headless CMS, local files or APIs

This project is under active development. Any feedback or contributions would be appreciated.

Enjoy a modern development stack

Build websites with modern tools like Vue.js, webpack and Node.js. Get hot-reloading and access to any packages from npm and write CSS in your favorite preprocessor like Sass or Less with auto-prefixing.

Connect to any CMS or data source

Use any CMS or data source for content. Pull data from WordPress, Contentful, local Markdown, or any other headless CMS or APIs and access it with GraphQL in your pages and components.

PWA Offline-first architecture

Only critical HTML, CSS, and JavaScript get loaded first. The next pages are then prefetched so users can click around incredibly fast without page reloads, even when offline.

Get perfect page speed scores

Gridsome automatically optimizes your frontend to load and perform blazing fast. You get code-splitting, image optimization, lazy-loading, and almost perfect lighthouse scores out-of-the-box.

Build future ready websites

The future of the web is JavaScript, API's, and Markup - the Jamstack. Gridsome uses the power of blazing-fast static site generator, JavaScript and APIs to create stunning dynamic web experiences.

Ready for global domination

Gridsome sites are usually not connected to any database and can be hosted entirely on a global CDN. It can handle thousands to millions of hits without breaking - and no expensive server costs.

Quick start

1. Install Gridsome CLI tool

• npm install --global @gridsome/cli
• yarn global add @gridsome/cli
• pnpm install --global @gridsome/cli

2. Create a Gridsome project

1. gridsome create my-gridsome-site to create a new project
2. cd my-gridsome-site to open the folder
3. gridsome develop to start a local dev server at http://localhost:8080
4. Happy coding 🎉🙌

3. Next steps

1. Create .vue components in the ./src/pages directory to create pages
2. Use gridsome build to generate static files in a ./dist folder

Learn more

• How it works
• How to deploy

How to Contribute

Install Node.js ^12.13.0 || ^14.0.0 || >=16.0.0 or higher and Yarn classic.

1. Clone this repository.
2. Create a new Gridsome project inside the ./projects folder.
3. Enter the new project folder and run yarn install.
4. The project will now use the local packages when you run gridsome develop.

Make sure your test project has a version number in its package.json if you use an existing project.

To use the local version of @gridsome/cli as the global command, enter the ./packages/cli folder and run npm link.

Yarn will add dependencies from your test projects to the root yarn.lock file. So you should not commit changes in that file unless you have added dependencies to any of the core packages. If you need to commit it, remove your projects from the ./projects folder temporary and run yarn install in the root folder. Yarn will then clean up the lock file with only necessary dependencies. Commit the file and move your projects back and run yarn install again to start developing.

Code of Conduct

In the interest of fostering an open and welcoming environment please read and follow our Code of Conduct.

License

Licensed under the MIT License.

Roadmap for v1.0

Visit the Gridsome Roadmap to keep track of which features we are currently working on.

gridsome-starter-wordpress's Issues

Clarification

I'm new to Gridsome so pardon the (possibly) stupid question.
How does Gridsome work with WordPress (WP)? Does it require the WP blogs to be live (read in production) or in the form of files (like you would have with Wordpress.com)?
Is it better suited with the self-hosted WP option (read Wordpress.org) or the hosted one (read Wordpress.com)?

I'm planning on building a website (technically re-building one) with Gridsome for non-techy people who know how to use WordPress but I'm unsure if this pack will enable them to do so without having to know Markdown/HTML, VueJS and how NPM/CLIs work.

Error graphQl run dev

Hello, I want to thank you in advance for this gridsome, and I want to use it a lot because I think it is very good to manage graphQl.
but I have had a lot of problems to get it to work at the time of run dev:
this is my mistake:

`ridsome v0.7.23

Initializing plugins...
Load sources - 0.06s
Create GraphQL schema - 0.07s
Create pages and templates - 0.06s
Generate temporary code - 0.11s
Bootstrap finish - 1.55s

ERROR Failed to compile with 1 errors 9:49:08 a. m.

error in ./src/pages/Index.vue?vue&type=custom&index=0&blockType=page-query

Module build failed (from ./node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js):
Error: Cannot query field "allWordPressPost" on type "Query".

GraphQL request:3:3
2 | query Post{
3 | posts: allWordPressPost {
| ^
4 | edges {
at Object.module.exports (C:\laragon\www\demog-rid\wp-content\themes\grid-theme\node_modules\gridsome\lib\plugins\vue-components\lib\loaders\page-query.js:33:23)

@ ./src/pages/Index.vue?vue&type=custom&index=0&blockType=page-query 1:0-331 1:347-350 1:352-680 1:352-680
@ ./src/pages/Index.vue
@ ./src/.temp/routes.js
@ ./node_modules/gridsome/app/router.js
@ ./node_modules/gridsome/app/entry.sockjs.js
@ multi webpack/hot/dev-server webpack-hot-middleware/client?name=app&reload=true&noInfo=true ./node_modules/gridsome/app/entry.client.js ./node_modules/gridsome/app/entry.sockjs.js`

this is my configuration in gridsome.config.js
`
module.exports = {
siteName: 'demo-gridsome',
plugins: [
{
use: '@gridsome/source-graphql',
options: {
url: 'http://demo-gridsome-theme.test/graphql',
splitPostsIntoFragments: true,
downloadRemoteImagesFromPosts: true,
downloadRemoteFeaturedImages: true,
downloadACFImages: true,
},
},

],
}
`
can you help me what configuration I am missing

<div class="demo">
  <h1> posts inicial xxx</h1>
  <ul>
    <li v-for="{node} in $static.posts.edges" :key="node.id">
      {{node.title}}
    </li>
  </ul>
</div>

query Post{ posts: allWordPressPost { edges { node { id title } } } }

Failed to make route like WordPress custom permalink

Thanks for making the starter template. I love this. 👍

But I've faced a problem. I've used custom permalink. That's the problem.

My WordPress site's slug with permalink: https://www.mynotepaper.com/laravel-login-event-listener.html

I tried to make like this. But it shows this error: Cannot GET /laravel-cross-env-is-not-recognized-as-an-internal-or-external-command.html

Here's the screenshot of my plugin setup:

Please help me to solve this. After solving this issue, I will able to build my site using Gridsome. Thank you.

Can't have pages with children render correctly: routes: { page: ':link',

    routes: {
      page: ':link',
      post: '/media/:year/:month/:slug', //adds route for "post" post type (Optional)
      post_tag: '/tag/:slug' // adds route for "post_tag" post type (Optional)
    }

Doesn't work.
routes: { page: ':link_raw', }
is close - but the / character comes out as URL decoded %2f.
E.g. all the links are:
mysite.com/toppage%2fsecondlevel%2fthirdlevel

So can only have /pages/:slug which is not SEO or structured (especially for 3-4 level deep websites).

Goal would be able to replicate wordpress page structure

Need help

Project started but the screen is blank
In the console:

Tell me what it can be connected?

Page Template

Is there a way to use the template 'WordPressPage.vue' for most of the pages but have some of use a 'page.vue' file instead?

Maybe a file name based on the 'Default Template' or the assigned page template on the wordpress?

Thank's!

TypeError: Cannot read property 'addReference' of undefined

(Originally posted this on gridsome, reposting here)

I'm using Gridsome ^0.3.0, and @gridsome/source-wordpress, ^0.1.0, and I'm running into the following error upon running gridsome develop:

TypeError: Cannot read property 'addReference' of undefined
    at WordPressSource.fetchWordPressContent (/Users/andrew/code/SpiralPraxis/marketing/node_modules/@gridsome/source-wordpress/index.js:99:20)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

I've got a vanilla installation. I haven't modified any files except gridsome.config.js, and that only to provide a URL to my wordpress site, which is enabled to serve wp-json endpoints.

Here's my config file:

module.exports = {
  plugins: [{
    use: '@gridsome/source-wordpress',
    options: {
      baseUrl: 'https://mywordpresssite.com', // required
      typeName: 'WordPress', // GraphQL schema name (Optional)
      perPage: 100, // How many posts to load from server per request (Optional)
      concurrent: 10, // How many requests to run simultaneously (Optional)
      routes: {
        post: '/:year/:month/:day/:slug', //adds route for "post" post type (Optional)
        post_tag: '/tag/:slug' // adds route for "post_tag" post type (Optional)
      }
    }
  }]
}

Here's the relevant code from @gridsome/source-wordpress/index.js:

    for (const type in taxonomies) {
      const options = taxonomies[type]
      const typeName = makeTypeName(type)
      const route = routes[type] || `/${options.rest_base}/:slug`

      restBases.taxonomies[type] = options.rest_base

      for (const type of options.types) {
        const postTypeName = makeTypeName(type)
        const collection = getContentType(postTypeName)

        collection.addReference(options.rest_base, { typeName, key: '_id' })
      }

      addContentType({ typeName, route })
    }

Not sure what to do. I can't see anything in the documentation that clarifies this issue. Help would be appreciated.

fails on POST with 400

I configured the gridsome.config.js file to point to my site and playing around with the GraphQL explore URL it would appear it has connected correctly but when I run "develop" webpage I get a blank screen with two errors:

1. The first is a POST request
   

2. Then a Vue warning: "Cannot read property 'allWordPressPost' of undefined""
   

3. Finally, there is another run-time error which seems like a restatement of the second:
   

Since the error stems from the allWordPressPost query I thought I'd try a sample query from the explorer to see if it worked. Now I must admit I know very little about GraphQL but here are the query results:

Note: this blog has 1000's of posts from as early as 2001

Error: ECONNREFUSED - /wp-json/wp/v2/types

When I'm running "gridsome explore" or "gridsome develop" commands, I get this error:

$ gridsome explore
Gridsome v0.6.6

Initializing plugins...
Initialize - 1.81s
Loading data from
Error: ECONNREFUSED - /wp-json/wp/v2/types
    at WordPressSource.fetch (B:\Projets\Dev\Websites\travel-blog-gridsome\node_modules\@gridsome\source-wordpress\index.js:168:15)
    at process._tickCallback (internal/process/next_tick.js:68:7)

I tried the endpoint /wp-json/wp/v2/types in my browser and in Postman and I was able to access the endpoint without any problem.

QUESTION: Support for JWT authentication

I'm working on a site that uses JWT authentication for all third-party API calls.

Is there documentation on how to create a request to a custom endpoint generated by a WordPress plugin and how to add the authorization token to each subsequent request?

custom post types support?

Hello,
does it support custom post types?

I am running a job site and my custom post type name is 'jobs'

can i fetch such custom post type data using it or not?

thanks.

Failed to fetch baseUrl

I am unable to fetch data from the WordPress url. I simply put the url of the WordPress website in the baseUrl field.
The error says:

Error: Failed to fetch baseUrl https://discover.wordpress.com/
at WordPressSource.fetchWordPressContent (Z:\My Work\Projects\sample-project\node_modules@gridsome\source-wordpress\index.js:33:13)
at
at process._tickCallback (internal/process/next_tick.js:188:7)

Here's the code in gridsome.confg.js:

module.exports = {
  siteName: 'Gridsome',
  siteDescription: 'A WordPress starter for Gridsome',
  plugins: [
    {
      use: '@gridsome/source-wordpress',
      options: {
        baseUrl: 'https://discover.wordpress.com/', // required
        typeName: 'WordPress', // GraphQL schema name (Optional)
        perPage: 3, // How many posts to load from server per request (Optional)
        concurrent: 10, // How many requests to run simultaneously (Optional)
        routes: {
          post: '/:year/:month/:day/:slug', //adds route for "post" post type (Optional)
          post_tag: '/tag/:slug' // adds route for "post_tag" post type (Optional)
        }
      }
    }
  ]
}

Everything else is the same as in the gridsome WordPress starter template.

Getting a Error: Request failed with status code 401 on any Wordpress URL

See title, hosted or self hosted I'm not getting it to run develop or build

example urls: http://majornelson.com, https://api.androidtv.news

Any help would be great!

sourceUrl error

Error: Cannot query field "sourceUrl" on type "WordPressAttachment".

GraphQL request (36:7)
35: featuredMedia {
36: sourceUrl
^
37: altText

NB : i run my WP on local with mamp

Can you help me ?
Thanks

Error: Cannot query field "allWordPressPost" on type "Query". Did you mean "allGraphqlPost"?

`Gridsome v0.5.7

Initialize - 0.13s
Request failed with status code 401: https://dividends-o-matic.net/cms/wp-json/wp/v2/feedback?per_page=100
Load sources - 2.94s
Create GraphQL schema - 0.1s
No content type was found for src/templates/WordPressPostTag.vue
No content type was found for src/templates/WordPressPost.vue
No content type was found for src/templates/WordPressCategory.vue
Set up routes - 0s
Generate code - 0.01s
Bootstrap finish - 3.19s

ERROR Failed to compile with 1 errors 18.37.49

error in ./src/pages/Index.vue?vue&type=custom&index=0&blockType=page-query

Module build failed (from ./node_modules/gridsome/lib/webpack/loaders/page-query.js):
Error: Cannot query field "allWordPressPost" on type "Query". Did you mean "allGraphqlPost"?

GraphQL request (15:3)
14: query Home ($page: Int) {
15: allWordPressPost (page: $page, perPage: 10) @paginate {
^
16: pageInfo {

at Object.module.exports (/Users/jhalmu/Documents/Production/gridsome-site/node_modules/gridsome/lib/webpack/loaders/page-query.js:33:21)

@ ./src/pages/Index.vue?vue&type=custom&index=0&blockType=page-query 1:0-312 1:328-331 1:333-642 1:333-642
@ ./src/pages/Index.vue
@ ./src/.temp/routes.js
@ ./node_modules/gridsome/app/router.js
@ ./node_modules/gridsome/app/app.js
@ ./node_modules/gridsome/app/entry.client.js
@ multi webpack/hot/dev-server webpack-hot-middleware/client?name=app&reload=true ./node_modules/gridsome/app/entry.client.js

WAIT Compiling... 18.37.49

ERROR Failed to compile with 1 errors 18.37.49

error in ./src/pages/Index.vue?vue&type=custom&index=0&blockType=page-query

Module build failed (from ./node_modules/gridsome/lib/webpack/loaders/page-query.js):
Error: Cannot query field "allWordPressPost" on type "Query". Did you mean "allGraphqlPost"?

GraphQL request (15:3)
14: query Home ($page: Int) {
15: allWordPressPost (page: $page, perPage: 10) @paginate {
^
16: pageInfo {

at Object.module.exports (/Users/jhalmu/Documents/Production/gridsome-site/node_modules/gridsome/lib/webpack/loaders/page-query.js:33:21)

@ ./src/pages/Index.vue?vue&type=custom&index=0&blockType=page-query 1:0-312 1:328-331 1:333-642 1:333-642
@ ./src/pages/Index.vue
@ ./src/.temp/routes.js
@ ./node_modules/gridsome/app/router.js
@ ./node_modules/gridsome/app/app.js
@ ./node_modules/gridsome/app/entry.client.js
@ multi webpack/hot/dev-server webpack-hot-middleware/client?name=app&reload=true ./node_modules/gridsome/app/entry.client.js

Failed to compile with 2 errors

First time using Gridsome.. Tried with both WordPress starters. This one and other bootstrap.. Same error on both. What i'm doing wrong?

ERROR  Failed to compile with 2 errors                                                                       2:57:01 AM

 error  in ./src/templates/WordPressPost.vue?vue&type=custom&index=0&blockType=page-query

Module build failed (from ./node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js):
Error: Cannot query field "mediaDetails" on type "WordPressAttachment". Did you mean "mediaType"?

GraphQL request:44:7
43 |       altText
44 |       mediaDetails {
   |       ^
45 |         width
    at Object.module.exports (D:\Apps\gridsome-wp\node_modules\gridsome\lib\plugins\vue-components\lib\loaders\page-query.js:28:21)

 @ ./src/templates/WordPressPost.vue?vue&type=custom&index=0&blockType=page-query 1:0-339 1:355-358 1:360-696 1:360-696
 @ ./src/templates/WordPressPost.vue
 @ ./src/.temp/routes.js
 @ ./node_modules/gridsome/app/router.js
 @ ./node_modules/gridsome/app/entry.sockjs.js
 @ multi webpack/hot/dev-server webpack-hot-middleware/client?name=app&reload=true ./node_modules/gridsome/app/entry.client.js ./node_modules/gridsome/app/entry.sockjs.js

 error  in ./src/components/TagsWidget.vue?vue&type=custom&index=0&blockType=static-query

Module build failed (from ./node_modules/gridsome/lib/plugins/vue-components/lib/loaders/static-query.js):
Error: Cannot query field "title" on type "WordPressPostTag".

GraphQL request:22:9
21 |       node {
22 |         title
   |         ^
23 |         slug
    at Object.module.exports (D:\Apps\gridsome-wp\node_modules\gridsome\lib\plugins\vue-components\lib\loaders\static-query.js:34:14)

 @ ./src/components/TagsWidget.vue?vue&type=custom&index=0&blockType=static-query 1:0-340 1:356-359 1:361-698 1:361-698
 @ ./src/components/TagsWidget.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/babel-loader/lib??ref--1-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/SiteSidebar.vue?vue&type=script&lang=js&
 @ ./src/components/SiteSidebar.vue?vue&type=script&lang=js&
 @ ./src/components/SiteSidebar.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/babel-loader/lib??ref--1-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/layouts/Default.vue?vue&type=script&lang=js&
 @ ./src/layouts/Default.vue?vue&type=script&lang=js&
 @ ./src/layouts/Default.vue
 @ ./src/main.js
 @ ./node_modules/gridsome/app/main.js
 @ ./node_modules/gridsome/app/app.js
 @ ./node_modules/gridsome/app/entry.client.js
 @ multi webpack/hot/dev-server webpack-hot-middleware/client?name=app&reload=true ./node_modules/gridsome/app/entry.client.js ./node_modules/gridsome/app/entry.sockjs.js

In gridsome.config.js

module.exports = {
  siteName: 'Gridsome',
  siteDescription: 'A WordPress starter for Gridsome',

  templates: {
    WordPressCategory: '/category/:slug', // adds route for "category" post type (Optional)
    WordPressPost: '/:year/:month/:day/:slug', //adds route for "post" post type (Optional)
    WordPressPostTag: '/tag/:slug' // adds route for "post_tag" post type (Optional)
  },

  plugins: [
    {
      use: '@gridsome/source-wordpress',
      options: {
        baseUrl: 'http://words.test/', // process.env.WORDPRESS_URL, // required
        typeName: 'WordPress', // GraphQL schema name (Optional)
      }
    }
  ]
}

Updating for v0.7, Routes/Templates

@hjvedvik - I'm updating the wordpress starter to be compatible with gridsome 0.7, at least on my fork, for a future PR. The only deprecation notices I'm still getting are regarding using templates for routes in addCollection().

Since there's no gridsome.config.js in the starter, I'm not sure how or where to add the Templates configuration in this context. Can you point me in the right direction?

Custom Post Types 'rest_base' starting with '/'

Looks like some custom post types have a "rest_base" value starting with /. This makes the fetch request look something like <BASE_URL>/wp-json/wp/v2//api/winners which fails.

I modified getPostTypes to this:

 async getPostTypes(actions) {
    const { data } = await this.fetch("wp/v2/types", {}, {});
    const addCollection = actions.addCollection || actions.addContentType;
    for (const type in data) {
      const options = data[type];

      while (options.rest_base.charAt(0) === "/") {
        options.rest_base = options.rest_base.substr(1);
      }

      this.restBases.posts[type] = options.rest_base;
      addCollection({
        typeName: this.createTypeName(type),
        route: this.routes[type]
      });
    }
  }

And that seems to fix it.

*Edit: Whoops, maybe this is better suited for the main repo. This is the file I was referencing though: https://github.com/gridsome/gridsome/blob/master/packages/source-wordpress/index.js

vue-svg-loader giving Error: Cannot query field "allWordPressP ost" on type "Query".

When added the code below to the gridsome.config.js. It gives the Error: Cannot query field "allWordPressPost" on type "Query". When remove the code below it error disappears but the svg don't load. I just added svg inline.

module.exports = {
chainWebpack: config => {
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.use('vue-svg-loader')
.loader('vue-svg-loader')
}
}

Use :category as path

Is there a way to access the Queried Categories for a post so I can include the category slug in the Post path?
Something like this /:category/:slug

TypeError: Cannot destructure property `status` of 'undefined' or 'null'.

I am trying to fetch data from wordpress site, located on subdomain of my personal site.

I have created .env file in the root directory of project, inside which i have added
WORDPRESS_URL=https://woo.islamibakaev.ru/

On yarn develop i get this output in terminal

yarn run v1.17.3
$ gridsome develop
Gridsome v0.7.3

Initializing plugins...
Loading data from https://woo.islamibakaev.ru
TypeError: Cannot destructure property `status` of 'undefined' or 'null'.
    at WordPressSource.fetch (/home/devellopah/projects/vue/vue-wordpress/node_modules/@gridsome/source-wordpress/index.js:169:40)
    at process._tickCallback (internal/process/next_tick.js:68:7)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Please help to figure out the issue. Thanks in advance!

Cannot query field "url"

got following error code within /src/templates/WordPressPost.vue

Error: Cannot query field "url" on type "WordPressAttachment".

GraphQL request (36:7)
35: featuredMedia {
36: url
^
37: width

When trying to connect using Postman, everything is fine with my API.

Any advice?
Thaks

Cheers Gerhard

WordPress Multisite support

I just started looking at using Gridsome to migrate our WordPress site to the JAM-stack. This starter works great for a single site. However, the WP instance I am working with is a multilingual site, where each language is its own site in a multisite installation.

Since using multisite as means of internationalisation is quite a common solution in WordPress, might it be an idea to support this in the starter?
Or if anyone has an idea how to solve this issue a different way, I could look into that as well. For the moment I'm rather stuck on finding the best solution.