├── .gitignore
├── README.md
├── gridsome.config.js
├── netlify.toml
├── package.json
└── src
    ├── components
        └── Post.vue
    ├── favicon.png
    ├── layouts
        └── Default.vue
    ├── main.js
    ├── pages
        ├── About.vue
        └── Index.vue
    └── templates
        ├── WordPressCategory.vue
        ├── WordPressPost.vue
        └── WordPressPostTag.vue


/.gitignore:
--------------------------------------------------------------------------------
1 | *.log
2 | .cache
3 | .DS_Store
4 | src/.temp
5 | node_modules
6 | dist
7 | .env
8 | .env.*
9 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # WordPress starter for Gridsome
 2 | 
 3 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/gridsome/gridsome-starter-wordpress)
 4 | 
 5 | ## Install
 6 | 
 7 | `gridsome create my-gridsome-project wordpress`
 8 | 
 9 | ## Guide
10 | 
11 | Add your WordPress URL to the plugin options.
12 | 
13 | ```js
14 | // gridsome.config.js
15 | 
16 | module.exports = {
17 |   plugins: [
18 |     {
19 |       use: '@gridsome/source-wordpress',
20 |       options: {
21 |         baseUrl: 'YOUR_WEBSITE_URL', // required
22 |         typeName: 'WordPress', // GraphQL schema name
23 |       }
24 |     }
25 |   ],
26 |   // Setup template routes for any WordPress collection
27 |   templates: {
28 |     WordPressPost: '/:year/:month/:day/:slug',
29 |     WordPressTag: '/tag/:slug'
30 |   },
31 | }
32 | 
33 | ```
34 | 
35 | See all [options](https://gridsome.org/plugins/@gridsome/source-wordpress).
36 | 
37 | ## Included templates
38 | 
39 | This starter includes basic templates for categories, tags and posts.
40 | 


--------------------------------------------------------------------------------
/gridsome.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   siteName: 'Gridsome',
 3 |   siteDescription: 'A WordPress starter for Gridsome',
 4 | 
 5 |   templates: {
 6 |     WordPressCategory: '/category/:slug', // adds a route for the "category" post type (Optional)
 7 |     WordPressPost: '/:year/:month/:day/:slug', // adds a route for the "post" post type (Optional)
 8 |     WordPressPostTag: '/tag/:slug' // adds a route for the "post_tag" post type (Optional)
 9 |   },
10 | 
11 |   plugins: [
12 |     {
13 |       use: '@gridsome/source-wordpress',
14 |       options: {
15 |         baseUrl: process.env.WORDPRESS_URL, // required
16 |         typeName: 'WordPress', // GraphQL schema name (Optional)
17 |       }
18 |     }
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   publish = "dist"
3 |   command = "gridsome build"
4 |   
5 | [template.environment]
6 |   WORDPRESS_URL = "Replace me with your Wordpress URL"
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "develop": "gridsome develop",
 5 |     "explore": "gridsome explore",
 6 |     "build": "gridsome build"
 7 |   },
 8 |   "dependencies": {
 9 |     "@gridsome/source-wordpress": "^0.5.0",
10 |     "gridsome": "^0.7.0"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/components/Post.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2 v-html="post.title" />
 4 |     <div v-html="post.excerpt" />
 5 |     <g-link :to="post.path">
 6 |       Read More
 7 |     </g-link>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   props: {
14 |     post: {
15 |       type: Object,
16 |       required: true
17 |     }
18 |   }
19 | }
20 | </script>
21 | 


--------------------------------------------------------------------------------
/src/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gridsome/gridsome-starter-wordpress/f9dfdfc3f6faddf8431f343ba8079411b5f18db6/src/favicon.png


--------------------------------------------------------------------------------
/src/layouts/Default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="layout">
 3 |     <header class="header">
 4 |       <strong>
 5 |         <g-link to="/">Gridsome</g-link>
 6 |       </strong>
 7 |       <nav class="nav">
 8 |         <g-link class="nav__link" to="/">Home</g-link>
 9 |         <g-link class="nav__link" to="/about/">About</g-link>
10 |       </nav>
11 |     </header>
12 |     <slot/>
13 |   </div>
14 | </template>
15 | 
16 | <style>
17 | body {
18 |   font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
19 | }
20 | 
21 | img {
22 |   max-width: 100%;
23 | }
24 | 
25 | nav[role="navigation"] {
26 |   text-align: center;
27 | }
28 | nav[role="navigation"] a {
29 |   display: inline-block;
30 |   margin: 1.0em 0.75em 2.0em;
31 | }
32 | 
33 | .layout {
34 |   max-width: 600px;
35 |   margin: 0 auto;
36 |   padding-left: 20px;
37 |   padding-right: 20px;
38 | }
39 | .header {
40 |   display: flex;
41 |   justify-content: space-between;
42 |   margin-bottom: 20px;
43 | }
44 | .nav__link {
45 |   margin-left: 20px;
46 | }
47 | .post-list {
48 |   list-style: none;
49 |   padding-left: 0;
50 | }
51 | .post-list li {
52 |   padding: 1em 0;
53 | }
54 | </style>
55 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import DefaultLayout from '~/layouts/Default.vue'
2 | 
3 | export default function (Vue) {
4 |   Vue.component('Layout', DefaultLayout)
5 | }
6 | 


--------------------------------------------------------------------------------
/src/pages/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <h1>About me</h1>
 4 |     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error doloremque omnis animi, eligendi magni a voluptatum, vitae, consequuntur rerum illum odit fugit assumenda rem dolores inventore iste reprehenderit maxime! Iusto.</p>
 5 |   </Layout>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   metaInfo: {
11 |     title: 'About me'
12 |   }
13 | }
14 | </script>
15 | 


