How To Create a Subscribe Box For Your WordPress Sidebar

A few users have asked me how I’ve created the Subscribe box in the sidebar and some have even called for a WordPress plugin that helps automate it. In reality, it’s just simple HTML/CSS paired with the Feedburner subscribe code and can be replicated very easily. Let’s take a look at the code used to create it:

Download ZIP View Example

The HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class="widget subscribe">
<ul class="social">
<li><a href="http://feeds.feedburner.com/devgrow" class="rss">RSS</a></li>
<li><a href="http://www.facebook.com/DevGrow" class="facebook">Facebook</a></li>
<li><a href="http://twitter.com/ThinkDevGrow" class="twitter">Twitter</a></li>
</ul>
<h3>Subscribe</h3>
<p>Join over 2,800 readers and get the latest posts delivered straight to your inbox.</p>
<form id="feedburner-subscribe" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=[YourAccount]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" name="email" value="E-mail Address" class="left textfield" />
<input type="hidden" value="[YourAccount]" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe" class="right button submit" />
</form>
</div>

The HTML is pretty straightforward, the only thing out of the norm is the Feedburner e-mail widget, which is taken directly from their site. You can use any service there instead of Feedburner, or use a separate WordPress plugin to handle your subscriptions if you choose.

The CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

.widget {
margin-bottom: 40px;
overflow: hidden;
}
.widget h3 {
font-size: 22px;
margin: 0 0 15px;
}
.widget.subscribe h3 {
font-size: 20px;
font-weight: 600;
color: #4a7aa3;
}
.subscribe {
background: #f0f8ff;
padding: 13px;
border: 2px solid #d5e7ee;
}
.subscribe form {
margin: 15px 0 0;
}
.subscribe input.textfield {
border: 2px solid #e4e9ef;
}
.subscribe input {
font-size: 13px;
padding: 4px;
}
.subscribe input.submit.button {
font-size: 13px;
border: 2px solid #3C6F8F;
background: #3675A5;
padding: 3px 5px;
color: white;
cursor: pointer;
font-size: 15px;
font-weight: 700;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.subscribe input.submit.button:hover {
background: #488abc;
}
.subscribe p {
color: #385c7c;
font-size: 13px;
line-height: 20px;
margin: 0 0 5px;
}
.social {
float: right;
}
.social li {
float: left;
margin: 0 0 0 5px;
}
.social li a {
background: url(icons.gif) no-repeat;
display: block;
height: 26px;
text-indent: -999em;
width: 26px;
}
.social li a.facebook {
background-position: 0 -30px;
}
.social li a.rss {
background-position: 0 0;
}
.social li a.twitter {
background-position: 0 -59px;
}
.social li a:hover {
position: relative;
top: -1px;
}

Please be aware that you need to download the icons.gif file if you want to use the social media links. I’ve made it into a sprite for faster loading and convenience and if your subscribe box is wider, you can easily fit a lot of other services there as well.

Thoughts? Feedback?

I know this is absurdly simple for a lot of you out there but I’ve had multiple requests to make the Subscribe box into a separate plugin. Let me know if the above code is good enough or if you guys really do want me to make it into a plugin, and perhaps to make things uber convenient, I may just do so.

Enjoyed the post?

Then you should follow me on Twitter or subscribe to the RSS feed.

http://www.jailbreakguides.com giorgos

I was unable to make it look like yours:-(
I paste the html code into a widget html text box and the css into my mail theme’s style.css. the result you can see at the screenshot below:

http://www.jailbreakguides.com/wp-content/uploads/2011/03/sub.jpg

What am I ‘m doing wrong? after all a widget is not such a bad idea for people like me ;-)
Thanks, also for the sharebar..

http://devgrow.com/ Monjurul Dolon

Hi Giorgos,

You actually have to add the code into your theme’s sidebar.php file, not in the widget box. I’ve updated the post to mention this as well.

Hope that helps!

http://www.jailbreakguides.com giorgos

Thanks, works fine
http://brightcoconut.com Adam Kayce

Works fine in my widgets; then again, I’m using the Advanced Text Widget plugin, which allows for PHP.

http://kprimdal.dk Kristian Primdal

Thanks Monjurul, I have added it to one of my sites now, exicted to see if that is going to give me more subscribers to the feeds.

Maybe you could have added how to remove the “Email Address” automatically when used click on the field. Just like the one you have.

http://devgrow.com/ Monjurul Dolon

Hey Kristian,

I use a simple jQuery function to do that:

1
2
3
4
5

$(document).ready(function(){
autoFill($('#feedburner-subscribe input.field'), "E-mail Address");
});

function autoFill(id,v){$(id).css({color:"#b2adad"}).attr({value:v}).focus(function(){if($(this).val()==v){$(this).val("").css({color:"#333"});}}).blur(function(){if($(this).val()==""){$(this).css({color:"#b2adad"}).val(v);}});}

Let me know if that helps!

neono

Where does this one go? In the functions?
neono

Wow, thanks for answering.
Ander

Where do I put that?
http://devgrow.com/ Monjurul Dolon

Hi Ander – You should put the HTML somewhere in your sidebar.php file and the CSS in your style.css file.
ALbert

Where do I put that jquery code?
Ander

I meant where do I put it to make the email get remove when so one click “E-Mail”.
http://pricenfeature.com aatif

can you please say me where this jqeury will go ???
http://ustandout.com Diana Urban

Has anyone figured out where the jQuery should go?

http://www.quickwptips.com Hariom

Very clean subscriber box for any any wordpress hosted blog. I have also addes simmilar subscriber box on my blog. Monjurul Dolon i would like if you could also explain how you add share this and realted posts and author box at the end of each article. It would be very useful for many bloggers.

http://devgrow.com/ Monjurul Dolon

Thanks for the feedback Hariom! That bit is pretty simple too, I may add a post later on explaining how to do that.

KatyDigg

Thank you, very much appreciated.
http://www.tipprodeo.de Marcel

Clean and simple, thank you very much!
http://teckmunch.com Irvin

when i add this widget on my wordpress blog it changes everything the font and it makes the side bar not work Please Help

Thanks
http://toptenblogthemes.com Chris

Thank you for this code! I will be back later to grab it and give it a try.
http://ohdaus.blogspot.com/ daus

nice one monjurul, but you know how put this subscribe box for blogger??

Thanks.
ALbert

Monjurul, I would like to know where to put the jQuery function code that you posted above to remove the “Email Address” automatically when you click on the field.
http://www.wordpressstop.com Prasad

Nice Article.

Once visit http://www.wordpressstop.com here you will find lot of articles regarding to WordPress.

keep Smiling
http://www.EzFather.com EzFather.com

Great, elegant and simple
Thank you
http://www.RushhourNews.com RushHourNews.com

Will try to use it. still working on design theme, but this plugin is very helpfull to be part of any site
thnx
http://www.xenia-consulting.com Anshul

Thanks for the post, i will use it on my blog.
http://www.wizardjournal.com Rakesh Narang

I really like subscribe box and I have incorporated it on my blog.

Thanks.
http://www.gregoryciotti.com Gregory C.

Simple but excellent.

What are you running your site on by the way? At first it looked like it was maybe built on Hybrid Core or just custom.

http://devgrow.com/ Monji

Sorry this is late — DevGrow.com has been through several custom themes over the past couple of years.

Yuriy

Dear devgrow!
Thanks for a great plugin.

But,
So many times you were asked here to help with that jquery function to remove ” Your Email” text – where to put it – and no answer. Could you please help with that, where to “simply use it”?
Not all of us are developers here..

Thanks!
http://kawangeek.com/ EddyGeek

thanks, this is great
http://www.mundoiphone.es nacho

Great!

I was lookibf something like this!! The option that provide feedburner are so bad…

Thanks!
Jacob

Can it work with MailChimp?
http://www.weltreise-magazin.com Tobias

Hello!

Great tutorial! But I do have some problems, installing the email box on my blog. If I place the code in the sidebar.php the code is changing all my theme styles. I want to achieve that I can have the social box in my sidebar. The index.html includes as well css and html, head, etc. definitions. Which code is needed for the sidebar? Would it somehow possible to place the code in a text/php widget?
Thanks in advance!

Monji

It is definitely possible to make a WordPress widget for this, and I may do that in an upcoming tutorial. To do so, I would recommend placing the code in your functions.php file in your theme directory, since you do not want the standard widget features (like a title).

Anonymous

Ben bunu çok beğendim. I like This !
http://naziman.com/ Naziman

thanks for this article, it help me a lot. but still, how can i use my own image not the icon.gif? then how can i add more social like linkedin maybe?

DevGrow - Design, Develop, Grow.