I’m so thrilled with the response to my last video – and a got a lot of questions about how I made the elusive horizontal opt-in.
I used widgets to hold my newsletter sign-up code – There are several widget areas already available for use in this particular theme (Parallax Pro Theme from studiopress.com). and I added another widget to specifically hold my interior page signup form.
Steps to adding a widget & newsletter opt-in
- in your functions.php file, register a new widget. Give it a name and id that makes sense to you (in this case, header newsletter)
genesis_register_sidebar( array( 'id' => 'header-newsletter', 'name' => __( 'Header Newsletter', 'parallax' ), 'description' => __( 'This is header newsletter area.', 'parallax' ), ) );
- Write a function to display the widget (in this case, I didn’t want to show this widget on the home page, so I hid it)
- Hook the function where you want it to execute (in this case, I wanted it to display after the header and before the site content). Use the Genesis hook reference chart to determine what element you want hook it to.
- Paste your newsletter code into the widget
- Style the look of the newsletter boxes using CSS – to make the widget sticky, use “fixed” positioning.
function parallax_newsheader_genesis() {
// Don't display on home page
if ( is_home() ) {
return;
}
// display on other pages
else {
genesis_widget_area( 'header-newsletter', array(
'before' => '<div class="header-news">',
'after' => '</div>',
) );
}
}
add_action( 'genesis_after_header', 'parallax_newsheader_genesis' );
webly says
You’re a life saver Michelle. I’ve been wanting to code one of these but lost patience asking or trying to figure out.
Very useful tip.
Michelle Martello says
Awesome Webly!
Ellissa says
Great tutorial and a stunning site Michelle! I’ve recently switched from Woo to Genesis and I am just in love with the framework!
Michelle Martello says
Thanks so much Ellissa – glad you’re enjoying Genesis – it has certainly sped up my workflow!
Siddiqi Ray says
What a genius example of a “Generous Newsletter”! I don’t even write code (I’m photographer, as you know because you designed my sight: http://www.au-ray.com) However, I’ve forwarded this sight to clients who are looking to build educational video. You are the perfect example of a professional who cares about other’s development and gives freely of your expertise.
AMAZING.
Michelle Martello says
Thanks so much Sid! So appreciate your support!
Donnie says
This is awesome. I updated my functions.php file and everything seems to be working ok.
I’m using the “E News Extended” plugin in the newly created widget area to match the opt-in I have in my sidebar and after a post.
At the end of this fantastic article you say “Style the look of the newsletter boxes using CSS – to make the widget sticky, use “fixed” positioning.”
What would some simple css look like that would fix how wonky the e-news extended plugin looks in this widget area.
You can see here: http://donnielaw.com/test-post/
Thanks again for this tutorial!
Michelle Martello says
Hi Donnie – I’ll be honest, I never use e-news extended. I tend to hand-code my opt-ins using the code provided by mailchimp (or other provider). That way I can remove any extraneous code bits I don’t need. What you can do is use Firebug or Chrome Developer Tools to determine the name of the specific elements and give the input box and submit buttons % widths in your CSS. (you can see in my css below how I did the same thing to control the spacing of the input boxes.)
#newsletter form input[type="text"],
#newsletter form input[type="email"]
{width:30%;font-size:22px;background:#b37b0b !important;color:#fff !important;padding:10px !important}
#newsletter input[type="submit"]{width:15% !important;font-weight:bold;padding:14px}
Donnie says
Thanks for the quick response! I’ll mess around with this and see what I can figure out.
Bob Hafemeister says
Hi Michelle,
Great tutorial!
I totally agree with you about not using plugins when possible, much more streamlined.
Could you share the code you used in the opt-in text widget?
Regards
Bob
Casey Choate says
Thanks so much for this! Any chance you could create a post about how to create an opt in box like this using css or perhaps share the css you used?
I’m using Parallax Pro as well and I’m having a hell of time with this!
Michelle Martello says
Hi Casey – you can see the CSS by peeking at my style.css file – Just view source on any page (in Chrome, go to View > Developer > View Source) and look for the link to the style.css file – then you can see anything I’ve done on the site (this is how you can find how anybody styles anything – while you can’t easily view the functions.php file, css files are open for anyone to view.) – I also recommend using Chrome web developer inspector tool – that makes it easy to see how each object is styled.
Casey Choate says
Hi again. I’ve figured out how to style my enews widget. The thing I’m having a difficult time with though, is making my front page opt in look like yours.
I’m assuming that you somehow made home-section-2 the same size as your opt in form. How’d you do that?
Michelle Martello says
Hi Casey – I sized the block using CSS to fit it by adjusting the margins and padding – hope that helps! Each block has specific paddings/margins you can adjust manually in the stylesheet.
Chrissy says
Hey stranger. Thanks a bunch for putting together this tutorial! I was working on putting a more in-depth tutorial together for one of my courses and this helped tremendously! I did it slightly differently but got it to work!
I totally see why you didn’t put the opt-in below the header on the home page – Parallax Pro makes it kinda wonky! Here’s the final result on my test site http://wpsimfilied.net. I used the Magic Action Box plugin. I have a love/hate relationship with Genesis eNews that’s bordering on hate because it’s so limiting!
Thanks again Michelle! See you in DSS!