WordPress / Web Development Tutorials
(Best WordPress Tutorials)

CSSHTMLJavaScriptjQueryMySQLPHPSilvaTechnologiesWooCommerceWordpress
Silva Web Designs - Blog

How to Add a Custom Author Profile Page to Your WordPress Site

If you are looking to add a custom author profile page to your WordPress site then you’ve come to the right place. In this tutorial, we will show you how to create a custom author profile page with and without the use of a plugin.

As always, we will show you how to add this without a plugin and then provide the plugin alternative method.

1. How to Manually Add a Custom Author Profile Page to Your Theme

The first step is to create the author.php file, this will go within your theme/child theme folder. Now we can simply copy and paste the contents of the archive.php file and paste it within the author.php file.

If your theme already has an author.php file, then you can edit that as well.

Our main goal here is to get the author’s profile information and then display it. You will need to decide where you want to start editing. As a general rule of thumb, you can usually edit anything between the get_header(); and get_sidebar() lines.


<?php
	$theauthor = (isset($_GET['author_name'])) ? get_user_by('slug', $author_name) : get_userdata(intval($author));
?>
     
<div class="author-profile-card">
    <h2>About: <?php echo $theauthor->nickname; ?></h2>
    <div class="author-photo">
    <?php echo get_avatar( $theauthor->user_email , '90 '); ?>
    </div>
    <p><strong>Website:</strong> <a href="<?php echo $curauth->user_url; ?>"><?php echo $theauthor->user_url; ?></a><br />
    <strong>Bio:</strong> <?php echo $theauthor->user_description; ?></p>
</div>
     
<h2>Posts by <?php echo $theauthor->nickname; ?>:</h2>
 
 
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	<h3>
		<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a>
	</h3>
	<p class="posted-on">Posted on: <?php the_time('d M Y'); ?></p>
	 
	<?php the_excerpt(); ?>
	 
	<?php endwhile; 

	the_posts_pagination();
	 
	else: ?>
	
	<p><?php _e('This author hasn\'t posted yet.'); ?></p>
 
<?php endif; ?>

The above code will add the author’s profile details at the top of the page and then it will display their recent posts below.

This code can be customised to your needs, for example, you could add social links, display featured images for the post, customise the posts to look like your blog archive page, and so on.

To get you started, here is some CSS code that you can add to make your author profile look more presentable. Feel free to make changes and further improve to match the theme of your website.


.author-profile-card {
    background: #eee;
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
}

.author-photo {
    float: left;
    text-align: left;
    padding: 5px;
    margin-right: 10px;
}

img.avatar {
    border-radius: 50%;
}

You will end up with a page that looks something along the following lines:

2. How to Add a Custom Author Profile Page in WordPress with a Plugin

For this method, we are going to install and active the WP User Manager plugin.

Once activated, you need to go to Users » WPUM Settings page to configure the plugin to your requirements.

This plugin will automatically create pages for a custom login, user registration, forgot password, account and profile pages.

WP User Manager comes fully packed with a lot of options and customisation. You will have to go through the settings and enable/disable the features that you require for your site.

Once completed, we can click on the Profiles tab to setup the user profile settings.

In this tab, we can enable the profile page option for guest which allows anyone to view the user’s profile. You can also allow members to view one another profile. If unchecked, you will only be able to see your own profile page.

You can also allow users to upload a custom profile image and display their recent posts as well as comments on their profile page. Once you’ve configured it to your liking click the Save Changes button.

Now, we will need to select SEO friendly URLs on permalinks for the author profile pages. This can be done by going to Settings » Permalinks page. Scroll down to the ‘User profile permalink base’ section.

This plugin allows you to use the user ID, username, or nickname in the URL. Both nickname and username are more SEO friendly options than user ID. Click to select either one of them and then click on the save changes button to store your permalink settings.

For the next step, we need to let users easily find their profile pages on your website. What you can do here is go to Appearance » Widgets and add the WPUM Login Form widget to one of your sidebars

Once done, you can now view your new author’s profile page. If you are logged in, you will see your own account details in the sidebar widget. Click on the username and this will take you to the author profile page.

The sidebar widget will show a login form for users who are logged out. If you wish users to register on your website, the form will also include a link to sign up. This plugin will also change author links on your website and point them to the author profile page as opposed to the default author’s archive page.

If you want to customise the plugin you can add some CSS to match it with your WordPress theme. However, if you want to take it one step further and adjust the layout, you will need to edit the plugin’s template files. The plugin comes with custom templates support which means you can create your own templates within your theme folder.

To do this, head over to the /wp-content/plugins/wp-user-manager/templates/ directory and download all the files. Next, head over to your theme/child theme folder and create a new folder called wpum. Now, we can add the files you downloaded previously within this folder.

Now you can edit these files to customise the appearance of your profile page as you wish.

Conclusion

And that’s it! We have now learned how to add a custom author profile page in WordPress with and without the use of a plugin.

We hope you found this tutorial useful. If you need any help with anything, feel free to drop a comment below.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Join the discussion

Related Posts

Related - How to Remove Website URL Field from WordPress Comment Form

Wordpress / 19th November 2020

How to Remove Website URL Field from WordPress Comment Form

Read More