• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Add Feature Box To Genesis Home Page

Adding a feature box in any Genesis child themes is easy.

Considering your homepage is generally the most visited page on your site, it makes sense to display an opt-in box on this page.

Another consideration is the fact that site visitors generally only spend 20% of their time below the fold.

email opt in box feature box

Clearly, adding a feature box on your home page above the fold is an effective way to increase email subscribers to your site.

In this tutorial, i’ll provide the PHP code which you can paste at the end of your child themes functions.php file and the CSS code you can modify, or use as is in your style.css file.

Register New Widget On Home Page

This code includes a conditional tag so the widget area only outputs content on the home page.

You could remove the line of code which includes the conditional tag to display your feature box site wide.

You could change also use another hook if you want your featured box to display in another hook location in your theme.

Next step is to style your feature box using CSS code

Style feature Box

I have used modified code from Brian Gardner’s tutorial and added several new declarations.

You could also add a box shadow effect by adding this CSS code to the feature box declarations:

box-shadow: 0px 0px 0px 20px #000000;

Simply change the values for each side of the box and change the shadow color as well if you like.

Learn more about creating box shadow effects in WordPress.

Genesis eNews Extended Plugin

I have used the Genesis eNews extended plugin to display the email opt in form.

Creating Feature Box Content

Simply create your content using your WordPress editor and paste it into the eNews extended plugins text field.

You could also use a shortcodes plugin to help with styling your feature box content and web design tools for creating graghics and editing images.

What Do You Think?

Do you use a feature box with email opt in form to increase subscribers to your site?

What do you think is the best location to display your box?

Reader Interactions

