Hai friends..Looking for a post on how to get a stylish comment,add opinion links in Home page like Mytechshout and shoutmeloud blogs.
Here is a tutorial on how to add comments (opinions)and read more links to the home page of thesis theme.
Goals to be achieved :
To add
1.Read More link in thesis teaser post menu
2.Comment link with number of comments in homepage
3.Add your opinions(comment) link
Settings for teasers in dashboard:
#Now go to Thesis>>Design Options in WordPress dashboard
#Under Teaser Display Options select you settings and remove the link to full article link
(This will remove the extra read full article link displayed)
#Now under Home Page Display Options, change the Number of featured posts to show to- 0
(This will make all the post in the Homepage to show only a few lines and a read more link)
#Then click on Save Button.
Editing Custom_funtions.php file using Filezilla:</>
#Open your/public_html/wp-content/themes/thesis_182/custom/custom_functions file using FTP client
#Now add the below code to your custom functions file
/*Adds the menu links under the teaser posts*/
/* SAVE THIS IN CUSTOM_FUNCTIONS.PHP FILE */
function teaser_box_links() {
if (!is_single() && !is_page()){ ?>
<div id="teaserempty"></div>
<div id="teaserlinkscontainer">
<ul id="teasermenu">
<li><a href="<?php the_permalink(); ?>#comments" title="<?php comments_number(__('0 Comments','thesis'), __('1 Comment','thesis'), __('% Comments','thesis')); ?> on <?php the_title(); ?>" rel="nofollow"><?php comments_number(__('0 Comments','thesis'), __('1 Comment','thesis'), __('% Comments','thesis')); ?></a></li>
<li><a href="<?php the_permalink(); ?>#respond" title="Add your opinion on <?php the_title(); ?>" rel="nofollow">Add your Opinion</a></li>
<li><a href="<?php the_permalink(); ?>" title="Continue Reading: <?php the_title(); ?>" rel="bookmark">Read More...</a></li>
<li><p></p></li>
</ul>
</div>
<?php } }
add_action('thesis_hook_after_teaser','teaser_box_links');
For beginners ,here is How to add the code
#Add the code below any function like this
add_action(‘thesis_hooks’, ‘function name’);
or add it to the first line(beginning of the code has the same result of adding it to the end of the code)
Tip:Don’t leave any empty line at the start of the php file as it may lead to error.
Customize using custom.css :
This adds style to the custom teaser menu like our site MyTechShout.com
#You can edit using Filezilla or by using Custom File Editor in your Dashboard.
#Copy and paste the below code to the custom.css file
/* HOME PAGE TEASER LINKS by MyTechShout.com */
.custom #teaserlinkscontainer {margin-top:0;}
.custom #teasermenu {height: 30px;}
.custom #teasermenu , .teasermenu ul {padding: 0; margin: 0; list-style: none; line-height: 1; border-width: .5em;}
.custom #teasermenu ul {float: left; list-style: none; margin:0; padding:0;}
.custom #teasermenu li {float: left; list-style: none; margin: 0; padding: 0;}
.custom #teasermenu ul li {list-style: none; margin: 0; padding: 0;}
.custom #teasermenu a, .custom #teasermenu li ul {border-color: #FFF;}
.custom #teasermenu li a, .cutom #teasermenu li a:link {color: #FFF; background: #444343; display: block; font-weight: 700; margin: 5px; padding: 5px; text-decoration: none; font-size: 13px; font-family: Arial, Helvetica, sans-serif; -moz-border-radius:4px; -webkit-border-radius:4px;}
.custom #teasermenu li a:hover, .teasermenu li a:active{color: #FFF; background: #198DC9; display: block; margin: 5px; padding: 5px; text-decoration: none; -moz-border-radius:4px; -webkit-border-radius:4px;}
.custom #teaserempty {width: 100%; margin-top: .5em; margin-bottom: .5em;}
.custom #teaserline {width: 100%; margin-top: .5em; margin-bottom: .5em; border-top: 1px solid #0098D4;}
.custom #teasermenu li p,{color: #000; background: #0098D4; display: block; width: 100%}
.custom li.widget .callout { padding: .846em; line-height: 1.385em; background: #e3f0f2; border: .077em solid #addde6; }
.custom .format_text h2{border-bottom:2px solid #0098D4; font-weight: bold; margin: 0 0 20px; padding: 0 0 5px;}
.custom .format_text h3{color:#0098D4; border-bottom:1px solid #0098D4; font-size: 21px; margin: 0 0 20px; padding: 0 0 5px;}
.custom .format_text p a {padding:0; }
.custom .format_text p a:hover {background-color: #006699;color: #FFF;text-decoration: none;}
#This is a css code to add a stylish teaser menu to each post in homepage.
#Now its all done ,save your custom.css file.
Hope you liked this tutorial.This article is a part of Thesis customization tutorials.In our next post we will post how to add images to the homepage of the thesis theme teaser box.Subscribe to our rss feeds or subscribe via mail to receive updates via email.
You can follow us in
If you have any trouble creating a teaser link in homepage,contact us via comments.
Do share your opinion with us 🙂
