Typominima, free typography based minimal WordPress theme

FeedBurner Email Subscription in Simple Balance 2.0

FeedBurner Email Subscription in Simple Balance 2.0 Since its launch, over 1800 people downloaded the Simple Balance 2.0 WordPress theme. For that, I thank each and every one of you!

The idea behind this theme was to keep it as simple as possible, yet effective. Simplicity in administration is one of the keywords behind its creation. But some things need a bit of coding knowledge to tweak.

One of them is the email subscription form, which, once you install the theme, serves only as a design template that does not work unless proper code has been added to it.

I’ve been asked via comments and email what’s wrong with it, or how can it be made functional and this made me write the following step-by-step tutorial on how to integrate the FeedBurner email subscription form in Simple Balance 2.0.

Getting the FeedBurner Email Form Code

Here’s a quick screenshot that illustrates the required steps:

Get the FeedBurner Email Form

Step 1: Click the Publicize tab;

Step 2: Look for the Email Subscription item in the left side menu and click it;

Step 3: Copy the form code and paste it in a .TXT file for later use.

Once you’ve pasted the code in a .TXT file, you’ll see that it looks a bit blocky, not being properly formatted using new lines and TAB’s.

Below is a sample of my code (do not copy it unless you want your readers to subscribe to my feed). Try to come to a similar formatting by breaking the line in the same places I did it.

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/
fb/a/mailverify?uri=Blogsessive', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
	<p>Enter your email address:</p>
	<p><input type="text" style="width:140px" name="email"/></p>
	<input type="hidden" value="Blogsessive" name="uri"/>
	<input type="hidden" name="loc" value="en_US"/>
	<input type="submit" value="Subscribe" />
	<p>Delivered by <a href="http://feedburner.google.com"
	target="_blank">FeedBurner</a></p>
</form>

Unless you want to display the link back to FeedBurner, you can delete right from the start the following line:

<p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p>

Editing the Simple Balance 2.0 Email Subscription Form

Now that you have the FeedBurner form code, all you need to do is to integrate it with Simple Balance’s custom designed form.

No need to panic, as it’s a much easier job than it seems. First, you need to locate the theme’s files and open the file called lsidebar.php with your preferred HTML (or simply Notepad) editor.

Next, you need to locate the following chunk of code (normally starts of line 22):

<h2>Subscribe by Email</h2>
<ul>
	<li class="rssForm">
		<form action="">
			<input type="text" class="rssEmail" />
			<input type="submit" class="rssSubmit" value="Subscribe" />
		</form>
		<small>We take privacy seriously.<br />
		Your email address will <strong>not</strong> be shared.</small>
	</li>
</ul>

Now, go to the FeedBurner form code and copy the one part that is similar to mine as shown below:

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/
fb/a/mailverify?uri=Blogsessive', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

The only difference is that instead of ‘uri=Blogsessive’ it will have your blog’s name.

Remove the styling contained in this line by taking out this chunk of code:”

style="border:1px solid #ccc;padding:3px;text-align:center;"

and copy the remaining code (similar to the one below):

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

Ok, did you copy the code? Now, let’s head back to the lsidebar.php file, to our previously selected chunk of code.

Locate this code:

<form action="">

and replace it with what you’ve copied from the FeedBurner code.

While we’re here, locate this line of code:

<input type="text" class="rssEmail" />

and replace it with this one:

<input type="text" class="rssEmail" name="email" />

Now, we head back to the FeedBurner code to copy the two lines similar to these:

<input type="hidden" value="Blogsessive" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>

Again, instead of value=”Blogsessive” you’ll have your blog’s feed name. After you copy the two line, go back to lsidebar.php and add them below the previously edited line:

<input type="text" class="rssEmail" name="email" />

and above this line:

<input type="submit" class="rssSubmit" value="Subscribe" />

Ok, we’re half way there. No, I’m joking. That’s all. You’ve implemented the form and it should be fully functional and looking pretty much like the one I’ve used to exemplify this tutorial.

Save the lsidebar.php file and upload it to your FTP server.

The End Result

Your code should look similar to mine (except for the feed name mentioned in two places):

<h2>Subscribe by Email</h2>
<ul>
	<li class="rssForm">
		<form style="border:1px solid #ccc;padding:3px;text-align:center;"
		action="http://feedburner.google.com/fb/a/mailverify" method="post"
		target="popupwindow" onsubmit="window.open('http://feedburner.google.com/
		fb/a/mailverify?uri=Blogsessive', 'popupwindow', 'scrollbars=yes,width=550,
		height=520');return true">
			<input type="text" class="rssEmail" name="email" />
			<input type="submit" class="rssSubmit" value="Subscribe" />
			<input type="hidden" value="Blogsessive" name="uri"/>
			<input type="hidden" name="loc" value="en_US"/>
		</form>
		<small>We take privacy seriously.<br />
		Your email address will <strong>not</strong> be shared.</small>
	</li>
</ul>

Now, you’ll be able to provide your readers with a functional email subscription based on FeedBurner’s code, but looking like the one designed for your free WordPress theme of choice: Simple Balance 2.0.

Any questions on this tutorial? I’d be happy to answer you in the comments section.

More Blogsessive Content