WP SITES

Log in

Add Feature Box To Genesis Home Page

—

by

Brad Dalton

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?

Comments

24 responses to “Add Feature Box To Genesis Home Page”

  1. diego Avatar
    diego

    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!

  2. Andreas Avatar
    Andreas

    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

    1. Brad Dalton Avatar
      Brad Dalton

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

      [code]
      if ( is_front_page() )
      [/code]

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

      1. Andreas Avatar
        Andreas

        🙂 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

        1. Brad Dalton Avatar
          Brad Dalton

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

          What other box?

          1. Andreas Avatar
            Andreas

            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

          2. Brad Dalton Avatar
            Brad Dalton

            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 Avatar
    diego

    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

    1. Brad Dalton Avatar
      Brad Dalton

      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:
      [code]
      .featured-box li {
      list-style-type: disc;
      margin: 10px;
      word-wrap: break-word;
      }
      [/code]

  4. Kitty Avatar
    Kitty

    Hi Brad,

    Is this for the main content of the home page? or the sidebar? Confused as usual.
    🙂
    ~Kitty

    1. Brad Dalton Avatar
      Brad Dalton

      Main content area

      1. Kitty Avatar
        Kitty

        Thanks Brad.

  5. Melissa Avatar
    Melissa

    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

    1. Brad Dalton Avatar
      Brad Dalton

      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.

  6. David Avatar
    David

    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;
    ;
    }

    1. Brad Dalton Avatar
      Brad Dalton

      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.

  7. Kieran Avatar
    Kieran

    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?

    1. Brad Dalton Avatar
      Brad Dalton

      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.

  8. Winston Avatar
    Winston

    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?

    1. Brad Dalton Avatar
      Brad Dalton

      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.

  9. Winston Avatar
    Winston

    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.

    1. Brad Dalton Avatar
      Brad Dalton

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

  10. Winston Avatar
    Winston

    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.

    1. Brad Dalton Avatar
      Brad Dalton

      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.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.