Thursday 18 May 2017

How to Add a Custom Author Profile Page to Your WordPress

Do you want to add a custom author profile page to your WordPress site? Many WordPress themes have limited author profile information on their author archive page. In this article, we will show you how to create a custom author profile page in WordPress.

Adding a custom author profile page in WordPress

Method 1. Add Custom Author Profile Page in WordPress with WP User Manager

This method is recommended for all users. It is easy to setup and has more features.

First thing you need to do is install and activate the WP User Manager plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Users » WPUM Settings page to configure the plugin settings.

WP User Manager settings page

The plugin will automatically create different pages to use as custom login, custom user registration, forgot password, account, and profile pages.

WP User Manager is a powerful plugin and comes with a lot of options. You need to carefully review them and turn off the features that you don’t want to use.

Next, you need to click on the ‘Profiles’ tab to setup user profile settings.

User profile page settings

Here you can enable profile page option for guests, which means anyone can view user profiles. You can also allow members to view each other’s profiles. If you uncheck this option, then users will only be able to view their own profile pages.

You can also allow users to upload custom profile photo and display their recent articles as well as comments on their profile page.

Don’t forget to click on the save changes button to store your settings.

Next, you need to select SEO friendly URLs or permalinks for the author profile pages. You can do this by visiting Settings » Permalinks page and scroll down to the ‘User profile permalink base’ section.

Select a URL structure for user profile pages

The plugin offers you to use 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.

Your custom author profile pages are almost ready. Now we just need to let users easily find their profile pages on your website.

Head over to Appearance » Widgets page and add [WPUM] Login Form widget to a sidebar.

Add user login and profile link widget to sidebar

You can now visit your website to see the author profile page in action. As a logged in user, you will see your own account information in the sidebar widget. Clicking on the username will take you to your author profile page.

Author profile page

The sidebar widget will show a login form to logged out users. If you allow users to register on your website, then the form will also include a link to sign up.

The plugin will also change author links on your website and point them to the author profile page instead of the default author’s archive pages.

Changing Appearance of Author Profile Pages

If you just want to change colors or borders, then you can do that by adding custom CSS.

However, if you want to change the layout and order of things, then you will need to edit the plugin’s template files. WP User Manager comes with custom templates support which means you can create your own templates inside your current theme for the plugin to use.

First you need to connect to your website using an FTP client and go to /wp-content/plugins/wp-user-manager/templates/ folder. Download all the files you see there to your computer.

Next, you need to go to your current theme folder and create a new folder “wpum” inside it. Now upload the files you downloaded earlier to the wpum folder.

Now you can edit these files to customize the appearance of your profile pages as needed.

Method 2. Manually Create a Custom Author Profile Page in Your Theme

This method requires you to edit your WordPress theme or child theme files. If you haven’t done this before, then please see our guide on how to copy and paste code in WordPress.

First, you will need to connect to your website using an FTP client and go to /wp-content/themes/your-current-theme/ folder.

Inside your current theme folder, you need to create an author.php file. After that you need to copy the contents of archive.php file and paste them inside your new author.php template.

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

Your goal here is to get author’s profile information and then display it. You will need to decide where you want to start editing. Usually, you can edit anything between the get_header(); and get_sidebar() lines.

<?php
// Set the Current Author Variable $curauth
$curauth = (isset($_GET['author_name'])) ? get_user_by('slug', $author_name) : get_userdata(intval($author));
?>
    
<div class="author-profile-card">
    <h2>About: <?php echo $curauth->nickname; ?></h2>
    <div class="author-photo">
    <?php echo get_avatar( $curauth->user_email , '90 '); ?>
    </div>
    <p><strong>Website:</strong> <a href="<?php echo $curauth->user_url; ?>"><?php echo $curauth->user_url; ?></a><br />
    <strong>Bio:</strong> <?php echo $curauth->user_description; ?></p>
</div>
    
<h2>Posts by <?php echo $curauth->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; 

// Previous/next page navigation.
the_posts_pagination();


else: ?>
<p><?php _e('No posts by this author.'); ?></p>

<?php endif; ?>

This code simply adds an author profile card at the top of the page, and then displays recent posts by the author.

Feel free to customize this code as much as you need. You can add additional user profile fields to your website, add author’s Twitter and Facebook profile links, display featured images for posts, and so on.

Here is some sample CSS to give your author profile card a decent look. You can add it as custom CSS in your theme and then change it to match your theme colors.

.author-profile-card {
    background: #eee;
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
}
.author-photo {
    float: left;
    text-align: left;
    padding: 5px;
}

Here is how it looked on our demo website:

A custom author profile page in WordPress

We hope this article helped you learn how to add a custom author profile page to your WordPress site. You may also want to see our ultimate step by step WordPress SEO guide for beginners.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add a Custom Author Profile Page to Your WordPress appeared first on WPBeginner.



source http://www.wpbeginner.com/wp-themes/how-to-add-a-custom-author-profile-page-to-your-wordpress/

No comments:

Post a Comment