#5 Author Box

Amy Marsh Is A Fashion Technologist In Training

author box

Today I am showing how to make sure you get credit for your writing by adding an author box to your posts. Show everybody your pretty little face and let them know who you are!


I struggled slightly with the design, you could says ‘designers’ block, I could not decide on how I actually wanted the author box to look. Should it be at the bottom? Should it be at the top? Should it have a black a background, does that make it stand out to much? Lots and lots of questions were running through my head, my indecisive nature was out in full force!  I got there in the end and I am happy with it… finally.


I have added Google Authorship as well, this is something you should really think about doing. Although not necessary for this post you can add the author box without completing the Google Authorship parts, adding it to your site will help increase your  (oh here comes that buzzword) search engine optimisation. You will be more likely to appear at the top of a Google search and get the recognition for your posts! Since it only takes a few small steps, I can’t see why you wouldn’t!


First you will need to sign up to Gravator and register your email with a picture.

Next back in WordPress Editor/ SC Theme Editor add this code underneath <!–.entry-header –> in your content-single.php file.


Add html to content-single.php page:


Next you will need to either create a Google plus account/ or get from your Google plus account.

From your Google account select profile and copy the website url:


Screen Shot 2013-11-05 at 10.02.58


Next on word press select Users, then Your Profile like so:


Screen shot



To get Google authorship create this line of of code in the Biographical info using your Google plus url:



As you can see I have removed posts from the end of the url and replaced it with ?rel=author this is very important.


You can add more information about yourself after the </a> it should look like this:


Screen Shot


Next on your Google plus account select about and scroll down to ‘Contributor to’, select edit and add your website:


Screen Shot


To check whether it has worked go on this site and paste a blog post your have written in the bar available:


Screen Shot



Next enter your Google plus url here (you may first wish to check if you have successfully verified an email address by selecting the link):


Screen Shot


NB: You will need to have a email address for your blog, for example, our website blog is thefashiontechnologist.com therefore we have email addresses ending ‘thefashiontechnologist.com’.


You will see how it will appear in a google search:




Next you will need to add styling, we need to go back to the content-single.php page and change the header so it now looks like this:



By doing this I have swapped the date and title around so now the date will appear on top and added classes post to them so I can style them without it effecting the other title and dates on for example the homepage.


To style these add this css to the style sheet at the bottom:



Now we can start styling the author box. After hours of deliberation I have decided to style it in this way, so add this css at the bottom of the style.css file again:


You should see the new author box at the top of this post with the styling I chose!


Leave a comment with any questions or to submit your progress and make sure to check out the blog tomorrow and see what has changed!



Stay Updated

If you enjoyed this post, subscribe to the Fashion Technologist for updates

What are you interested in?

Discover more:
email course
(blog)Random Banner Ad Featured Image
Screen Shot 2014-06-10 at 17.43.10
two ways to make your site more secure
(feat) theFEED Profiles- RooftopAntics.com
How to change the default media linking option in wordpress
Why I do not like blog posts being By Admin
how to create a wordpress plugin

One thought on “#5 Author Box

  1. Pingback: #13 Author Page | The Fashion TechnologistThe Fashion Technologist

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">