Genesis by StudioPress is highly customizable framework, you can easily customize your theme using simple visual hooks. Most of the Genesis tutorials include the use of Genesis visual hooks even to make minor changes. In this tutorial, I am going to make use of Genesis visual hooks to show you How to Add a Horizontal Opt-in Form in Genesis.
Post updated on 13th April, 2014 for some CSS improvements.
A brief view of the steps that we are going to follow:
- Registering a custom widget area in child theme
- Placing the custom widget area below single posts
- Adding the subscribe box or opt-in box to registered widget area
- Customizing the widget according to child theme
How to Register Widget Area
In this step, we will register a custom widget area below the post, so that we can place the opt-in form code in that widget later. Open theme editor by going to dashboard > appearance > editor on your blog and Add the following code in functions.php of your child theme. This will register a new widget area called Below Post as shown screenshot.
How to Place Widget After Single Posts
Further add the following code in functions.php, where genesis_entry_footer is a Genesis visual hook, you can refer to visual hook guide to place the widget anywhere you like.
Please note that HTML5 themes use different visual hooks, as following
Pre-HTML5 Hook Location
New HTML5 Hook Location
We are using new HTML5 hook reference genesis_entry_footer as our theme is based upon HTML5. I want to display the opt-in form below single posts only, I will be using is_single() WordPress conditional tag. This conditional tag will hide this opt-in form from homepage, category pages and archive pages.
Adding the Genesis Subscribe box
I am using MailChimp as my email service provider, I am using the following code to integrate MailChimp with after post opt-in form.
*Replace form action URL by your own action URL.
Customizing The Opt-in Form
However if you have knowledge of CSS, you can stylize your opt-in form according to your theme.
Here is the result :
If you are facing any difficulties with the tutorial or any step is not clear, feel free to comment below.