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' );
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.
Awesome Webly!
Great tutorial and a stunning site Michelle! I’ve recently switched from Woo to Genesis and I am just in love with the framework!
Thanks so much Ellissa – glad you’re enjoying Genesis – it has certainly sped up my workflow!
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.
Thanks so much Sid! So appreciate your support!
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!
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}
Thanks for the quick response! I’ll mess around with this and see what I can figure out.
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
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!
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.
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?
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.
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!