Comments

  1. diego says

    October 5, 2014 at 4:11 pm

    This worked great!
    But now I would like to ask you if it is possible to add the Primary Menu after the Feature Box.
    If so, how would you do this?

    Thank you for your great work!

    Log in to Reply
  2. Andreas says

    September 19, 2014 at 1:41 am

    Hi πŸ™‚
    seems awesome that feature box. But is it responsive? I’d use it for an epik theme right now i have plugmatters but in the free lite version you have only 2 templates (one is not working responsive, so you have ONE template…) and that huge box is shown on every page and post. and this is just a bit too much… see

    Would be awesome if you could help, either with YOUR box or the code that would stop that box from showing up on every page i want it only on homepage.

    πŸ™‚ Thank you no matter what
    Andreas

    Log in to Reply
    • Brad Dalton says

      September 19, 2014 at 2:05 am

      All you need to do is add a conditional tag after the function

      if ( is_front_page() )

      This code is already included in the code so not sure what your problem is.

      Log in to Reply
      • Andreas says

        September 19, 2014 at 2:12 am

        πŸ™‚ Brad
        first thanks for the fast answer. I know it is included in YOUR code. At the moment i wanted to know if YOUR optin box was RESPONSIVE
        or if you knew how to get that other box only to show up on the hp
        merci
        Andreas

        Log in to Reply
        • Brad Dalton says

          September 19, 2014 at 2:18 am

          I didn’t add the Media Queries because they’re so simple. Anyone can write CSS.

          What other box?

          Log in to Reply
          • Andreas says

            September 19, 2014 at 2:26 am

            well, i dont CSS is still a foreign language to me.
            so the answer would be NO its not responsive right?

            and the “other” box is plugmatters and i linked you to my site so you could see it showing up just on every page and post

            …
            merci
            Andreas

          • Brad Dalton says

            September 19, 2014 at 2:59 am

            I suggest you learn some CSS

            I don’t provide support for third party plugins.

            I also don’t write custom code on demand for free.

  3. diego says

    August 2, 2014 at 5:45 am

    Hi Brad,

    I followed this tutorial and it is great.
    I have some things that I cannot change thou:

    1) I used visual editor (HTML) inside the widget created but what I saved there is not the same that I see at the website (is not align, it does not appear with the bullet points, etc).

    2) How do I make the size of the box smaller or better tight to the content?

    Thank you very much!
    Diego

    Log in to Reply
    • Brad Dalton says

      August 2, 2014 at 6:16 am

      You’ll need to use Firebug to find the classes and add some CSS to style it:

      Here’s a start which styles the list only:

      .featured-box li {
      	list-style-type: disc;
      	margin: 10px;
      	word-wrap: break-word;
      }
      Log in to Reply
  4. Kitty says

    October 17, 2013 at 1:03 pm

    Hi Brad,

    Is this for the main content of the home page? or the sidebar? Confused as usual.
    πŸ™‚
    ~Kitty

    Log in to Reply
    • Brad Dalton says

      October 18, 2013 at 7:21 am

      Main content area

      Log in to Reply
      • Kitty says

        October 18, 2013 at 2:59 pm

        Thanks Brad.

        Log in to Reply
  5. Melissa says

    August 9, 2013 at 5:09 pm

    Hi Brad πŸ™‚
    Got this working great on my Metro studiopress theme.
    Just now wondering how I can make the name, email and submit button all on one horizontal line?

    also In your example you have the contents of the feature box with a wordpress image on the right. How might I insert an image on the right too?

    Any help is greatly appreciated,
    melissa

    Log in to Reply
    • Brad Dalton says

      August 9, 2013 at 7:03 pm

      I think you’ll need to change the width for the input field so it moves in line with the others.

      I’d inspect it using Firebug to work out what work.

      To insert the image, i simply added it in a new post draft and aligned it to the right then pasted the HTML into the eNews extended widget.

      Log in to Reply
  6. David says

    July 1, 2013 at 10:32 am

    This Was great Brad, thanks!

    Any idea how to make it responsive on mobile? I managed to tweak the CSS a bit, but I’m a real noob… Any help you could suggest would be appreciated!

    Here’s what I have (it’s pretty much exactly as you posted i think…)
    .featured-box {

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background-color: #00;
    color: #0;
    border: 2px solid #ddd;
    border-radius: 10px;
    margin: 0 auto;
    width: 870px;

    overflow: hidden;
    padding: 20px;
    }

    .featured-box h4 {
    font-size: 20px;
    color: #0000;
    }

    .featured-box p {
    padding: 0 0 20px;
    }

    .featured-box ul {
    margin: 0 0 20px;
    }

    .featured-box ul li {
    list-style-type: disc;
    margin: 0 0 0 30px;
    padding: 0;
    }

    .featured-box .enews p {
    padding: 0 0 10px;
    00
    }

    .featured-box .enews #subscribe {
    padding: 0;
    }

    .featured-box .enews #subbox {
    background-color: #fff;
    margin: 0;
    }

    .featured-box .enews input[type=”submit”] {
    background-color: #FF7530;
    -webkit-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    ;
    }

    Log in to Reply
    • Brad Dalton says

      July 1, 2013 at 11:34 am

      To be honest i have no idea Dave but glad you found it useful.

      Sorry i can’t help you with that part of design at the moment.

      Log in to Reply
  7. Kieran says

    June 27, 2013 at 4:56 am

    Hiyah Brad!

    I am able to post things into the feature box but the output to my site is all just hard left aligned without any of styling of the rest of my site. Is that supposed to happen?

    Do I need to customise the feature box CSS to make it output like a normal post would? If so… how do I actually do that?

    Log in to Reply
    • Brad Dalton says

      June 27, 2013 at 6:26 am

      Hi Kieran

      I styled and aligned the content in the WordPress editor and then pasted the HTML for the content into a widget.

      There’s a bit of playing around to get it right but its not very difficult.

      You could style it using CSS however this requires some knowledge of coding.

      If you’re a Genesis user, you could post a question the the Studio Press community forum and link to your site as the help there is very good.

      Another option is simply to use the Genesis eNews extended widget and add HTML content to it.

      Hope that helps.

      Log in to Reply
  8. Winston says

    April 4, 2013 at 12:27 am

    Hey Brad.. Would you happen to have a post on how to customize the appearance of the enews optin after its been added to the widget?

    Log in to Reply
    • Brad Dalton says

      April 4, 2013 at 12:52 am

      Hi Winston. The best way to do that is to use the Firefox Firebug extension and change the values for different CSS properties in real time using the browser extension. You can also add new properties and remove existing one’s.

      Log in to Reply
  9. Winston says

    April 4, 2013 at 12:05 am

    Hey brad,

    I finally got it to work but only on another domain with a fresh install of the theme. I think possibly the fact that I modified the header via your other tutorial might have somehow interfered with the feature box mod.

    It doesn’t seem like it should but that’s all I can think of.

    Log in to Reply
    • Brad Dalton says

      April 4, 2013 at 12:49 am

      Yes that could be the case if you’re using the same hook or function name.

      Log in to Reply
  10. Winston says

    April 3, 2013 at 12:58 am

    Hey brad thanks for the write up. I followed Brians tutorial and now yours and the feature box shows up in the widget area but if I add a text widget inside and write something, my home page still looks the same.

    Any idea what could be causing this?

    Also, today is the 2nd, you wrote this post yesterday and it’s already ranking. Not bad.

    Log in to Reply
    • Brad Dalton says

      April 3, 2013 at 2:11 am

      Thanks Winston! Use the Genesis eNews Extended plugin and paste your text inside that and see what happens. If you’re still having trouble, come back and post a link to your site and i’ll try and fix it for you.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.