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 Display Related Posts in WordPress

In this tutorial, we are going to show you two ways to display related posts on your WordPress website.

If you know a bit about bounce rate, you are probably already showing related posts on your website. Essentially, the bounce rate is a metric that measures the percentage of people who land on your website and do completely nothing on the page they entered. So they don’t click on a menu item, a ‘read more’ link or any other internal links on the page. This can have an effect on things such as your AdSense earnings. By following this tutorial and adding Related Posts to your WordPress; you are killing three birds with one stone. You are decreasing your bounce rate, increasing your AdSense income, and lastly, you are increasing your page views. As always, we will show you two methods in which you can add related posts to your WordPress website.

How to Display Related Posts in WordPress without a Plugin

As always, we start with our preferred method of adding this without a plugin. In our example, we are going to display two related posts which link to the post. We are adding the featured image, the category, the date, the title and a read more button.

The code can simply be pasted into your single.php file in a position in which you want to display your related posts.


// Related Posts
$tags = wp_get_post_tags($post->ID);
if ($tags) {
	echo '<h3>Related Posts</h3>';
	$first_tag = $tags[0]->term_id;

	$args=array(
		'tag__in' => array($first_tag),
		'post__not_in' => array($post->ID),
		'posts_per_page' => 2, // How many Posts to display
		'caller_get_posts' => 1 // A way to turn sticky posts off in a query.
	);
	$my_query = new WP_Query($args);
	if( $my_query->have_posts() ) {
		while ($my_query->have_posts()) : $my_query->the_post(); ?>										
			<a href="<?php the_permalink(); ?>">
				<?php if(get_the_post_thumbnail_url()) { ?>
    				<img alt="Related - <?php the_title(); ?>" src="<?php echo get_the_post_thumbnail_url(); ?>" />
    			<?php } else { ?>
    				<div class="img-holder"></div>
    			<?php } ?>	
			</a>												
			<?php $category = get_the_category(); ?>
			<p><?php echo $category[0]->cat_name; ?> / <?php echo get_the_date(); ?></p>													
			<a href="<?php the_permalink() ?>" rel="bookmark"><h4><?php the_title(); ?></h4></a>
			<a class="btn" href="<?php the_permalink(); ?>">Read More</a>
	<?php
	endwhile;
	}
wp_reset_query();
}

How to Display Related Posts in WordPress with a Plugin

A plugin can be used instead to do a similar thing. We used Yet Another Related Posts Plugin (YARPP) which gives a list of posts or pages related to the current blog post.

The key features of this plugin are:

  • You can use thumbnail or list view for your related content.
  • It will display related posts, pages, and custom post types.
  • It has a templating system which gives you advanced control of how your results are displayed.
  • It has an advanced and versatile algorithm. This is a fully customisable algorithm which considers post titles, content, tags, categories, and custom taxonomies. A very great feature to ensure your posts are accurately related to the post.
  • It includes an option to display related posts in RSS feeds with custom display options.
  • It includes REST API support which enables you to embed related posts in your web or JavaScript-driven app!
  • It includes shortcode support. So you can simply add the [yarpp] shortcode to place related posts anywhere you like.
  • It supports HTTPS and WordPress Multisite
  • And it's a plugin that is maintained with regular updates

Sounds good right? Download YARPP.

Conclusion

We now know of two methods on how we can add Related Posts to our WordPress website. We also now know the importance of how this can improve our bounce rate. So, which method did you prefer? Let us know in the comments 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 Disable Gutenberg without a Plugin

Most people use the plugin ‘Classic Editor’ to disable Gutenberg, but did you know that it is actually really simple to do this with code? With over 5 millions installs, it’s quite clear that a lot of people go for the simple option.

The code needed to disable it is actually very short and simple, so there is no need for a plugin to do the job, just add the following snippet in your theme’s functions.php file:


    add_filter( 'use_block_editor_for_post', '__return_false' );

Yup, it’s that simple… just one line of code!

There are cases where you may want to enable Gutenberg only in some condition. Below are some frequently used examples:

Allow Gutenberg for Posts Only

We use the same filter and return true if it’s on post edit page.


add_filter( 'use_block_editor_for_post', 'my_disable_gutenberg', 10, 2 );

function my_disable_gutenberg( $can_edit, $post ) {
  if( $post->post_type == 'post' ) {
    return true;
  }

  return false;
}

Allow for Page with the Template “Allow Gutenberg”

First, create a new Page Template, take note of the file name:


<?php
/**
 * Template Name: Allow Gutenberg
 */

require_once 'page.php';

Then, still using the same filter, add a conditional to check if it's using that page template:


add_filter( 'use_block_editor_for_post', 'my_disable_gutenberg', 10, 2 );

function my_disable_gutenberg( $can_edit, $post ) {
  if( $post->post_type == 'page' &&
    get_page_template_slug( $post->ID ) == 'page-gutenberg.php' ) {
    return true;
  }

  return false;
}

Conclusion

There are many reasons to disable Gutenberg on your WordPress site. Maybe you already use another Page Builder or it simply lacks the control ACF provides?

For old sites, you generally want to fully disable it. But you might want to have a little taste of Gutenberg by enabling it on Blog Post only. You can do so by following the code above. 🙂

Hope that helps!

Leave a comment if this has helped you or why you choose to disable Gutenberg.

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