Please note: This article is specifically for the Hawthorn theme.
Hawthorn comes with custom CSS stylings for the "MailChimp for WordPress" plugin. This plugin allows you to insert a newsletter sign-up form in your Sidebar area or Footer area.
When a visitor adds their email via the form, it is saved to your chosen MailChimp mailing list/audience. When you're ready, you can use MailChimp's easy interface to create and send personalized newsletters to your hoards of fans!
If you would like to apply the same stylings to your newsletter form as seen on Hawthorn's demo site, you can follow the steps below.
1. SIGN-UP FOR MAILCHIMP
First, please ensure you have signed up and created an account with MailChimp ( http://mailchimp.com ).
The first step you'll want to do is to create an "Audience" within your MailChimp account. This is where all of your subscribers' information will be kept.
To create a MailChimp Audience: Log into your MailChimp account > In the top menu area, click "Audience" > Click the "Current audience" drop-down > Click the "View audiences" option > and click the "Create Audience" button. Fill in the requested information like List name & the email address you will be sending your newsletter from, etc. > finalize creating your Audience.
Next you will need to have your MailChimp account generate a unique "API Key" number. This API Key is used to link your MailChimp account to your WordPress "MailChimp for WordPress" plugin which is collecting your newsletter sign-ups.
To find your MailChimp API Key: Log into your MailChimp account > Your Account Page > Extras > API Keys > Create a key.
2. INSTALL THE PLUGIN
Next, you'll need to install the "MailChimp for WordPress" ( http://wordpress.org/plugins/mailchimp-for-wp ) plugin onto your WordPress.
Installing the Mailchimp for WordPress plugin: Log into your WordPress Dashboard > Plugins > Add New > Search for term "MailChimp for WordPress" > Install Now > Activate Plugin.
Once installed, navigate to the plugin's Settings page. Here, you'll want to copy and paste your MailChimp account's API Key into the form and click "Save changes".
Want your newsletter sign-up form to look just like the Hawthorn demo?
Navigate to WP Dashboard > MailChimp for WP > Forms.
Here, you will see the HTML code that "builds" your newsletter form. We will want to replace this HTML code with the following code instead in order to have your form resemble Hawthorn's demo site.
You can simply delete the code within the text box and replace it with the following instead:
<div class="subscribe-box">
<div class="subscribe-text">
<h4>Join the Family!</h4>
<p>Receive the latest tips via email.</p>
</div>
<div class="subscribe-form">
<input type="email" name="EMAIL" placeholder="Your email address" required="">
<input type="submit" value="Subscribe">
</div>
<div class="email-icon"></div>
</div>
Note: If you'd like to change the text from "Join the Family!" to something else, you can do so on the 4th line of the above code. You can change the "Receive the latest tips via email" to your preferred text on the 5th line of code.
Be sure to save changes to the form when finished.
3. ADDING THE NEWSLETTER WIDGET TO YOUR SITE
To then add your newsletter sign-up form to your site, you can navigate to WP Dashboard > Appearance > Widgets and add the "MailChimp Sign-up Form" widget to your Sidebar widget area or one of your Footer widget areas on the right side of the screen.
Be sure to test your newsletter form when finished to make sure everything's working correctly on the email-side of things!