Tips & Tricks – Add an Email Widget to Self Hosted Wordpres

A week or two ago Ashley @ Nose Graze asked if you had a way to subscribe via email on your blog. My answer was “no”. Before, back when I still hosted my blog on Blogger, I had one, but after I moved to WordPress I couldn’t figure out how to add one. On Blogger it was simple and obvious. On WordPress… not so much, so I wanted to share how I got my email widget. This tutorial is written for SELF HOSTED WordPress only. That being said, some parts of it may apply other others.

Getting the Email Widget

I’m using Feedburner to send post emails so the widget on the sidebar is actually the Feedburner email widget. You can find the widget by going to your Feedburner dashboard. From there, click on the tab “Publicize”. After you click on that, you should see the heading “Publicize Your Feed”. To the right of that, there is a list of “services”. Click on “Email Subscriptions”. Under “Subscription Management” there should be “Subscription Form Code”. Copy that code and paste it where you want it to be displayed. And your done… sort of. Your code should like something like mine below. NOTE: Your code doesn’t have to be formatted like it is below. DO NOT COPY MY CODE… unless you want your potential subscribers to end up subscribing to my email subscriptions!

<form style="border: 1px solid #ccc; padding: 3px; text-align: center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow">Enter your email address: <input style="width: 140px;" name="email" type="text" /> <input name="uri" type="hidden" value="IcyColdReads" /> <input name="loc" type="hidden" value="en_US" /> <input type="submit" value="Subscribe" />Delivered by <a href="http://feedburner.google.com" target="_blank" rel="noopener">FeedBurner</a></form>

If you want to customize it a bit more, you can change some of the settings by editing the code.

The Border

The first part you can change is the part that says “border:1px solid #ccc;”. “1px” controls how wide the border is. By changing “1” to a larger number, you can make the border see wider / thicker. “solid” is the type of line around your border. You can change “solid” to dashed, dotted, or double. I think the names are pretty self explanatory so… “#ccc” is the color of the border. You can change it any hex color you want. Don’t know the hex code of the color you want? Just visit http://www.huecode.com/.

The Width

You can change the width of the bar where people are supposed to type their emails in by changing “width: 140px” (it can be found on the second line of my code). To change the width, simply replace 140 with how many pixels you want the width to be. Or, you can replace 140px with something like 95% (so the code would look like “width: 95%”). That basically means you want the bar to take up 95% of the width of your sidebar (or wherever you put the code). I would only recommend using percentages in your sidebar, otherwise you could end up with a REALLY long / wide bar.

So that’s it for today. I hope you guys found this tutorial useful. Check back next week (or the week after) to learn how you can customize the email widget even further. A little peak of the next Tips & Tricks post…

 

I’d love you hear from you guys.
Comment below if you:
Liked the post,
Need help,
Or if you think I left something out or messed up something.

 

 

Related Posts