--------------------------------------------------------------------------------
/src/pages/Index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <h1>Welcome to my blog :)</h1>
 4 |     <ul class="post-list">
 5 |       <li v-for="{ node } in $page.allWordPressPost.edges" :key="node.id">
 6 |         <Post :post="node" />
 7 |       </li>
 8 |     </ul>
 9 |     <Pager :info="$page.allWordPressPost.pageInfo"/>
10 |   </Layout>
11 | </template>
12 | 
13 | <page-query>
14 | query Home ($page: Int) {
15 |   allWordPressPost (page: $page, perPage: 10) @paginate {
16 |     pageInfo {
17 |       totalPages
18 |       currentPage
19 |     }
20 |     edges {
21 |       node {
22 |         id
23 |         title
24 |         path
25 |         excerpt
26 |       }
27 |     }
28 |   }
29 | }
30 | </page-query>
31 | 
32 | <script>
33 | import { Pager } from 'gridsome'
34 | import Post from '~/components/Post.vue'
35 | 
36 | export default {
37 |   components: {
38 |     Pager,
39 |     Post
40 |   },
41 |   metaInfo: {
42 |     title: 'Welcome to my blog :)'
43 |   }
44 | }
45 | </script>
46 | 


--------------------------------------------------------------------------------
/src/templates/WordPressCategory.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <h1>Category: {{ $page.wordPressCategory.title }} </h1>
 4 |     <ul class="post-list">
 5 |       <li v-for="{ node } in $page.wordPressCategory.belongsTo.edges" :key="node.id">
 6 |         <Post :post="node" />
 7 |       </li>
 8 |     </ul>
 9 |     <Pager :info="$page.wordPressCategory.belongsTo.pageInfo"/>
10 |   </Layout>
11 | </template>
12 | 
13 | <page-query>
14 | query WordPressCategory ($id: ID!, $page: Int) {
15 |   wordPressCategory(id: $id) {
16 |     title
17 |     belongsTo(page: $page, perPage: 10) @paginate {
18 |       pageInfo {
19 |         totalPages
20 |         currentPage
21 |       }
22 |       edges {
23 |         node {
24 |           ... on WordPressPost {
25 |             id
26 |             title
27 |             path
28 |             excerpt
29 |         	}
30 |         }
31 |       }
32 |     }
33 |   }
34 | }
35 | </page-query>
36 | 
37 | <script>
38 | import { Pager } from 'gridsome'
39 | import Post from '~/components/Post.vue'
40 | 
41 | export default {
42 |   components: {
43 |     Pager,
44 |     Post
45 |   },
46 |   metaInfo () {
47 |     return {
48 |       title: this.$page.wordPressCategory.title
49 |     }
50 |   }
51 | }
52 | </script>
53 | 


