Pages

Wednesday, June 6, 2012

12

Customizable Author Box with post count

I got this request for an author box with post count in my blog's comments. An author box is something that is displayed after a post, and it shows info about the author who wrote the post. WordPress.org has many author box extensions, for example Author Box After Posts. There are some hacks for Blogspot blogs, too, but they are generally for single author blogs, and with no post count.

My Author Box has support for blogs with multiple authors, and post counts per author.


I must warn you, this hack suits best people who can do their own template customizations and basically already know their way around. These instructions have worked "as is" for Simple and Awesome templates, should work for all others, too, especially if you know you to adapt the code. Not for dynamic templates, though.

How to install

Installing is quite simple. Edit template HTML, expand widget templates. This hack uses jQuery, so if your template does not already have jQuery, add the following code in your template before </head>:
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>

Then find: <data:post.jumpText/>, there should be only one instance. Few lines down from there is line:
<div class='post-footer'>
just before that line paste all this code:



This (+ possibly jQuery loading) is the only code you need to put into the template. Later I'll show you three snippets from this same code, don't put them in the template, just edit the previous code at those points. After pasteing the code to the template, you can save the template and see if there were any errors. You can also test the hack at this time. After that you must customize the hack to suit your blog and blog's authors.

Configuration

This hack works for both single author and multi author blogs. If you have multi author blog, you must set var multiAuthor = true; This setting can be true for single author blogs, too, but it is sligthly faster if you put false there for single user blogs.

With onePost and manyPosts variables you can localize the words "post"/"posts" or use other word like "article"/"articles".

There are more configurable things in javascript parts, but I'll tell more about them later.

HTML markup

This part defines the look of author box.



Author box html comes partly from the template, and author specific thigs are set by javascript. If you have a single author blog, you can put basically any html between <div class='post-author-block'> and </div>.

Just use <span class='authorinfopostcount'>0</span> where you want the post count to appear, and <span class='authorinfopostpost'>posts</span> where you want the singular/pluralis post word to appear. You can also use the same classes as in multiple author blogs, and you can use additional classes and make CSS for them as you wish.

With multi author blog, author specific information contains post count, author (profile) link, author avatar image, author description, and author name. So these can not be "hard coded" into the box, but they are set via javascript. Inside <div class='post-author-block'> and </div>, when you use the following tags + classes, their contents will be dynamically set:

<a class='authorinfolink'>somemarkup</a> this will link the text "somemarkup" to author profile link
<img class='authorinfoimage' src=''/> this will get author avatar
<span class='authorinfoname'/></a> author name will be put inside this span
<span class='authorinfopostcount'>0</span> and post count here
<span class='authorinfopostpost'>posts</span> this will be post/posts (singular, pluralis) according to how many posts author has
<span class='authorinfodescription'></span> this will be replaced by the author specific description, which can be plain text or complex html (but no scripts). Class can be used in div, too.

You can also add classes and CSS for elements if you wish. It is just basic template editing. And probably want to customize the CSS too, to get the box look like you want. CSS part is this:



Then in the javascript part, for every author or the blog you should set variable aut_desc['AUTHORNAME']. Element with class='authorinfodescription' will receive that description. You can use html here, put div's there, br's, links, imgs, pretty much everything, but not scripts. Now there is only some info about me and some dummy info, you can replace them with content that is relevant to your blog.

For every author or the blog you can (but it is not necessary) set/override auth_url['AUTHORNAME']. This way you can link author straight to his Google+ profile, or any other page you wish, instead of the blogger profile page. Here's the configuration part of the javascript:



I would have liked to get the author description automatically, but there is no feasible way of getting author profile descriptions in multi author blog, so the descriptions must be set in script. Positive side is that you can use any description you want, with links, images etc. Because descriptions could not be fetched automatically, I decided to leave the whole hack simple, so its users can customize the author box look themselves.

If anyone wants to develop this idea further, go right ahead. I'm not so good at making html/css, some of you will make this look much better. If you use it, please drop a comment so I can see what it looks like in your blog. :)
[Hide comments] - [Show comments]
Click on a single comment to hide/show its text

12 comments:

Ismail Sosse Alaoui said... [reply]

Very good job MS-potilas, i'm happy for you,

i have one remark:

1.concerning this sentences (who has written 1 great post on YABTB demo blog.)i think you forget to make script view blog where is this script not yours.
en general i like it, i like it, i like it, i like it, i like it, i like it...
it's very professional
thanks a lot

Ismail Sosse Alaoui said... [reply]

i think MS-potilas we have to use this link: <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> in the sentence
thanks

MS-potilas said... [reply]

@Mr Admin Yes, there is the link to my demo blog. One could use the layout data tag you suggested to get the blog url automatically, but that would require "escaping" from the CDATA and the code gets uglier. And because the description needed to be edited anyhow, I figured it is easy to edit the blog link at the same time. Or leave the blog link out, if so wanted. That description is just a vague example of what can be done :)

Beben Koben said... [reply]

usefully for more one author in blog...ck ck ck
very cool

Dani neh said... [reply]

Dear MS-Politas
I've added the scripts but
how do I make it display on my blog?
Do I have to add a HTML/Javascript Gadget at by Blog Layout?
If yes, what should script whould i write in the gadget?

thanks

MS-potilas said... [reply]

@Dani neh
Hi,

author box shows when a post is open, as in the demo. No gadget is needed.

If you want info about blog authors in sidebar gadget, check this other hack: Profile Gadget with avatars and post counts.

Dani neh said... [reply]

wow... yes! this was what i was searching for.. thanks
@MS-potilas

Shaji.essenn said... [reply]

ehow can i add some text in multiple author box pls help me

MS-potilas said... [reply]

@Shaji.essenn
You can customize/add static text (same for every author) by mofifying the html markup part, "This part defines the look of author box". Per author texts can be modified by setting the aut_desc['authorname'] variables.

Shaji.essenn said... [reply]

i want to login register widget for add author, how can i put can u help me that.

Post a Comment

Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: