Jazz up your blog’s author details for WordPress using Views

author profile

If your blog has multiple authors, then you’ll probably want to create customized profile pages for them.

WordPress gives us an author archive page we can easily enhance with Types & Views to create our custom profile page.

In this article we’ll be adding some new user custom fields to our author, and using them on our profile page.

We’ll be creating a profile page that looks very similar to the Author profile on this site. The final results will vary slightly depending on the theme you are using (this site uses the roots starter theme).

To keep the tutorial simple we’ll be using the WordPress Twenty Fourteen theme in our examples.

What we’ll be covering

There are plugins out there that come close to delivering the functionality we want to add, but with Types & Views we can roll our own quickly and efficiently without the need to add additional plugins.

You will need to understand simple HTML and CSS to follow this article, and if you have had some exposure to Types & Views, that will be an advantage.

Concepts covered:

  • WordPress Archives
  • Custom user fields
  • Yoast WP SEO social links
  • Views WordPress archives
  • User display name
  • Content template for code re-use

1. The author profile page

If you visit most blogs and click on the author’s name, you’ll link to the WordPress Author Archive page. Depending on your theme, this will display the name of the current author and a list of all their posts.

The author page for the Twenty Fourteen theme for example.

user profile
user profile admin view

On our profile page we want to display, the author bio, a profile photo and social icons for the author – and of course, a list of posts by the author.

The first question we have to consider is where to find the information we want to display. The default WordPress User page gives us a start with name and bio, and we will want to add more fields here for our authors.

The WordPress default bio only allows plain text. There’s a good reason for this, letting users use HTML in their bio, could lead to security issues. We trust our authors, so in our case this is not going to be a problem – we want them to be able to create rich profiles and the bio needs to accept HTML.

Social links with WordPress SEO

User social fields with WordPress SEO

We also want to add fields for our social links: twitter, google+, facebook and linkedIn.

We have a short-cut for this step. We use the WordPress SEO plugin from Yoast on all our sites. So we’ll install this now.

With WP SEO installed, if we look at the user profile page, we’ll see that WordPress SEO has added new fields for social links to our user profile.

From our original social wish list, we are only missing a field for LinkedIn – we’ll add this as a custom user field in the next section. If you are not planning to use WordPress SEO, then you can follow the steps we use below to add LinkedIn, and repeat them for the other social links.

Finally, we want to let our authors upload a profile photo.

2. Creating custom user fields with Types

Types - create user fields

Types makes this a trivial task. Open Types from the WordPress admin. Select User Fields, and click to Add a user meta group.

Usermeta Group

Give your group a name and description. We only want the custom profile fields to display for certain roles, this could be just author, but we’ll select all roles except subscriber.

user custom bio fields

Now we’ll add our new bio fields: a WYSIWYG field for the bio; Single line fields for each of our social links (just linked-in in our case), and Image for our profile photo.

If you go check out your user profile, you’ll see our new fields added to it. Just fill in the details and in the next section we’ll look at how to display them on your page.

3. Taking control of your author archive page

Views WordPress archives - Authors

Views WordPress Archives allow you to easily replace any of your archive pages, with your own formatted output.

Select Views, WordPress Archives – click to create your first archive.

Select Author archives as the loop you want to replace with this View, and give your View a name, we’ve called ours Authors.

Position to insert Author profile

By default, our loop is going to display the posts for the selected author. We will want to display the posts, but first we want our author profile to be displayed prominently. So we need to insert our author information before the loop.

Scroll down to the Layout HTML/CSS/JS section of your View.

We want to display the profile regardless of whether the author has posts or not.

Position your cursor between the wpv-layout-start shortcode and wpv-items-found shortcode.

Insert author profile fields
We can use the Views GUI to do the hard work for use, so click on the Fields button, and then the Author profile (User meta fields) link. This will display all the custom user fields we created earlier. First, we’ll select our Author image.
Configure author image

Form the config pop-up. Give the image title and alt values, set the alignment to left. We’ll use an image size of Medium. Now click on the User tab. You’ll see that the Author of this post is preselected, that’s just what we want. Now click to Insert shortcode into your layout.

Repeat the process and select the Author bio field, we have no options to select this time, so just insert the shortcode.

Your layout should look something like the following.

We’ve added a little html – wrapping the author detail section in a div and given it a couple classes to style it.

Author profile first cut
So let’s check out the results. Assuming you’ve populated your profile and have at least one post with an author you can click on. You should see a fairly presentable bio page.

We are using a new install with the WordPress Twenty Fourteen theme and no additional CSS and, aside from the title, it doesn’t look too bad.

Display name publicly as

By default, WordPress selects the username as our display name – we can change this easily from the user profile page. Make sure you have a First Name and Last Name set, and then just select the format you want from the Display name publicly as drop-down.

Depending on the permalink settings you are using, the URL to the Author page will probably still contain the username (in our example is is /author/admin/).

We don’t really want this to be public on our site – in the security note at the end of this article, we explain how you can change this.

Our user profile with image, bio and display name

Author profile - complete no social
Author profile

