Add An Author Bio Box In Frugal Theme

There are some who say that the Frugal Theme although easy to mod and create unique layouts without any need for codes, there will be some cool things that cannot be done to the Theme like what they can do with the Thesis Theme. I too felt the same way initially but no more. What can be added to the Thesis Theme can also be added to the Frugal Theme if you know the codes to add and where to add them.

Feeling a little bit itchy today with nothing constructive write, I decided again to fiddle around with my Frugal theme here. Today, I decided I will want to add an author bio box at the end of each post. Like what you see in many Thesis Theme, especially those who survives on guest posts or blogs with more than one authors.

Searched for and grabbed a bunch of codes for this purpose that was written for the Thesis Theme. Made some small alterations so it will work with the Frugal Theme and frankly, I only needed to alter where to hook the box.

However, I made some further changes to suit my individual preferences. These are original codes,if you are interested in trying.

Copy And Paste these into your customs functions php file

OR

You can also paste them into your Frugal Theme – Feature Options – Custom Functions 1 or 2. If you do it this way, you must omit the last line, add_action('frugal_hook_after_post_banner', 'author_box'); BUT in you must select the ‘frugal_hook_after_post_banner’ option below the form window. Also you must remember to set ‘Execute PHP in this code to YES.

I prefer the first method.

IMPORTANT – Messing with your customs functions file might break your theme and you might not be able to access your dashboard to correct the mess. When that happens, you will have to use your FTP client to access the file and make corrections. So remember what you add and where you added it. A good practice will be top add a comment at the beginning and at the end of the codes.

function author_box() {
	if (is_single())
	{
	?>
	<div class="postauthor">
		< ?php echo get_avatar( get_the_author_id() , 100 ); ?>
		<h4>Article by <a href="<?php the_author_url(); ?>">
		< ?php the_author_firstname(); ?> < ?php the_author_lastname(); ?></a></h4>
		<p>< ?php the_author_description(); ?></p>
		<p class="hlight">< ?php the_author_firstname(); ?> has written <span>< ?php the_author_posts(); ?></span> awesome articles for us.</p>
	</div>

	<div id="similar">
		<h3>You May Also Be Interested In...</h3><br />
		< ?php related_posts(); ?>
	</div>

	<div id="rightcol">
		<div id="subscribe">
			<h3>Subscribe Now</h3>
			<p>If you enjoyed this post, you will definitely enjoy our others. Subscribe to the feed to get instantly updated for those awesome posts soon to come.</p>
			<ul>
				<li><span class="removed_link" title="FEED_URL_HERE">Subscribe to our RSS Feed</span></li>
				<li><span class="removed_link" title="FEED_URL_HERE">Subscribe for Email Updates</span></li>
			</ul>
		</div>

		<div id="custom">
			<p>Put whatever you want here!</p>
		</div>
	</div>
	< ?php
	}
}
	add_action('frugal_hook_after_post_banner', 'author_box');

Copy and paste these in your customs css file


/* AUTHOR BOX */
.custom #comments { clear: both; }
.postauthor { background: #F5F5F5; border-top: 1px solid #e1e1e0; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 1.5em; }
.postauthor img { border: 5px solid #e2dede; float: left; margin-right: 1.5em; }
.postauthor h4 { color: #666; font-size: 2em; margin-bottom: 5px; }
.postauthor p { color: #515151; font-size: 13px; margin-bottom: 12px; }
.postauthor p.hlight { font-size: 11px; text-transform: uppercase; }
.postauthor p.hlight span { color: #CB3131; font-size: 13px; font-style: italic; font-weight: bold; letter-spacing: 0.8px; }
/* BOXES */
#similar h3, #rightcol h3 { font-size: 2.2em; letter-spacing: normal; padding-top: 10px; }
#similar { float: left; width: 50%; }
#similar p { margin-bottom: 5px; padding: 5px 2.5em 10px 10px; }
#similar a { font-size: 1.1em; border-bottom:none; line-height: 1.5em; }
#similar a:hover { border: 0; }
#similar h3 { padding-left: 10px; }
#similar span.date { color: #888; letter-spacing: 1px; text-transform: uppercase; }
#rightcol { float: right; width: 50%; }
#rightcol p { font-size: 11px; line-height: 1.5em; text-align:center; padding: 10px 2.5em 10px 0; }
#rightcol h3 { padding: 0; }
#rightcol ul { list-style-position: inside; list-style-type: square; margin-left: 1em; }
#rightcol ul a { border-bottom: none font-size: 12px; }
#rightcol ul a:hover { border: 0; }
#rightcol li { margin-bottom: 10px; }
#subscribe { background: #FFFBCC; border: 1px solid #E6DB55; float: right; margin: 5px 10px 0 10px; padding: 10px 0 0 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
#custom { background: #E4F2FD; border: 1px solid #C6D9E9; float: right; margin: 15px; padding: 10px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }