A great way to gain followers on your blog this day and age is to offer a free newsletter. A newsletter is a great way to keep your users informed on topics such as your latest blog posts, upcoming events, promotions, deals and more. Some people prefer to read their news via email rather than directly on your blog.

You can add a newsletter anywhere on your website but a great place is right after each blog post. Typically if a user is happy with what they read they will opt in to read more and receive updates.

Today I will show you the steps you can take to optimize your newsletter signup as well as show you how to add a newsletter signup widget to the end of your blog posts.

Benefits of A Newsletter

If you just started your business or website you probably don’t have many followers which means no one to send emails to. A create way to change this is to add a newsletter to multiple pages of your site. If a user is happy with the content they are provided with then there is a good chance they may subscribe to learn more.

Some key benefits of using a Newsletter system are:

• Gaining a following
• Offering incentives to promote business on your website
• Being able to target your loyal audience
• Having people respect your words and opinions

Best Places to Add The Newsletter Signup Form

You can literally add a signup for for your newsletter anywhere on your site but there are a few places that work much more than others. Just because you have a spot for a newsletter signup form doesn’t mean you need to add it to your site. Sometimes you can overkill on all of the call to actions to signup. You want the form to benefit your users, not annoy them.

Here’s a list of several places you can add your form:

• A feature post or container – content that gets more attention than other posts/pages etc..
• At the top of your sidebar
• After a single blog post
• Inside your website’s footer
• On your about page
• A span across the top of your site that shows and hides
• A lightbox popup form – this can be overkill but it tends to work for some users, this depends on the subject matter of the website

Newsletter Services

There are a few newsletter services that are great tools to help you send your emails on time and regularly. These services can help you design your newsletters, schedule the rate at which they are sent, and keep track of your subscribers.

Mail Chimp

http://www.mailchimp.com

MailChimp is a very popular email marketing service. The service itself offers campaigns to users with are free up until a certain limit. Tons of ready-to-use email templates are ready to use. You can also customize your own by including your branding elements or any content you wish to share. What’s even more is that these email templates are responsive so anyone can read your newsletter no matter what device or platform they are using.

• Pros – Extremely easy to use, geared towards bloggers, cheap
• Cons – Lacks some of the features of it’s competitors

Constant Contact

https://www.elegantthemes.com/blog/refer/constantcontact/

Another extremely popular tool for email marking is Constant Contact. This service picks up where Mail Chimp left off. It’s geared towards businesses rather than bloggers so custom emails and marketing campaigns can be created with ease. There are also pre made templates available but to me aren’t as nicely designed as MailChimps.

• Pros – Targeted for an small business
• Cons – Not really geared towards bloggers

Campaign Monitor

https://www.campaignmonitor.com/

A lot of big names use Campaign Monitor for their email marketing services. Like both Mailchimp and Constant Contact there are pre made templates available for your use or you can create your own custom templates. Campaign Monitor has a unique template builder for users who are into customizing their newsletters or emails. You can also do testing with your campaigns to see what kind of content peeks the interest of your users the most.

• Pros – Professional with big names under their belt.
• Cons – A few less features than other tools

Setting Up Our Theme

Now the time comes for us to take advantage of a WordPress newsletter plugin and include it in our theme as a widgetized area rather than hard coding. For this tutorial you’ll need access to your WordPress theme directory on your website. We will be targeting our single.php file because this is where our complete blog post lives. Our goal is to add a widget just after the end of the blog post. Lets get going.

Note* – I will be using the Harmony theme from the Elegant Themes Library for this tutorial.

Step 1 – Install MailChimp Plugin

Login to the admin area of your website. Head to the plugins panel and do a search for Mailchimp widget in the search field. Install the MailChimp Widget plugin shown below:

Download the Mailchimp Widget Plugin

The plugin installed.

Step 2 – Connect Your Mailchimp Account

For the next part of the tutorial you’ll need to create an account with Mailchimp. Creating an account is free and easy. Head to mailchimp.com to sign up if you haven’t already.

With your account made you can now connect your Mailchimp account to the WordPress plugin by entering your Mailchimp API Key. We need to create a list before doing this step so everything works properly. Head back to your Mailchimp account and click on the Lists tab on the left.

A List must be in place for our Mailchimp Widget to work properly.

On the top right you should see a button titled Create List. Click it and make a list called “Newsletter Signup”. Add your default from email and from name. Also be sure to include a brief message to remind your subscribers why they are receiving emails.

With your list setup you can now get your API key.

Head to your account area and click on your name. Once you click on your name click on My Profile. You should now see something similar to below minus my ugly mug 🙂

Mailchimp profile area. Look for API Keys in the Extras dropdown.

If you click on the Extras drop down you will see a link for API Keys which is exactly what we want. You will be redirected to a new page where you need to create a new API Key. Make sure you label it for future reference.

Now copy and paste the API Key and head back to your WordPress admin area. Navigate to the Mailchimp Widget settings area that was created when we installed the plugin.

There is a window requesting a new API Key in order for your to proceed. Paste the code in the input field and click Save Changes

Add your API Key

You should see that your setting have been saved successfully. If this is not the case make sure you copy and pasted your API Key correctly from your Mailchimp Account.

Enabling Our Widget Area

The Harmony theme I’m using from our Elegant Themes Library currently has 4 widget areas enabled. There is a basic Sidebar widget, and 3 footer area widgets.