So if we click on the Author link for any of our posts we’ll see the profile page. Right now this is missing our social links and our Author’s posts, we’ll get to that in the next section, but our photo and bio are displayed and now our name looks good in the title.

4. Displaying social links for the Author

We are going to use a Content template for our social links. In this context, the Content template just serves as a way of creating a block of meta HTML that we can reuse , in more than one View or archive View. We can create our Content template directly from the Authors archive View we have just created. So first, go edit the Views WordPress archive for Authors.

Add new content template
Scroll down to the the Layout HTML/CSS/JS section of your View. We are going to insert our social icons below the bio text, so position your cursor just before the closing /div we created to wrap our author details.

Click on the Content template button. Select to Create a new content template, give it a name and hit Add template.

New content template
Views has inserted the Content template shortcode into our view in the desired location, and opened a new edit window for the Content template. Scroll down and we’ll start to add the code for our social links in the Content template.

Two types of social links

In our example, we added the LinkedIn field as a Types custom user field for our Author.

The other social links were added by WordPress SEO as standard author fields and we can access them using the Views shortcode, wpv-post-author – if we set the format parameter for this short code to meta, then we can retrieve any of the author’s meta data parameters.

For example, the following shortcode wpv-post-author format="meta" meta="first_name" would output the author’s first name.

Adding the social links

We’ll start by adding our linkedIn field.

Click on the Fields button, and then the Author profile (User meta fields) link. Select the LinkedIn field, and click to Insert shortcode – the default options are fine.

Now we need to add the our Views shortcodes for our other social links – we don’t have a GUI to help us now, so here’s the format of the first of our social fields:

wpv-post-author format="meta" meta="twitter"

The meta values for the other social links are googleplus and facebook. Create shortcodes for these two and add them to your Content template.

Your meta HTML should look like the following:

Creating the social links

The shortcodes we’ve just added will output the values our Author has entered in their profile, not the links we want. So the next step is to create the full link for each social site, so let’s do this:

Check the format carefully here. You’ll see that the Twitter link includes the @ value. Google requires the + prefix and is suffixed by /posts.

Add images for our links

Insert social icon image

There are plenty of sources for social icons around the internet. You can add these from the Content template. Position the cursor between the opening and closing link tags, a href="…" and /a.

Insert an empty image tag img src="" /. Position the cursor between the quotes for the image source, click the Media button, and insert the image for our social link.

Repeat the process for the other images. This should give you a structure something like the following:

Conditional display – don’t display empty links

Ok, we really don’t want to display broken links if the user has not added, or doesn’t have a Facebook page for example. We’ll add a Views conditional statement using the wpv-if shortcode. We will test if the field is empty and not display the link if it is.

Create an HTML structure for the links

Now we’ll add an HTML structure for our links (we’ll use an unordered list).

Style our list of links

We’ve added the twitter bootstrap class, .list-inline to our unordered list. If you are using Bootstrap then this will line up your icons horizontally, if not, then just add the following css (you can add this in the CSS section of your Authors WordPress Archive View).

Our completed author profile

Author profile with social icons
Ok our author profile is complete and all our social icons link correctly. Now we need to display our Author’s posts.

5. List posts for the current author

Now our Author profile is complete, we just need to list the posts for our author. The loop in our Authors Views WordPress archive will display our posts by default (we assigned it to our Author archives back in step 2).
Your Authors WordPress archive view should look like the following:

Layout wizard

We’ll use the Views Layout tool to add our post fields. First delete all content between the wpv-items-found and /wpv-items-found shortcodes.

Position your cursor between the two shortcodes and click the Layout Wizard button.

Add fields to layout

Select a layout style of Unordered list, click next, and select the fields you want to display for your post – we’ll be using: Title with a link, Date, Comments number and Excerpt.

Click Next again, and the select to insert the layout In the current cursor position.

Now we’ll add some styling to tidy the output.

We’ve added a div to wrap the loop so we can style it as a block, and inserted a title with the author’s name wpv-post-author format="meta" meta="first_name". Our unordered list has a bootstrap class to remove the normal list markup, and we’ve tidied up the post items in our loop.

This is the additional CSS that we have added.

Our final Author profile page

Author profile - final version
Author profile – final version

We now have our Author profile page with our image, bio, social links and the list of posts by the author.

You can see, that we’ve styled our author profile page a little differently and made it responsive, but the structure is identical to the steps we’ve covered in this article.

If you’ve enjoyed this article then please do say so – feedback is gratefully received.

Feel free to ask questions in the comments.

Afterword – hiding your usernames from view

A rather odd feature of WordPress is that links to authors use the ‘nicename‘ as part of the url for the author page. As the nicename is just a ‘sanitized’ version of the username (e.g. admin), this makes usernames easily accessible from the site – which is not ideal. The username cannot change, so we’re fairly safe updating the nicename directly in the database for our authors.

I’m not going to go into detail, but you can easily change the ‘nicename’ just by editing the appropriate field in the mySQL users table.

Don’t worry too much if you are not sure how to do this. Stick with the WordPress default, you’ll be in good company.

Leave a Reply

You must be logged in to post a comment.