--------------------------------------------------------------------------------
/src/templates/WordPressPost.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <h1 v-html="$page.wordPressPost.title"/>
 4 |     <img
 5 |       v-if="$page.wordPressPost.featuredMedia"
 6 |       :src="$page.wordPressPost.featuredMedia.sourceUrl"
 7 |       :width="$page.wordPressPost.featuredMedia.mediaDetails.width"
 8 |       :alt="$page.wordPressPost.featuredMedia.altText"
 9 |     />
10 |     <div v-html="$page.wordPressPost.content"/>
11 |     <template v-if="$page.wordPressPost.categories.length">
12 |       <h4>Posted in</h4>
13 |       <ul class="list categories">
14 |         <li v-for="category in $page.wordPressPost.categories" :key="category.id" >
15 |           <g-link :to="category.path">{{ category.title }}</g-link>
16 |         </li>
17 |       </ul>
18 |     </template>
19 |     <template v-if="$page.wordPressPost.tags.length">
20 |       <h4>Tags</h4>
21 |       <ul class="list tags">
22 |         <li v-for="tag in $page.wordPressPost.tags" :key="tag.id" >
23 |           <g-link :to="tag.path">{{ tag.title }}</g-link>
24 |         </li>
25 |       </ul>
26 |     </template>
27 |   </Layout>
28 | </template>
29 | 
30 | <page-query>
31 | query WordPressPost ($id: ID!) {
32 |   wordPressPost(id: $id) {
33 |     title
34 |     content
35 |     featuredMedia {
36 |       sourceUrl
37 |       altText
38 |       mediaDetails {
39 |         width
40 |       }
41 |     }
42 |     categories {
43 |       id
44 |       title
45 |       path
46 |     }
47 |     tags {
48 |       id
49 |       title
50 |       path
51 |     }
52 |   }
53 | }
54 | </page-query>
55 | 
56 | <script>
57 | export default {
58 |   metaInfo () {
59 |     return {
60 |       title: this.$page.wordPressPost.title
61 |     }
62 |   }
63 | }
64 | </script>
65 | 
66 | <style>
67 |   ul.list {
68 |     list-style: none;
69 |     padding: 0;
70 |   }
71 |   ul.list li {
72 |     display: inline-block;
73 |     margin-right: 0.25em;
74 |   }
75 |   ul.list.tags li a {
76 |     padding: 0.25em 0.5em;
77 |     background-color: lightgray;
78 |   }
79 |   ul.list.categories li:after {
80 |     content: ',';
81 |     display: inline-block;
82 |   }
83 |   ul.list li:last-child:after {
84 |     content: '';
85 |   }
86 | </style>
87 | 


--------------------------------------------------------------------------------
/src/templates/WordPressPostTag.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <h1>Tag: {{ $page.wordPressPostTag.title }} </h1>
 4 |     <ul class="post-list">
 5 |       <li v-for="{ node } in $page.wordPressPostTag.belongsTo.edges" :key="node.id">
 6 |         <Post :post="node" />
 7 |       </li>
 8 |     </ul>
 9 |     <Pager :info="$page.wordPressPostTag.belongsTo.pageInfo"/>
10 |   </Layout>
11 | </template>
12 | 
13 | <page-query>
14 | query WordPressPostTag ($id: ID!, $page: Int) {
15 |   wordPressPostTag(id: $id) {
16 |     title
17 |     belongsTo(page: $page, perPage: 10) @paginate {
18 |       pageInfo {
19 |         totalPages
20 |         currentPage
21 |       }
22 |       edges {
23 |         node {
24 |           ... on WordPressPost {
25 |             id
26 |             title
27 |             path
28 |             excerpt
29 |         	}
30 |         }
31 |       }
32 |     }
33 |   }
34 | }
35 | </page-query>
36 | 
37 | <script>
38 | import { Pager } from 'gridsome'
39 | import Post from '~/components/Post.vue'
40 | 
41 | export default {
42 |   components: {
43 |     Pager,
44 |     Post
45 |   },
46 |   metaInfo () {
47 |     return {
48 |       title: this.$page.wordPressPostTag.title
49 |     }
50 |   }
51 | }
52 | </script>
53 | 


--------------------------------------------------------------------------------