How to setup Sprout & Spoon's newsletter widget
Please note: This article is specifically for the Sprout & Spoon theme.
Sprout & Spoon comes with custom CSS stylings for the "MailChimp for WordPress" plugin. This plugin allows you to insert a newsletter sign-up form in either your Sidebar area, beneath a Post on its singular page, or beneath the homepage's Featured Area.
If you would like to apply the same stylings to your newsletter form as seen on Sprout & Spoon'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 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 Sprout & Spoon demo?
If you would like your newsletter sign-up form to look just like Sprout's demo, you can navigate to WP Dashboard > MailChimp for WP > Forms.
In the big text box, replace the code you see within with the following code instead:
<div class="subscribe-box"> <div class="subscribe-text"> <h4>Never Miss a Recipe!</h4> <p>Sign up and 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>
Note: If you'd like to change the text from "Never Miss a Recipe!" to something else, you can do so on the 4th line of the above code.
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 desired widget area on the right side of the screen.