WordPress Tweaks & Tuts?

Subscribe to TheCreatology via RSS | Email

Add Slim Subscription Box in Header to Increase Blog Readers

by Aky Joe

Not getting enough readers for your blog ? It doesn’t matter if blog content is unique or covers latest news, tRUth is that, a reader will come, read the content or will exit away and never return. While going through thecreatology stats, I analyzed that RSS Subscription was not performing well because of its placement in footer. Guess what, you can now see another slim subscription box above content box on thecreatology blog. It looks similar to the screenshot below:

Slim Subscription Box TheCreatology

Slim Subscription Box TheCreatology

The point is that, if you offer FREE Subscription of Blog Updates and maintain a subscriber list then it will certainly help you to get loyal visitors on blog. Well, if you want to add attractive subscription box in WordPress blog, then you can follow rest of the article.

In this article, we will learn to Add Slim Subscription Box in Header to Increase Blog Readers. Below are quick steps for the same:

Getting Started

Before we start with the tutorial, I want you to make sure that your WordPress, Plugins and Theme are updated with latest versions. If you are using Thesis Theme then you can Safely upgrade to latest version Thesis.

Add Subscription Box in Header

In this example, we are going to add RSS Subscription box which I believe is most commonly used and FREE too. Find the code for RSS Subscription box below and paste in single.php or  header.php file of the currently activated theme. If you are using Thesis Theme, then paste the code in custom_functions.php file using thesis hook before content. PHP code is as under:

NOTE: Make sure you take full backup of functions.php file or custom_functions.php file using FTP before modifying the original file or you can also refer to the article about how to safely edit custom_functions.php.

<!--Do not remove this line
Designed by TheCreatology-->
<div id="slim-subscribe">
<span>Need Blog Updates?</span>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=thecreatology', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<h4>Subscribe to TheCreatology via <a href="http://feeds.feedburner.com/thecreatology" target="_blank" rel="nofollow">RSS</a> | <a href="http://feedburner.google.com/fb/a/mailverify?uri=thecreatology">Email</a></h4>
<input type="text" name="email" value="Your e-Mail address..." onblur="if (this.value == '') {this.value = 'Your e-Mail address...';}" onfocus="if (this.value == 'Your e-Mail address...') {this.value = '';}">
<input type="hidden" value="thecreatology" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe">
<!--Designed by TheCreatology, Author: Aky Joe-->

Style Subscription Box CSS Code

After adding the HTML part, we definitely require to add CSS code to make it look attractive. Subscription box style code is as under:

NOTE: Make sure you take full backup of style.css or custom.css file using FTP before modifying the original file.

Author: Aky Joe
URL: http://akyjoe.thecreatology.com
#slim-subscribe{ background:#E2F7A8; border: 1px dashed #A6DFFA; height: 70px; margin: 20px 0 0; font-family: Arial;}
#slim-subscribe span{color: #f60; text-decoration: none; font-family: comic Sans MS; font-size: 26px; line-height: 65px; margin: 0 0 0 20px;}
#slim-subscribe h4{font-size: 12px; margin:5px 0;}
#slim-subscribe h4 a:hover{text-decoration: underline;}
#slim-subscribe form{float: right; margin: 5px 20px 5px 0;}
.txt-blog,.txt-blog:focus{background:#fff; border: 1px solid #b7cb80; border-radius:5px; padding: 6px 10px; width: 180px; font-size: 15px; color: #888;}
.btn-blog,.btn-blog:focus{background:#555; border: 0; border-radius:5px; padding: 6px 10px; font-size: 15px; color: #fff; text-shadow:1px 0 2px #333;}

Did you Play with the Code ?

Did you copy the code as it is ? Well, if yes then I recommend you to replace HTML part saying “thecreatology” with your RSS feedburner ID. Also you can play with the CSS to change background color of box and font color matching blog theme. Don’t change its size as fat body covers a lot of space, so let it be slim like me mine. 😉

We’re Done!

Wow subscription box looks good now, ‘eh ? If not, I would say NEVER STOP PLAYING. And here we come to the end of tutorial add subscription box in header to increase blog readers. I hope it was easy, if not? you can also hire me to add-style subscription box for you. If you have any query or further assistance is required, post your feedback as a comment below.

Similar Topics: , , ,

TheCreatology Support

Got a Query? We're ready, Just Say it!

If you have a doubt or a feedback, then get-in-touch with TheCreatology Support Team now.

Start a Hangout or Email Us

Are you looking for...

  • Logo Design
  • Web Development
  • Thesis Skin Design
  • Graphic Designing
  • Virtual Assistance
Hire Us!


{ read them below or add one }

Ammar Ali February 6, 2012 at 2:27 pm

Nice Subscription box. Well, Does this work for other WordPRess Themes too?


Aky February 9, 2012 at 12:42 pm

Yes, it does. Scratch your brain to make it more effective.


jomon May 15, 2012 at 6:20 pm

and very useful idea for getting more readers.


Anchal Bhatia November 19, 2013 at 3:19 pm

Hi Aky,

Really helpful post. On the same line i would like to check if you have some code to add a subscription box below every post?


Aky Joe November 19, 2013 at 3:59 pm

To add this subscription box below each post, you can do the following:
[Basic WP Theme]

  1. Locate Single.php in the WordPress Theme folder.
  2. Add this subscription box code after closing Post Box DIV Tag.
  3. Save the file and upload using FTP.

[Thesis Theme 1.x]

  1. Locate custom_functions.php in thesis theme custom folder.
  2. Add this subscription box code in a function and hook it using thesis_hook_after_post_box.
  3. Save the file and upload using FTP.

Hope it works soundly without horrifying errors. 🙂


Anz March 22, 2014 at 12:24 pm

Nice one. Does this work with custom cms?


Aky Joe April 16, 2014 at 7:02 am

Yes, it works 100% with any HTML site.


Leave a Comment

Previous post:

Next post:

Contact Aky

Yes, I agree that all information above is valid.

Simple question, what's...