1. Adding a cool post footer
The thing that got the biggest response about the theme was the post footer. Check out the content immediately after this article if you don’t know what I mean by “post footer”.
I am going to show you how to create the same stuff I have in my post footer, except for the Post Highlights box.
So paste this code into
custom_functions.phpfunction post_footer() {
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>
<p>Similar Posts Code Here</p>
</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><a href="FEED_URL_HERE">Subscribe to our RSS Feed</a></li>
<li><a href="FEED_URL_HERE">Subscribe for Email Updates</a></li>
</ul>
</div>
<div id="custom">
<p>Put whatever you want here!</p>
</div>
</div>
<?php
}
}
add_action('thesis_hook_after_post_box', 'post_footer');
Here is the CSS too, if you want to build off of my style. Paste this in
custom.css:/* 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: 1.8em; letter-spacing: normal; padding-top: 15px; }
#similar { float: left; width: 50%; }
#similar p { margin-bottom: 15px; padding: 10px 2.5em 10px 10px; }
#similar a { font-size: 1.4em; border-bottom: 1px solid #CB3131; 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: 14px; line-height: 1.5em; 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: 1px solid #CB3131; font-size: 14px; }
#rightcol ul a:hover { border: 0; }
#rightcol li { margin-bottom: 10px; }
#subscribe { background: #FFFBCC; border: 1px solid #E6DB55; float: right; margin: 15px 15px 0 15px; padding: 19px 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
#custom { background: #E4F2FD; border: 1px solid #C6D9E9; float: right; margin: 15px; padding: 19px 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
Source- http://www.blogussion.com/general/4-ways-customized-thesis-theme/
No comments:
Post a Comment