Wordpress How-to: Add an Author Box into your posts
In the last days i've been playing with wordpress. I was working on my new project lascienza.net and i decided to add a small square in the end of each article in which were supposed to be shown author's details, including twitter and facebook.
The process wasn't too painful and i've chosen to share it with you, i'm pretty sure it will be somehow useful to others in future.
Let's start.
The final result
well, this is just to show you what we are going to get as result of this tutorial.
In the end of the article you will see something like this:
Ok, so we will have:
- Title
- Name + Personal Author link
- Author Photo
- Author Description
- Author contacts
Note that this design was made on my website, you can fully remake it, assembling, styling the box or adding more informations as you wish. Obviously you will require a basic knowledge of XHTML and CSS to do that. This tutorial is just to give you an idea, to introduce some tricks in order to get the job done, once you have understood each step you can simply do whatever you want, no limits but creativity!
Styling the Box
Ok, we are going to work on the file called single.php, you can find it in wp-content/themes/yourtheme/ folder.
This file, according to wordpress codex:
The single post template. Used when a single post is queried. For this and all other query templates, index.php is used if the query template is not present.
Now, once opened the file you have to find where you prefer to place your box. If you wish to place it in the end of the article (as i did) you just have to find in the code where comments start, right before those lines is where you will have to place your divs. As i said before, nothing bad if you will place it somewhere else in the page.
here some XHTML code:
<div id="author-square"><h3>Title</h3> // Box + Title
<div id="main-data"></div> //Author's Name, Home Page and photo
<div id="description"></div> //Description
<div id="auth-contact-data"></div> //Other data
<div class="clear-float"></div> //This div is to clear floats effects
</div>
As you can see there's a main square in which are placed 3 columns. First column for Name, Home page and Photo, Second for Description and third for additional data.
And here CSS:
#author-square{
border: 1px dotted #DDDDDD;
padding: 10px 10px 10px 20px;
height: 200px;
background-color: #F0F0F0;
width: 618px;
}
#author-square img{
margin-top: 10px;
}
#main-data{
width: 180px;
float: left;
}
#description{
width: 270px;
float: left;
margin-top: 25px;
margin-right: 15px;
}
#auth-contact-data{
width: 150px;
float: left;
margin-top: 25px;
}
.clear-float{
clear: both;
}
I'm not going to comment line per line, i assume you can read CSS and you know what that means. Just worth to notice that:
- My square is large 618px
- These 3 squares have float:left, they are aligned on the left.
As you could see nothing special in the code. We have just styled a little bit our box, the interesting part is starting now.
Adding Author Name and Home Page Link
This is easy. We are going to use wordpress functions called: the_author() and get_the_author_meta()
- the_author() function will just print author name as defined in the profile wordpress admin area.
- get_the_author_meta() is a very useful function that let you work with data defined in the author profile page. Basically you can use it to assign any data defined in the author profile to your own variables.
Add the following code to your main-data layer:
<?php echo "<b>";
the_author();
echo "</b> ";$url=get_the_author_meta('user_url');
echo "<b>Home Page</b>"; ?> // Posterous is displaying wrong this code, check out the link and add <a href> tag
First three lines to display the_author(), that's name/surname/nickname of the author as defined in the profile.
With $url=get_the_author_meta('user_url') we get (as the name suggest) the user url defined in the profile page, with last line we display the XHTML code.
Adding Author Photo to the box
There are several plugins for this, as we are all a bit geeky we all love making things by ourselves, that's why we are going to code instead of using any add-on.
Here you will find my reference tutorial, there you will find nothing more than what i'm going to write here, just worth to mention.
The General idea is pretty simple. We are going to name each author pic with the author ID and we will use wordpress functions to display it. Follow these steps.
First Step: Create a folder under /images/ called authors in your wordpress theme folder. The final path should be something like /wp-content/themes/yourtheme/images/authors, obviously you can choose any other path on your preference.
Second Step: Find the Author ID. How? well, go to admin panel in wordpress. Click on Users and than click on the name of the author you want to upload the photo. The profile page of the user will now open and in the url bar you will see something similar to this:
That small voice in the url called user_id is exactly the number you will need.
Third Step: Rename the Author pic as the author ID. In our example you should name it as 2.jpg
Fourth Step: Upload the picture in the /authors/ folder you've created previously.
Now the coding part.
Step Five: add following code to the XHTML we have defined before.
<br /><img src="<?php bloginfo('template_directory') ?>/images/authors/<?php the_author_ID()?>.jpg" alt="<?php the_author(); ?>" title="<?php the_author(); ?>" />
Let's write some comments. We are adding an image to the box,
src="<?php bloginfo('template_directory') ?>/images/authors/<?php the_author_ID()?>.jpg"
With this line we are saying to the browser to connect to the authors folder placed in our template directory and look for an image called exactly as our author ID.
alt="<?php the_author(); ?>" title="<?php the_author(); ?>"
here we define Alt and Title Attributes using the_author() function.
Now our code should looks like this:
<div id="author-square"><h3>Note sull'autore</h3>
<div id="main-data"><?php echo "<b>";the_author(); echo "</b> ";
$url=get_the_author_meta('user_url');
echo "<b>Home Page</b>";?>
<br /><img src="<?php bloginfo('template_directory') ?>/images/authors/<?php the_author_ID()?>.jpg" alt="<?php the_author(); ?>" title="<?php the_author(); ?>" /></div>
<div id="description"></div><div id="auth-contact-data"></div><div class="clear-float"></div></div>
Now it's time to add decription and contact links.
Description
Adding the description is easy, northing different from what we have done till now.
We are still using the the_author_meta(); function, this time with an attribute called 'user_description', this is going to display the description for the profile.
this is how code will look like:
<div id="description"><?php the_author_meta('user_description'); ?></div>
Adding Custom Information into an author profile
This is maybe the most interesting point in the whole tutorial, we are going to add some information in the profile of each author. Than, if those fields are defined we will use them into the box we have been working on till now.
I found this trick on wpbeginner.com, here.
You have to open functions.php file in the folder of your theme.
add following lines:
<?php
function my_new_contactmethods( $contactmethods ) {
// Add Twitter
$contactmethods['twitter'] = 'Twitter';
//add Facebook
$contactmethods['facebook'] = 'Facebook';
return $contactmethods;
}
add_filter('user_contactmethods','my_new_contactmethods',10,1);
?>
In this code example we are adding 2 fields called twitter and facebook, same method can be used to add any information you like.
Now the profile admin panel will look like this:
as you can see our custom fields are now visible.
Ok, how can we manage these data? pretty simple, exactly in the same way we have been working till now.
Open you single.php file again and add following code in the auth-contact-data div:
<?php//disaplaying Twitter & Facebook, check if they are defined and display$twitter=get_the_author_meta('twitter');if($twitter!=""){echo "<b>Twitter</b>: @$twitter<br />";}$facebook=get_the_author_meta('facebook');if($facebook!=""){echo "<br /><b>Facebook</b>:<br /> <a href="http://facebook.com/$facebook" >";the_author();echo "</a>";}?>
Calling the get_the_author_meta('twitter') and get_the_author_meta('facebook') we will assign to our variables $twitter and $facebook fields values.
Using two simple if cicles we are checking these variables were defined in the profile, if so we display them.
The Final Result
This is the final complete code for the single.php page:
<div id="author-square"><h3>Note sull'autore</h3><div id="main-data"><?php echo "<b>";the_author(); echo "</b> ";$url=get_the_author_meta('user_url');echo "<b>Home Page</b>"; //the_author_meta('display_name'); the_author_meta('user_url'); ?><br /><img src="<?php bloginfo('template_directory') ?>/images/authors/<?php the_author_ID()?>.jpg" alt="<?php the_author(); ?>" title="<?php the_author(); ?>" /></div><div id="description"><?php the_author_meta('user_description'); ?></div><div id="auth-contact-data"><?php//disaplaying Twitter & Facebook, check if they are defined and display$twitter=get_the_author_meta('twitter');if($twitter!=""){echo "<b>Twitter</b>: @$twitter<br />";}$facebook=get_the_author_meta('facebook');if($facebook!=""){echo "<br /><b>Facebook</b>:<br /> <a href="http://facebook.com/$facebook" >";the_author();echo "</a>";}?></div><div class="clear-float"></div></div>
I really hope you enjoyed the article, any question or correction please use comments!
Consider that there are many ways to achieve same result shown in this article, probably some are even better, and i'm sure my code can be improved in many ways. This is just a path, any improvement is really welcome!
Comments [0]