Scroll to Top

How To Create An Amazing WordPress Author Page Template

Posted in Tutorials1 year ago • Written by SuzannaNo Comments
How To Create An Amazing WordPress Author Page Template

Reviewed by Filiz ÖZER on .

Nice WordPress tutorial!

Rating: 10 out of 10

If you have a magazine, web design or tech blog and you want you profil pages appear together with you latest posts, this article is for you. Today we will help you to how to impliment author special page templates into WordPress blogs same as Mashable, TutsPlus and Codrops similar pages also uses. You can visit my profile "About Suzanna" for see an example about how do this feature works. Your authors pages will look nice and elegant with this unique feature which u can set up in few steps. Please read the rest of this article if you want to create a special authors page in 3 steps without need of any addons.

We published before an article about how to open extra panels and show them at below of your blog posts in "Add Extra Fields from WordPress User Profile Panel". Today we will help you to create amazing author pages when you click author profile links. Lets take a look about how we going to do it step by step.

Tutorial Details

  • Software: WordPress
  • Version (if applicable): 3.4 and above
  • Difficulty: Professional
  • Estimated Completion Time: 15 minutes

Step #1 - Add Functions (functions.php)

Open functions.php with a text editor which is in theme folder. (Example : Dreamweaver, Notepad++, Notepad) If there is no such file in functions.php, you can create urself a file in the same name. Copy and paste codes we give you below at the top or bottom line of the file then save it in theme folder.

function my_new_contactmethods( $contactmethods ) {
    // Add Site
    $contactmethods['mysite'] = 'My Site';
    // Add Google Plus
    $contactmethods['google_plus'] = 'Google Plus';
    // Add Behance
    $contactmethods['behance'] = 'Behance';
    // Add Twitter
    $contactmethods['twitter'] = 'Twitter';
    //add Facebook
    $contactmethods['facebook'] = 'Facebook';
    return $contactmethods;
    }
add_filter('user_contactmethods','my_new_contactmethods',10,1);

Step #2 - Add Styles (style.css)

We sharing our own personal CSS features which we used in my designs for our next step. You can customize this step as you wish for your blog. So, open style.css file in your theme folder with ur text editor. There are codes we shared below. Copy and paste them into your style.css file's bottom than simply edit your styles as you wish.

.author-boxes {
    background:  #fff;
    margin: -9px -9px 40px;
    min-height: auto;
    padding: 20px 0;
	-webkit-box-shadow: 0 8px 6px -6px #eee;
	   -moz-box-shadow: 0 8px 6px -6px #eee;
	        box-shadow: 0 8px 6px -6px #eee;
}

.author-boxes h1 {text-transform:uppercase;}
.author-boxes-img {
	width:105px;
	height:105px;
	display:block;
	float:left;
	margin:7px 15px;
	border: 4px solid #E5EAF0;
	background:#E5EAF0;
	-moz-box-shadow:1px 1px 1px #e5eaed;
	-webkit-box-shadow:1px 1px 1px #e5eaed;
	box-shadow:1px 1px 1px #e5eaed;
}
.author-desc {
    color: #717171;
    margin-left: 17%;
    margin-top: -30px;
}

Step #3 - Create page template (author.php)

This step might be look confusing. But don't worry! It's not that difficult. We will make it simple as we can. If there is an author.php file in your theme files, open it in a text editor. If file does not exist, we will use archives.php file. There was no authors.php file in theme we use. So we used archives.php file.

Add function codes we shared below at the top of the file and below of where get_header(); code / or below page topic.

	

Website:

Follow on:

If you added codes into author.php file, save it and make sure its in theme folder. Now you authors page is ready to use. For check your author page, visit yoursite.com/author/yourname/ If you done steps properly, it will come up precisely but links will be invisible. Now signup for gravatar.com with email you use and create a profile picture. Check picture below for an example picture;

gravatar

After you signed up for Gravatar.com, your profile picture is ready. Now its time to edit your profile. Click profile links in your WordPress user panel and edit it same as the picture shown below then save it. For reach your profile links, click yoursite.com/wp-admin/profile.php

profile page

After you made these all, your author page is ready. Now take a look of functions we used in 3 steps.

Gravatar function

Here we share your profile picture which is associated with you email address with this php function.


Author name function

With this php function, we sharing your nickname area you while you were editing your profile.


Author description function

With this php function, we sharing description area about you while you were editing your profile.


Author URL function

With this php function, we publising website links while you were filling up mysite area while you editing your profile.


Author social profiles function

With this php funcion, we publish social media links you added while you were editing your profile.





Alright folks. We hope this article will help you all for create much stronger authors pages. We promise to publish more WordPress tips and hints as Daily Design Notes family. Please share this article in your social media profiles with your friends and help us.

TAGS: , , , ,

Leave A Response