Our Harmony theme’s default widget sections.

Although there is planty of room to add to these already existing widget areas I would like to create a new area for the sole purpose of displaying content after a single blog post. For now this content will focus on our Newsletter Signup Widget but it could be anything like Author meta data, promotions, ad spaces and more.

To add our own custom widget area we need to open our functions.php file within our theme directory. If you don’t already have your theme folder open in a code editor now is the time to fire one up!

If you’re following along with the The Harmony theme then you may notice that it uses PHP includes to include excerpts of code into the functions.php file to make things easier to manage as well as more easy to read.

If you are using your own theme then you’ll likely just need to target the functions.php file like normal.

The code we are looking for is code that establishes or registers our sidebars in the first place. Checkout the code below and find it within your file.

<?php

    register_sidebar( array(
        'name'          => 'Sidebar',
        'id'            => 'sidebar-1',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div> <!-- end .widget -->',
        'before_title'  => '<h4 class="widgettitle">',
        'after_title'   => '</h4>',
    ) );

?>

Once you found a block of code similar to above simply copy and paste it below to look like the following:

<?php

    register_sidebar( array(
        'name'          => 'Sidebar',
        'id'            => 'sidebar-1',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div> <!-- end .widget -->',
        'before_title'  => '<h4 class="widgettitle">',
        'after_title'   => '</h4>',
    ) );

    register_sidebar( array(
        'name'          => 'Post Footer',
        'id'            => 'postfooter',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div> <!-- end .widget -->',
        'before_title'  => '<h4 class="widgettitle">',
        'after_title'   => '</h4>',
    ) );

?>

You’ll notice we didn’t change much but rather only the name and id selectors within the register sidebar array. This function literally defines a new sidebar within your theme. You will have access to it just like the other sidebars shown before. With the file saved, head back to your WordPress admin area and look under your Widgets panel to verify your code worked.

Since I already have 4 sidebar areas in the Harmony Theme active you’ll notice I have added a fifth. Your screen may or may not look similar. Don’t worry about it.

The new post footer widget area has been enabled.

Our sidebar we gave the name Post Footer is now enabled.

Adding the Widget

With our widget area enabled we can drag the Mailchimp Signup widget we installed earlier into the Post Footer widget space. You should see something like below.

Our new sidebar active with the Mailchimp Widget added.

For now lets leave the widget’s settings at their default values. You might be wondering at this point how the newly registered sidebar is going to be displayed within our theme or even if it’s capable of displaying at all.

Modifiying Our Theme Template

Before we can go further, we need to create a new file that establishes how our new sidebar is structured. Within your theme directory create a new file called sidebar-postfooter.php.

Within that file add the code below:

<?php
    if ( ! is_active_sidebar( 'postfooter' ))
        return;
?>

<div id="postfooter-widget">
    <div class="clearfix container">
    <?php
        $postfooter_sidebars = array( 'postfooter' );
        foreach ( $postfooter_sidebars as $key => $postfooter_sidebar ){
            if ( is_active_sidebar( $postfooter_sidebar ) ) {
                echo '<div class="postfooter-widget' . (  2 == $key ? ' last' : '' ) . '">';
                dynamic_sidebar( $postfooter_sidebar );
                echo '</div> <!-- end .postfooter-widget -->';
            }
        }
    ?>
    </div>
</div>

The code above looks a little complicated but it’s essentially telling WordPress to support the use of our new sidebar. We have also added some HTML to display the content in a more structured way. The foreach loop is looping through any content we add to the widget area. Each new widget that gets added from the WordPress admin area will get a custom class so it’s easier to target with CSS and unique from other widgets.

With our new sidebar enabled we need to include it following our blog posts. We need to target our single.php file since it’s responsibility is to display the entire length of a blog post.

Within the file we need to first find the loop and then find the end of the container encasing the loop. Just after our post content is displayed we need add some PHP to get our new widget sidebar area to display.

Open your single.php file and look for the WordPress loop:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 // Content goes here
<?php endwhile; else: ?>
<?php endif; ?>

Look inside the loop like above and find where the content is. Once you do add the line below after it.

<?php get_sidebar('postfooter'); ?>

You’ll notice we passed the word postfooter to the php get_sidebar call. You might also notice that the file we created earlier was named sidebar-postfooter.php. This is not a coincidence. WordPress is smart and will use its knowledge to traverse through your theme to find any files associated with the sidebar. Since we passed postfooter to the function, WordPress knew to include the contents of that file into our single.php file. Cool!

Now we test. I’ll head to the WordPress admin area and create a new blog post to show by example. Below you’ll see the blog post in it’s entirety. Notice our new sidebar has been included directly following our content but before the comments area of our blog post. The red border isn’t part of the design but just an annotation to show you the new addition.

Success! The Newsletter subscription signup is in working order. Style away and call it a day!

From here we can style up our Newsletter form to make it a bit more flashy so it stands out more. Since you might be following along using a different theme I’ll leave this task up to you.

Conclusion

We’ve come a long way to include such a simple element to our blog but the return on investment can be worth all the hard work. Adding a newsletter to your blog is one of the greatest forms of marketing you can do for yourself or your business. In this tutorial we included a simple widget following a blog post but you can also go as far as including a widget or custom field anywhere on your site. Be sure to refer to the small list I created earlier for ideas of the best places to include a newsletter signup form.

Article thumbnail image by totallyPic.com / shutterstock.com