Adding an About the Author Box to Your WordPress Posts

by on 29th July 2011 with 30 Comments

Digital magazines have become a popular commodity for today’s web users. With WordPress powering millions of blogs on the web today, it’s fair to assume they run a stable piece of software. Some of the best features are all internal as the WP team publishes live, updated documentation with each release.

Not only is the software very powerful but the underlying classes and functions give developers an all-access pass. It is extremely simple to develop apps and modules within WordPress. Today we’ll be looking into author meta data functions for building an “About the Author” box.

Onextra Pixel Author box

Towards the end of single post pages you may frequently see a box explaining a bit about the writer. This will generally include their Gravatar or some sort of photo, a description about them, and possibly links to their profiles or personal website.

If things seems difficult check out some of WordPress’ documentation on template tags. These include much of what can be covered in this project and a whole lot more. The WP community also runs a very pleasant forum for in-depth system questions.

The WordPress Architecture

There is something referenced throughout WordPress code titled The Loop. This is a section where meta functions can be called based on a single article to pull down specific information from the database. As per our example we can call functions to pull out author data from any single post within The Loop.

Most notably this should be done within your template folder. For the lazy, it may be easier to edit individual files by adding code you’ll need. For example, the WP theme single.php file generally contains all code to parse on an individual posts’ page. You may find it easier to pull data while inside The Loop and add HTML code here.

Alternatively, a safer method would be to add a new file to your theme directory and include it whenever you’d want your author box to appear. This allows for greater control regarding variable terms and template files. This also saves you time and energy so as to not go back and re-invent the wheel.

WP Template Code

There aren’t many functions we’ll be using, though many could be new to WP amateurs. Below are just a few examples which you should familiarize yourself with. Much of what we’ll be covering works within the WordPress library with just a few key ideas – nothing that can’t be learned with a few hours of study.


The author function pulls data from within the loop to display the author’s name. This can be changed in the WordPress backend on anybody’s profile settings page. You are able to set this value to First/Last name, username, or even a custom set.

Freelance Switch Blog - Author Box

To make this process simpler, WordPress has released an entire function library for the_author_meta(). This replacement takes in arguments which can pull any author data from the database on request. You can check out the page documentation if you’d like to research more into the subject.

What’s fascinating about this function is how much information can actually be obtained. By default the function accepts two arguments: the type of data you need and the user ID to pull. The ID is an optional parameter which is only required in cases outside of The Loop. Possible values to pull include user_login, user_email, user_url, nickname, description (bio), jabber/aim/yim, and so much more!

Author Box after Web Design Tuts+ Network

What many don’t consider here is just how much potential information can be shared. WordPress allows for administrators to edit author profile pages to add in custom avatars, bios, and even home page links. These can then be pulled from the database and used as marketing information for each author.

With just these functions alone we are able to display all of the set data we will need. The only thing left to do is add our sample HTML and CSS code and publish the file!

Cordial Author Box Styles

CSS is an important language in our project scope, being a web application. We need to define specific sets of styles and display cases to incorporate for all major browsers, monitor resolutions, and other hidden variables. As web developers it is our job to study and work over these climates.

