Add an Email Subscription Box Below Each Post in Thesis WordPress Theme

by Sathishkumar on July 15, 2010

We have already covered some important Thesis customization topics like

Here’s another one tutorial in that series.

How to Add an Email Subscription Box Below Each Post in Thesis WordPress Theme?

Having an Email Subscription Box below every single post will help you to turn your blog visitors into subscribers. So if you don’t have one, here’s the tutorial on how to add an Email Subscription box below each post in Thesis WordPress theme.

email subscription box 300x240

1. Login to your WordPress Admin panel and click Custom File Editor in Thesis Options.

2. Add the Code in custom.css and click the Save button.

/*Subscribe Box In Single Post*/

#singlesubscribe {width:500px;height:30px;border:1px solid #ccc;padding:10px 0 10px 10px;margin:0 auto 20px auto;background: url(images/rss-subscribe.gif) no-repeat 30px center;}

input.txt{background:#fff; padding:2px 0 0 15px !important; width: 220px; height: 21px;border:1px solid #198dc9 !important;color:#198dc9;position:relative;left:110px;top:3px;}

input.btn{background:#198dc9;color:#fff;width:90px !important;height: 25px !important;margin:0 0 0 -10px !important;border:none !important;font-weight:bold;position:relative;left:110px;top:3px;}

Note: In the above code, the image I have mentioned is uploaded in my images folder on my server. You need to upload the image in your root server to get the image in the subscription box. You can have any RSS image of choice.

3. Now scroll the options to custom_functions.php and click edit selected file.

function single_subscribe() {
if (is_single()) { ?>
<div id="singlesubscribe">

	<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=techiemania', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

	<p><input class="txt" value="Your Email Address" onfocus="if (this.value == 'Your Email Address') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Your Email Address';}" name="email" type="text">

	<input name="uri" value="techiemania" type="hidden">

	<input value="en_US" name="loc" type="hidden"> 

	<input value="Subscribe" class="btn" type="submit"></p>

	</form>

</div>
<?php
   }
}

add_action('thesis_hook_after_post_box', 'single_subscribe');

Note: Change the feedburner URL to match your blog account.

4. Now add the following code in custom_functions.php and click the Save button.

If everything goes right you will see the subscription box below each post in your Thesis wordpress theme.

cool subscription box1

Thesis Theme is a very flexible and well SEO optimized wordpress theme, if you’ve yet to grab one, you should order one now!

Get Thesis WordPress Theme

If you like this tutorial, give us a thumbs up.

View all posts by
Blog →

Follow Us On

@techiemania facebook

Article by Sathishkumar Varatharajan

Sathishkumar is an Online Marketer and a full-time Blogger.

Sathishkumar Has Written 634 Articles For TechieMania.com

  • Pingback: Tweets that mention Add an Email Subscription Box Below Each Post in Thesis Wordpress Theme -- Topsy.com

  • http://tech4world.net Siddharth

    I think this could be added..
    Image has to be in this path..
    “www.domain.com/wp-content/themes/Thesis1.7/thesis_17/custom/images/rss-subscribe.png”

    • http://www.techiemania.com Sathish

      Yep you are right da. But every server has its own path da. So its better to be in the way i have given.

  • http://www.bayofblog.blogspot.com vijay

    where our readers get maximum satisfaction? is in the footer of the blog after reading the article,So this will be very useful idea to convert visitors to subscribers easily,i have already added in my blog when i customize my template.Thanks for a great share sathish….

    • http://www.techiemania.com Sathish

      You are welcome Vijay

  • 轮盘赌

    Sometimes it’s really that simple, isn’t it? I feel a little stupid for not thinking of this myself/earlier, though.

    • http://www.techiemania.com Sathish

      Now got it mate. And that ends the problem.

  • http://mobiletricks.net Nasir Hayat

    Great Solution! infect i was looking for such method to add this feature in my own blog. Nice work!

    • http://www.techiemania.com Sathish

      Thanks Nasir.

  • http://correct-weight-loss.net Paramjit

    Thanks for this great tutorial Shatish. What do I do if I want to integrate this with Aweber?

    • http://www.techiemania.com Sathish

      A good question. I will surely write a tutorial for that soon. So, do subscribe for our feeds.

  • http://www.lovemakingupdates.com Love Making Tips

    how can I add this code to my wordpress site. My theme is not thesis. Please send me the details to my mail. Thanks in advance. :)

  • Tips for technology

    Hi, you told me a good thing..but can it be done without thesis..I want it on my custom theme..

  • http://www.interaktivebasement.com/ Ankit Bathija

    Is this possible with MailChimp?

  • prajith

    thanks Sathish. Great tricks

  • Sanjeev

    Thanks for sharing. see this on my blog.

  • HiTMAN2SA

    hey great thank for this :)

  • http://www.androidfoneapps.org TechJ@Android apps

    Hi,,Thankx I used it for my new thesis designed blog

  • http://technicalsafari.com/ ashish

    That was really very helpful for me..

  • http://www.students-junction.in rajinder

    how can i add some text to it ?

    • http://www.techiemania.com Sathishkumar

      Just add the text’s at the appropriate places. It will work for sure.

Previous post:

Next post: