Wordpress

How to Create a Daily and Weekly Email Newsletter in WordPress

In the past we have written on what, why, and how-to’s of email newsletters. With our redesign, we have gone ahead with advanced segmenting of our email newsletters. A lot of you guys have sent us an email asking how to do daily and weekly email newsletters. How to add all these other options, what are the benefits etc? In this article, we will show you how to create a daily and weekly email newsletter in WordPress using Aweber or MailChimp.

Every so-called “expert” is stressing out about building an email list. “Build a list” has become one of our industry’s cliche statement. However most of these experts miss out on the part: how to build your email list the right way. Segmenting or grouping your list is almost necessary to have successful campaigns in the long run. By segmenting your subscribers, you make sure to send targeted and relevant emails. Often users want to keep up with your site, but they don’t want to do it on a daily basis. Giving them a weekly option is much better than having them unsubscribing altogether. Let’s take a look at how we can do this.

This is what we are going to build:

List25 Optin

Note: You MUST have an Aweber or MailChimp account. We are using MailChimp on our website, so we will only show the MailChimp method. However the methods are pretty similar.

Login to your account and click on the Lists navigation item. You will see a list of your lists. Click on the Groups » View Groups option.

MailChimp View Groups

Since you don’t have any groups yet, you will see a screen like this. You can click to watch the video to learn more about it. To follow this tutorial, you need to click on the Create Groups button.

MailChimp Create Groups Preview

Once you click that button, you will see a screen like this.

MailChimp Create Groups

You have the option to show group options in the signup form. You can choose the options to be checkboxes like our site, radio buttons, drop downs, or don’t show it at all. In our case, checkboxes are the ideal choice. Choose the group title, then add the options you want. Since we are only doing Daily and Weekly newsletter, we will only add these two. Feel free to make it branded like we did on our site, WPB Daily. Save groups and you are done with this part.

Now let’s head over to the forms part in our list. Go back to the Lists page. Click on the Forms link.

MailChimp Forms Link

You will see a page that shows how your signup form looks. There is a builder that you can use to customize the header images and such. We have customized our form, so it looks like this.

MailChimp List25 Form

The only reason why we are checking this is to see that the checkboxes are there. Once that’s done scroll to the top of the page and click on the “For your Website tab” and get Signup Form Embed Code.

MailChimp Signup form Embed Code Link

You will see the option to create form embed code. There are multiple options there, but we will select the Naked Form option. This allows us to easily customize things the way we want.

MailChimp Naked Form Options

Chances are that you don’t want their headings and required field indications in your form. So click the options box and match the settings like our screenshot above. Then click on Create Embed Code. The embed code will be shown on the same page right below the button.

MailChimp Form Embed Code

Copy and paste that code in your theme. The location can be wherever you want to show the opt-in form. In our case it is in the sidebar, so we will paste the code in the sidebar.php file. Once you paste the code, our goal is to strip down all the styling divs. Let’s only keep the basic form fields. Your result should look something like this:

01 <form action="http://list25.us1.list-manage.com/subscribe/post?u=549b83cc29ff23c36e5796c38&amp;id=184bf03dd3" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
02
03 <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
04
05 <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" />
06
07 <input type="checkbox" checked="checked" value="1" name="group[9][1]" id="mce-group[9]-9-0">
08
09 <label for="mce-group[9]-9-0">List25 Daily</label>
10
11 <input type="checkbox" checked="checked" value="2" name="group[9][2]" id="mce-group[9]-9-1">
12
13 <label for="mce-group[9]-9-1">List25 Weekly</label>
14
15 </form>

Notice that we have moved the submit button right after the email field. We have also gotten rid of the label for email field, so it just shows as a blank field with no default value text. We also gotten rid of the error fields mainly because a new tab explanation of success works much better. Since our users have no clue what to put in our blank input field which is meant for email, we need to let them know. The best way to do this is by using onblur and onfocus values.

Lets go ahead and replace the email input field to be something like this:

1 <input type="text" value="Enter your email..." onblur="if (this.value == '') {this.value = 'Enter your email...';}"  onfocus="if (this.value == 'Enter your email...') {this.value = '';}" name="EMAIL" class="required email emailupdatesinput" id="mce-EMAIL" />

What the code will do is it will add the text called “Enter your email…” in the email input field. However, when the user clicks on the field to enter their email, it will automatically go away.

Now that we have taken care of that, lets add some additional classes to our form:

01 <form action="http://list25.us1.list-manage.com/subscribe/post?u=549b83cc29ff23c36e5796c38&amp;id=184bf03dd3" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
02
03 <div class="subscribe">
04
05 <input type="text" value="Enter your email..." onblur="if (this.value == '') {this.value = 'Enter your email...';}"  onfocus="if (this.value == 'Enter your email...') {this.value = '';}" name="EMAIL" class="required email emailupdatesinput" id="mce-EMAIL" />
06
07 <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button subscribesubmitbutton" />
08
09 <div class="clear"></div>
10
11 <div class="subscribecheckboxes">
12
13 <input type="checkbox" checked="checked" value="1" name="group[9][1]" id="mce-group[9]-9-0">
14
15 <label for="mce-group[9]-9-0">List25 Daily</label>
16
17 <input type="checkbox" checked="checked" value="2" name="group[9][2]" id="mce-group[9]-9-1" class="secondcheckbox">
18
19 <label for="mce-group[9]-9-1">List25 Weekly</label>
20
21 </div>
22
23 </div>
24
25 </form>

Notice that we have added additional divs. We have also added an additional class to the second checkbox input field, and the submit button. Now that we have defined our html elements, lets go ahead and add the styling in the css file (style.css).

1 .subscribe { width: 296px; height: 38px; border: solid #bbbbbb 1px; margin: 0 0 60px 0;}
2
3 .subscribecheckboxes {margin: 20px 0 0 0; font-family: 'ProximaNovaRegular', sans-serif; font-size: 14px; color: #626262;}
4
5 .secondcheckbox {margin: 0 0 0 28px;}
6
7 .emailupdatesinput { width: 162px; height: 38px; border: none; font-family: Georgia, serif; font-size: 14px; font-style: italic; color: #949494; padding: 0 10px 0 10px; float: left;}
8
9 .subscribesubmitbutton { background: #ff370f; height: 40px; border: none; width: 115px; margin: -1px -60px 0 0; float: left; font-family: 'ProximaNovaRegular', sans-serif; font-size: 12px; color: #ffffff; text-transform: uppercase; padding: 0 1px 0 0; cursor: pointer;}

Notice the only reason why we have ProximaNovaRegular is because we are using that font using font-face. You would need to replace that with the font that you are using in your theme.

Once you upload the CSS, your final result would look like this:

List25 Optin

Now that you are done with the styling part, you have to create campaigns in your MailChimp or Aweber dashboard for each specific group. We will be using RSS to Email campaigns (RSS Driven Campaigns). Click on Campaigns menu item, then bring your mouse over on the campaign button. You will see the RSS Driven Campaign option.

MailChimp RSS Driven Campaign

The steps after that are pretty intuitive. You will enter your RSS Feed URL, select the time. Then select the segment of your list and that’s it.

We hope that this article has helped you in understanding not just how to create daily and weekly email newsletters, but how to segment and group your email lists.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s