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

How to Remove Website URL Field from WordPress Comment Form

In this tutorial, we are going to show you how to remove the Website URL Field which appears by default in the WordPress comment form.

As you might be aware, spam comments are a big issue for any WordPress Blog. The biggest reason you get spam comments as well is for people to get a backlink to their website using the Website URL field that appears in the comment form by default.

Since most of the spam is generated by automated bots, you can combat this with free tools and plugins. The trickiest part is to discourage spam comments submitted by real people. These are generally comments submitted by actual users are tend to either be off-topic, irrelevant, but also add no value to the discussion of the post. A good tool for this is Akismet along with removing the URL field from the comment form.

We are going to show you two ways to remove the Website URL Field; first one being with custom code and the second with the use of a plugin.

How to Manually Remove the Website URL Field From WordPress Comment Form

We always supply the manual removal first, as if you can get away without adding additional plugins to your website, it’s always better. What you need to do is actually quite simple; simply add the below code to your functions.php file and jobs a good’n.


add_filter('comment_form_default_fields', 'unset_url_field');
function unset_url_field($fields){
    if(isset($fields['url']))
       unset($fields['url']);
       return $fields;
}

What this does is simply removes the Website URL field from your WordPress comment form.

How to Remove the Website URL Field From WordPress Comment Form With A Plugin

If you want to go ahead with the plugin method, again, this is very simple. All you need to do is install and activate the Comment Link Remove and Other Comment Tools plugin

First, you need to install and activate the Comment Link Remove and Comment Tools plugin. For detailed instructions, please follow our step by step guide on how to install a WordPress plugin.

Once activated, you will see a new menu item called QC CLR Settings in the left sidebar of your WordPress Dashboard. Clicking on this will take you to the plugins settings page as shown below:

The main option to select is the “Remove WEBSITE Field from Comment Form” option, then simply scroll down and click “Save Changes”.

Now to check, log out of WordPress and view any of your posts and you will see the field is now removed.

Do note, the comments that are already approved will still have their author names linked to their website URL.

To remove them, you need to go back to the settings page of this plugin and check the box next to the “Remove hyperlink from comment AUTHOR Bio” option.

Once you save the changes, the links from the existing comments will be removed as well.

Conclusion

We hope this tutorial has helped you in removing the website URL field from the WordPress comment form.

In relation to spam, you might also want to check out the following blog post:

How to stop spam emails coming from WordPress’ Contact Form 7

If this has helped, feel free to leave 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