Create Author Page - VueJS WordPress Theme

If you have a multi-author blog then you will have information about the author of the post on the page so that user's can find out more about the author or more articles from the same writer. In this tutorial, we're going to build the author page for the VueJS theme and add the author link on the blog posts on your Single component.

Add Author Route

If you refer back to the tutorial on setting up the routes you'll see we've already created a route for our author page.

{
    name: 'Author',
        path
:
    '/author/:authorId',
        component
:
    Author
}
,

Add Link To Author

To link to this author page we're going to add a link at the top of the posts saying something like Written by AUTHOR_NAME with a link to the author page. Open up the /src/components/global/SinglePost.vue file and under the title we'll add a link for the author.

<h2 class="subtitle" v-if="author">
    Written by
    <router-link
    :to="{name:'Author', params: {authorId: author.id}}">{{author.name}}
</router-link>
</h2>

On the first line you'll see we've added the directive v-if this means we'll only show this line if author is set. Then we use the tag router-link to create a link to Author router with the parameter authorId, which links around the author.name data item. To get this data into the SinglePost.vue component we need to add another prop for author.

<script>
    export default{
    props: ['post', 'author']
}
</script>

Getting Author Data

When we get the post data we also return an author data point for the author ID, we can then use this ID and the users endpoint /wp-json/wp/v2/users/{ID} to get the author data. Inside the parent component (Post.vue) we have a method to getPost(), once we have the post information we can then make a call to a new method of getAuthor().

getAuthor () {
    axios.get(process.env.API_URL + '/wp-json/wp/v2/users/' + this.post.author).then(response => {
        this.author = response.data
    })
}

Passing in the author ID will return the author data and store this in a new data point of author. Therefore inside the data we need to add the new author point.

data () {
    return {
        title: '',
        post: [],
        author: []
    }
},

Finally, we need to pass in the author data into the single-post tag.

<template>
    <single-post v-bind:post="post" v-bind:author="author"></single-post>
</template>

Author Page

We now have a link to the author page, a route setup to display the Author component, now we can create the Author component to display a description of the author and a list of their posts. First, create a file at /vue-wordpress-theme/src/components/pages/Author.vue. Inside the template tag of this file, we need to add the author name, author description and the list-posts component to list all posts.

<template>
    <div id="author">
        <h2 class="title is-2">{{ author.name }} Posts</h2>

        <p>{{ author.description }}</p>

        <list-posts v-bind:posts="posts"></list-posts>
    </div>

</template>

Inside the script tag we first need to import the Axios library and the ListPosts component.

import axios from 'axios'
import ListPosts from '../global/ListPosts.vue'

Then we can add the data points for this component being posts and author.

data () {
    return {
    posts: [],
    author: []
    }
},

On the created method of the component, we will need to get the author data, set the document title then get the posts for this author.

created () {
    this.getAuthor()
    this.getPosts()
},

The getAuthor method will use the users endpoint with the ID sent from the URL to get the data for this author.

getAuthor () {
  var path = this.$route.path.split('/')
  axios.get(process.env.API_URL + '/wp-json/wp/v2/users/' + path[path.length - 1])
  .then(response => {
    this.author = response.data

    if (this.author === undefined) {
      this.$router.push({name: 'NotFound'})
    }

    document.title = this.author.name + ' Posts'
  })
  .catch(e => {
    console.log(e)
  })
}

Then we can get the posts for this author by using the posts endpoint with the argument of author.

getPosts () {
  var path = this.$route.path.split('/')
  axios.get(process.env.API_URL + '/wp-json/wp/v2/posts?author=' + path[path.length - 1])
  .then(response => {
    this.posts = response.data
  })
  .catch(e => {
    console.log(e)
  })
},

We'll now see the author information on the page and a list of all their posts, below is the full code used for the Author.vue component.