How To Add Newsletter Box Below Each Post of Your Website?
October 3rd, 2016 | by Ravi Chahar || 10 Comments |
We all know that email marketing is one of the leading tools to drive traffic to your blog. You may have noticed that people add subscription form to their website.
What would you do if you want to add newsletter box below each post? There are many WordPress themes which have the space below every single post to add the newsletter.
But if your theme doesn’t have any then you have to add that space manually. In this tutorial, I will guide to create the space and to add subscription box below each post of your website.
Edit functions.php File To Add Newsletter Box below Each Post?
You may be aware of the WordPress theme file structure in which many files and folders are present. A theme consists of many files from which functions.php handles and creates all the function needed to develop a WordPress theme.
If you have a little bit of knowledge about theme development then you would know how to add new sidebar in WordPress theme.
Do you know how to add footer widget in WordPress theme? The same procedure should be followed here.
Check functions.php file from the theme folder.
If you find the code generating the sidebar or the footer then you can use that function otherwise, you can create your new function.
Let me show you the code.
register_sidebar( array(
‘name’ => ‘Newsletter-Box’,
‘id’ => ‘newsletter’,
‘before_widget’ => ‘<div class=”widget-item”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h4 class=”widget_heading”>’,
‘after_title’ => ‘</h4>’
));
After adding this code in the functions.php file, you will see a space in the WordPress widget area like you see the sidebar and the footer widgets.
But the work hasn’t completed yet. To show the space, you have to call that function under each post. It can be done by adding a code in the single.php file.
After the completion of the loop, you can use the code shown below.
<div class=”news_box”>
<?php dynamic_sidebar(‘newsletter’); ?>
</div>
<?php endif; ?>
You can use this code wherever you want to add newletter box below each post. Whether you want to show it below the author box or the related box. Choice is yours.
There is another way to add newsletter in WordPress.
You can create a new file “sidebar-newsletter.php” in your theme folder. Instead of adding the code in the single.php file, you can add it in this new file.
After that, you can call this file below every post in the single.php file. Use the code.
This code will show the output of the code added in the newsletter.php. You can add this one line of the code wherever you want to show the box space for the newsletter.
As you may have noticed that there is an ID given “newsletter“. It is used to call the box everywhere. Now, you can add the newsletter code in this box from the widgets area and a new subscription form will display below each post.
NOTE:- You have to add some CSS so that you can clear the floats.
div.news_1 { clear: both;}
With the use of the above code, a space will be there below each post, now you add the subscription form code and show the newsletter box.
Can You Now Add Newsletter Box Below Each Post In WordPress?
Though the choice is yours whether you choose the first option or the second but still, it’s always recommended to create a new file for a new space.
A good developer never conflicts the code. It’s important to use the friendly code which can be understood by everyone.
You can add newsletter below each post by creating a new file with the name you want. But make sure that you use the same ID everywhere. It’s because, in the code, ID is used to call the function.
If you still have any doubt then feel free to ask.
10 comments
Leave a Reply
Hi Ravi,
It never ceases to amaze me how customizable WordPress is. What a great blogging platform.
Not being very technical I’ve usually just stuck to finding plugins, but your tips explain very well how to do more complicated changes.
Joy – Blogging After Dark
Hey Joy,
WordPress is a platform which is yet to be explored by many bloggers. You can do a lot of things with this platform. We all know that email marketing is important for which newsletter box is needed.
I am happy that I could help you.
Have a wonderful day.
~Ravi
This is something new to learn I have to try this, but before this, I am using Jetpack plugin source code at the end to shoe newsletter box for each post a simple way to. BTW I am going to try this out thank you…
Hey Prince,
The above-shown code would create the space below each post. And you can show it anywhere you want. Like you add the recent post, popular widget, you would be able to add the newsletter code from the widgets area only.
It would require the editing process to your current theme.
Happy to know that you found it helpful.
Thanks for stopping by.
Enjoy the day.
~Ravi
Hello Ravi,
WordPress is so flexible, and you are making simpler for the WP users to extend their WP-powered blog’s functionality.
Keep up the good work
Hey Atish,
There are many things you can do with WordPress. Just with the use of simple WordPress functions, everything would be so easy.
Thanks for stopping by.
Enjoy the day.
~Ravi
Hey Ravi,
It is nice you shared this tutorial. Although I have no idea how to implement that procedure you just thought, I will still try my hands on it.
This days you cannot really trust google for constant traffic. It is just a matter of time and they will release a new update which will send so many websites eating grass.
Building an email list will ensure highly targeted and constant flow of traffic.
Hey Isaac,
Email marketing can be really helpful if you do it properly. For which, you have to build an email list by showing the newsletter box to your website.
You may have noticed, most of the websites show it below the posts. You don’t need to worry about Google updates, just focus on the quality of the content.
~Ravi
Hi Ravi,
I tried to do this via my Child theme but it broke my site and I had to remove it… any tips?
Nisha
Hey Nisha,
First, create the widget area in your theme and then try to put the code of the newsletter. Check the code on an offline server before making it live.
Thanks for stopping by.
~Ravi