.aboutauthor { overflow: hidden; background: #f4f4f4; border: 1px solid #999; padding: 5px; margin-bottom: 10px; }
.aboutauthor img { background: 0px; border: 0px; padding: 0px; }
#aboutauthorimg { float: left; padding: 5px 0 5px 10px; }
.aboutauthor .span-desc { overflow: hidden; margin: 0px; width: 500px; float: left; }
.aboutauthor .span-2 {display: block; float: left; margin: 0px 10px 0 0; padding: 10px 0 0 10px; } 

The simple class .aboutauthor should be applied to your covering box. We have added a light background color with a solid border and extra padding. Our img tag is also displayed floating left with extra padding. This will keep our author’s avatar in line with box content.

Noupe Post Author Box

Further, we have two classes which demonstrate how we need our inner data to perform. .span-2 is a class held inside where our main content will be found. Inside here we have removed all extra margins/padding to keep spacing neutral, along with rearranging the box model for left alignment. This code would do best inside your template’s style.css file, though it could be added inline with your block element.

The HTML code is very short and similar as seen below. Here we have added a few extra functions which can be explained very quickly.

About Author: (; Articles)

We are calling a function get_avatar() which takes a set of parameters. The two we have passed above are the current author’s e-mail address which is the unique identifier for a database query. This could be equivalent to a user’s ID, too. We also pass in 64 as a string value – this represents the size of the image we want returned squared off in width and height.

Mac AppStorm Author Profile Page

the_author_posts() is another fairly straightforward function which pulls the total number of articles a writer has published. This is more of an added feature as I don’t see many blogs running this info. Commonly, though, this is useful from a users’ perspective since it gives more information about the current author and deeper insight into their interaction with the blog itself.

These are just some of the basics techniques for building a simple WordPress author block. From here it’s very simple to save a new file, let’s say author-box.php into your themes folder and upload into your root directory. From there a simple PHP include can add all of your code right into any source automatically.

Chris Spooner SpoonGraphics Author Box

If this is still a bit fuzzy, check out the example code above. This would be the most direct way to include your file and sustain security in your actions. Here we are calling the get_bloginfo() function to pull our entire template directory structure out first, followed by our single data file. Be sure to rename this file to whatever will suit your theme best and don’t get confused between function calls!

Conclusion

Hopefully this tutorial has given you a starting point for reference in WordPress development. Blogs are all too common in today’s web, but adding an author box gives your online articles some flare. They also give incentive for authors to post more frequently and build up a small portfolio of their writing. Many of the most popular magazines online now feature detailed information and profile links from their article writers.

If you’d like to experiment with these features without messing around in PHP or HTML/CSS, there are a few alternatives. The WordPress plugins system is one such scenario which works perfectly. I recommend the Cool Author Box plugin which will automatically add author info and supports gravatar icons. Do you have any suggestions or tips for building unique author boxes in WordPress? Share your ideas in the discussion below.

Comments & Discussion

30 Comments

  • http://arifriyanto.com/blog Arif Riyanto

    Nice article, inspire me. thanks

  • http://www.kws.co.in Alpha

    Excellent observation. It would be great if you can post the SEO benefits of it ?

    Thanks

  • John

    But many times you see those author with company names or brand name with junk links just for the sake or SEO and link baiting. That to me is disgusting.

  • http://vsmarcuslewis.com Marcus Lewis

    Great tutorial. I’ve been needing to jump on an authors section with bio and list of posts. I have 2 authors for my site that write every once in a while and wanted to give them a little spot to add a description.

    Thanks for this!

  • http://www.sagive.co.il sagive

    gr8 stuff.. i think the right way is to first add some additional information boxes to the profile page so users can get creative.. that would actually get them to spend more time and get some pride out of thier profile. :)

    Cheers, Sagive

  • http://www.goodhotelguide.com Cindy Sherman

    Excellent post. Great job! Thank you.

  • http://pressabout.us/mozilla.org Carson Palmer

    Nice post. I was checking continuously this blog and I am impressed! Very helpful information specially the last part :) I care for such info a lot. I was seeking this certain info for a very long time. Thank you and best of luck.

  • http://fitnessanddefense.com Ronnie Coleman

    Can you guide me how to do this in Thesis ??

  • http://techmunchies.com abhishek@techmunchies.com

    Thanks buddy for your help :) .I needed this.

  • http://www.blagdon.com Blagdon

    Beauty! Keep up the good work.

  • http://www.sellwithppc.com Frank

    Great Post! Nice to learn new things from wonderful posts like this. Keep posting.

  • http://www.jehovasoft.com/ Beslin

    Nice Article. Keep Posting!

  • http://www.thecafeatporlockweir.co.uk Sarah

    Very helpful instructions … just what I was looking for. Thank you for posting.

  • http://www.ambregris.fr/2009/03/avis-piment-brulant-et-poivre-piquant.html artisan Parfumeur

    The structure is closed by third party perfumer-composer Olivia Giacobetti that is well-known for
    her knack for delicate, ethereal finishes, like steam of rice and h2o for example, although
    her artistic variety of expression goes beyond that.

    Stop by my web-site: artisan Parfumeur

  • http://giving.nus.edu.sg/news-and-events/news/589-entrepreneur-sukanto-tanoto-gives-scholarships-to-medical-students giving.nus.edu.sg

    Either means you’ve saved yourself an honest a part
    of the worry that goes in conjunction with providing for
    your family by having this fund created for your youngsters.
    t walked the journey to find it within, we are asking for another to fill the emptiness inside.
    Ideally, this is both inside and outside of classrooms including
    physical games, art, music, community service, and
    meditation.

  • http://www.footballbetting-1.co.uk/handicap-football-betting/ football betting odds

    I know this website presents quality dependent articles or reviews and additional data,
    is there any other site which provides these kinds
    of data in quality?

  • http://mediationfairandsquare.com/UserProfile/tabid/43/userId/3070/Default.aspx Demi

    Neat blog! Is your theme custom made or did you download it from somewhere?
    A theme like yours with a few simple tweeks would really make my blog shine.
    Please let me know where you got your theme. Thanks

  • http://darkavenger.hackfree.us smartphone tv remote

    First of all I want to say excellent blog! I had a quick
    question that I’d like to ask if you do not mind.

    I was interested to find out how you center yourself and clear your
    thoughts prior to writing. I have had difficulty clearing my thoughts in getting my thoughts out.
    I truly do take pleasure in writing however it just seems like the first 10 to
    15 minutes tend to be lost simply just trying
    to figure out how to begin. Any recommendations or tips? Many thanks!

  • http://www.graceismessy.com Mirror Of Mercy

    Great web site. Lots of useful info here. I’m sending it to
    several pals ans also sharing in delicious. And of course,
    thank you to your effort!

  • http://www.4gamesonline.com/groups/a-fairly-easy-to-recognize-help-guide-to-your-hvac-inquiries/ safety vests with pockets

    WOW just what I was searching for. Came here by searching
    for men’s work gloves

  • http://autodekor.sk/ karbón

    I like the helpful info you provide in your articles. I’ll bookmark your blog and check again here regularly.
    I am quite sure I will learn plenty of new stuff right
    here! Good luck for the next!

  • http://www.qclink.org/?p=267 www.qclink.org

    Hi i am kavin, its my first time to cokmmenting
    anywhere, when i read this paragraph i thought i could also make comment due to this brilliant piece of writing.

    my web site; ggo to safari homepage [http://www.qclink.org]

  • http://cross-bars.co.uk 4×4 accessories side steps

    Nissan Juke Ѕide Bars Pair οf OEM quality aluminium
    ѕide steps.
    Nissan Juke Side Steps Galvanised steel fittings.

    Nissan Juke Running Boards Fit аll Nissan Juke models.
    Nissan Juke Ѕide Steps Come ѡith ɑll fittings.
    Nissan Juke Տide Steps Very simple to fit.
    Nissan Juke Ѕide Steps Νο drilling needed.
    Nissan Juke Side Steps Fitting instructions included.
    Nissan Juke Side Steps Ƭhese arе exceptional in еѵery ѡay.

    Nissan Juke Տide Steps OEM style аnd quality.
    Nissan Juke Տide Steps Ԍreat price.
    Nissan Juke Side Steps Strong аnd lօߋk νery sleek.

    Nissan Juke Տide Steps Wе aге ѕure ʏоu աill be оѵеr the moon when you receive these ɑs thе quality is ѕecond tߋ none.

    Nissan Juke Side Steps Wе are ɑ UK based company աith lots οf stock!!!

  • http://mahmoudheidarian40.soup.io/post/454025623/Mahmoud-Heidarian-Top-ten-Restaurants-inside-Vancouver website

    I’m impressed, I must say. Seldom do I come across
    a blog that’s both educative and interesting, and without a doubt, you’ve hit the nail on the head.
    The issue is an issue that too few men and women are speaking intelligently
    about. I’m very happy that I stumbled across this in my search
    for something regarding this.

  • http://www.i-halloweencostumes.com/ Halloween Greetings

    The Barbie Mermaid costumes, like the Little Mermaid costumes,
    are available in various variations. Halloween is October 31st, and is
    celebrated planet vast, though not all cultures celebrate on this date.
    Dressing as a woman for Halloween is not going to make you look exactly
    like a woman so you might as well take it over the edge.

  • https://www.youtube.com/watch?v=0XVav-aD68s http://www.youtube.com/watch?v=0XVav-aD68s

    Simply desire to say your article is as surprising. The clarity in your post is just nice and i could
    assume you’re an expert on this subject. Well with your
    permission let me to grab your RSS feed to keep updated with forthcoming post.
    Thanks a million and please carry on the enjoyable work.

  • http://www.greenm3.com/gdcblog/2013/7/26/finally-college-costs-may-drop-as-supply-of-freshman-drops.html www.greenm3.com

    Have you ever thought about writing an ebook or guest authoring on other blogs?
    I have a blog based on the same ideas you discuss
    and would love to have you share some stories/information. I know my readers would appreciate your work.
    If you’re even remotely interested, feel free to shoot me an e mail.

  • http://www.andropause.co.in/css/9/?key=air+jordan+9+montana air jordan 9 montana

    My spouse and I stumbled over here by a different website and thought I may as well check things out.
    I like what I see so i am just following you. Look forward to finding out about your web page repeatedly.

  • http://www.facebook.com/permalink.php?story_fbid=685532464830056&id=685531631496806 La Planète des singes l’affrontement gratuit

    The true filmaholic hears a song from the soundtrack
    and knows exactly where it comes in during the film.
    It would be a dream come true, partying with the cartoon character voted the 2nd most
    influential in history. But Alfredo’s death has released him
    from this promise.

    My website – La Planète des singes l’affrontement gratuit

  • http://multimediax.fr/friend.asp?index.php?main_page=index&cPath=15 Sacs Longchamp Great Wall

    Sacs Longchamp Great Wall Longchamp Pochette Trousse WqadZ Questo elegante leatherbased superiore con un modello e un builtin attorno alle dita stanno scivolando.
    Lucite, con un approccio cintura ciclo adattivo e cercare un complesso edilizio di opzioni di
    progettazione per una tranquilla rosa vamp
    rivestendo la sua lingua. Longchamp Statue de Liberté Longchamp Planètes 1623 UuKkg
    Sono ricchi di calorie e contribuire una varietà notevole di energia in una piccola quantità di
    cibo. La maggior parte delle ragazze che si tratta di un piano di gestione pesa 1.200 apporto calorico giornaliero essere obiettivo.

    Longchamp Sac de voyage Longchamp Eiffel Tower tKLiI Deen, noto nel settore per i migliori wellequipped e vende una linea v dildo peccato modellate separatamente pene, che di
    recente linea di Omis tra porno e film tradizionali recitato in The Canyons con Lindsay Lohan ripresa di un processo tumultuoso che recentemente documentato nel New York Times Magazine .
    Mercoledì Deen è assediata dai giornalisti su Aveva un gestore il cui unico
    compito sembrava Entrata coloro che non hanno richiesto in interviste anticipo
    di distanza dalla stella.. Longchamp Sac shopping Longchamp Besace aIjOz Così il
    paese è prodotta utilizzando l’energia Timberland CSR uomo solare ed eolica
    materiali riciclabili e rinnovabili appena trascorsi e il trasporto verde, come si usa.

    Che cosa ci si può aspettare da una società con un albero nel loro
    logo? Responsabilità timberland, politiche di imprenditorialità sostenibili finalizzate
    ad ampliare l’azienda. Sacs Longchamp Great Wall Longchamp Jeremy
    Scott qMtTW Ehi, se nessuno vuole vendere non, quindi,
    nessuno ucciderà Sables / civettuola, ecc L’hotel è quello che volevo dire con choice.And Si prega di non mettere tutta la
    colpa su di me come ho detto che non possiedo un cappotto
    e catena, probabilmente, non perché le mie
    scelte, scambia Im solo dicendo che si trova a RUSSIA.And Come ho
    detto non è istericamente piange agnello ucciso
    eh eh borse di lusso venduti a 1000 volte più spesso
    e generare più soldi muuuuuuuuch. Guardate l’industria UGG.

    Sacs Longchamp Grid Sacs Longchamp Arbre de vie EvvSH Produttori popolare di valigette per gli uomini è alla fine più conveniente della scala Sumdex fa una serie
    di casi semplici ed eleganti, con molti di questi costano circa $ 25 a $ 35 più di altro produttore valigie Samsonite sono disponibili,
    anche se producono anche oggetti più costosi troppo.
    Alla fine scontata della scala fanno un buon borse per laptop e valigette per circa $ 40 a
    $ 70 la fascia alta del mercato valigia, Siamod producendo alcune borse in pelle bella
    in vari colori, tra cui vishnevokrasny, marrone chiaro e scuro e il più tradizionale nero.
    Longchamp Sac à main Longchamp Sac de voyage mmhXv Sapevo che stavo andando,
    sì, ma non ho mai pensato che avrei vinto,
    le sue scuse. Questo sarebbe stato il miglior pasto accettazione di
    tutti i tempi se si trattasse di 2.007 vincitore Doris Lessing.Then all’età di
    87 anni, ha scoperto Lessing ha vinto il premio
    Nobel, quando si trovò circondato da giornalisti fuori dalla sua casa.
    Longchamp Statue de Liberté Sacs Longchamp Grid tpUXW Tutto qui è locale, stagionale e conveniente.
    Dopo che tutti i cuochi Calgary amano usare ingredienti
    locali, e non solo per l’etica Prairie aiutare il prossimo sollecitare il loro sostegno agli agricoltori Alberta.

Subscribe

Membership
About the Author