Add Widget Area Before Content in Genesis

You can easily change the conditional tag or install the Widget Logic plugin to control where you want to output your widget content.

You can also use this code to add a widget after your content area or after your posts in single posts or all pages of your site.

Add Widget Before Content On All Single Posts

Add Widget Before Content On Home Page

Add Widget Before Content On Specific Page

genesis_register_sidebar( array(
	'id'          => 'before-content',
	'name'        => __( 'Before Content', 'wpsites' ),
	'description' => __( 'Content Displays Before Specific Pages Content.', 'wpsites' ),
) );

add_action( 'genesis_before_content', 'wpsites_widget_before_content' );
function wpsites_widget_before_content() {
if ( is_page('007') && is_active_sidebar('before-content') ) {
	genesis_widget_area( 'before-content', array(
		'before' => '<div class="before-content" class="widget-area">',
		'after'  => '</div>',
	) );
    }
}

Replace the post/page i.d (007) with your own.

Change Hook Position

To change the position your widget displays, simply change genesis_before_content in the code to any other hook position.

Video Tutorial – How To Add Widget In Genesis Theme

Conclusion

There’s so many variables when it comes to adding a widget area in WordPress that its impossible to cover all bases.

Once you have a basic understanding of conditional tags, your themes hook locations and basic CSS, you can modify this code to suit your own needs.

36 responses to “Add Widget Area Before Content in Genesis”

  1. Jamie Lynch Avatar
    Jamie Lynch

    Hi Brad,
    Great code…Add Widget Before Content On Specific Page! Thanks!
    I can’t seem to figure out how to list 3 or 4 other pages that I’d like to also use this code on.
    In this part of the code: if ( is_page(‘7’) &&
    I tried…. if ( is_page(‘7’, ‘111’, ‘3’) && but this doesn’t work.
    Here’s the page it did work on: http://t2energysolutions.com/benefits/. It’s the section above the main content (“creating total transformations….”)

    1. Brad Dalton Avatar
      Brad Dalton

      Add an array like this
      [code]
      if ( is_page(array(‘1′,’2′,’3’)))
      [/code]

      1. Jamie Lynch Avatar
        Jamie Lynch

        Perfecto! Thanks!

  2. Stephen Mayall Avatar
    Stephen Mayall

    Hi Brad great post, I just want to add a content area below my home page only not other pages will this work for that? what size is the content areas?

    1. Brad Dalton Avatar
      Brad Dalton

      Change [code]is_singular(‘post’)[/code] to [code]is_front_page()[/code] and [code]genesis_before_content[/code] to [code]genesis_before_content_sidebar_wrap[/code]

      1. Thanks Brad

        1. Brad Dalton Avatar
          Brad Dalton

          No worries Steve

  3. Hi Brad,
    I love it, but I have two questions:
    1. Is there any way to make the Widget Before Content On All Single Posts NOT full width? I’d like it to not reach above my sidebar. Currently, it pushes my sidebar downwards.
    2. The CSS styling doesn’t work for me. When I look at it in Firebug, the widget is showing as “element” – any tips on what I’m doing wrong?
    Thanks!

    1. Brad Dalton Avatar
      Brad Dalton

      1. Use the genesis_before_loop hook rather than the genesis_before_content hook
      2. Change the CSS or change the class.

      1. I tried the genesis before loop hook but now the slider isn’t visible at all. I “added” the slider to the Before Loop section under Widgets, but nothing is populating. Thoughts?

        1. Brad Dalton Avatar
          Brad Dalton

          Hello Nicole

          Which code snippet did you use, where did you paste the code and what did you want it to do exactly?

          1. I used the code from here: https://gist.github.com/braddalton/5894024
            and copy and pasted it at the bottom of my child theme’s functions.php file. After that I went to the Widgets section and added the slider underneath the Before Loop Widget location.

            I’m trying to have the slider look similar to the one on this site: Where the slider is the same width as the blog posts. With the sidebar still on the right.

            I reached out to my theme developer (who is also lifeonvirginiastreet’s developer), and she said since I purchased a different theme than that other blogger, that a code adjustment would be the only way to fix.

          2. Brad Dalton Avatar
            Brad Dalton

            You need to add support for using shortcodes in widgets.

            I would hook the slider in using the sliders template tag and use the genesis_before_content_sidebar_wrap hook rather than create a widget and add a shortcode.

            That’s why i asked you the 3 questions.

          3. So I figured out how to place the widget where I want it, but now I can’t figure out the CSS styling. I want the sliding pictures to be the width of the entire “content” area. Does that make sense?

          4. Brad Dalton Avatar
            Brad Dalton

            Depends on your theme but i would use the genesis_after_header hook for that.

            Also make sure the width of each image matches the width of your content sidebar wrap.

            What slider plugin are you using?

            I would use the Easing slider or Soliloquy lite plugin.

          5. I’m using the Genesis Responsive Slider. And it’s pulling my most frequent 5 posts. I think it’s formatting the widget the same way my posts underneath are being formatted. See the image is the same width.

            Take a look at my site and maybe you’ll see what I’m talking about (simply-nicole.com).

          6. Brad Dalton Avatar
            Brad Dalton

            You will need to modify the CSS for the widget and slider to get it to look the way you want.

  4. Thank You so much. Very useful and helpful guide.

  5. nhkduy90 Avatar
    nhkduy90

    Dear sir,
    Can you help me?

    I want to create a widget before post but when using your code on my Genesis child theme (3 column), it’s not working. Only widget before single post worked.

    I hope you can login to my website and take a look.

    Thank you so much.

  6. Carrie Avatar

    Hi Brad,

    Sorry about my previous comment. I think I figured it out by searching through the correct hooks and conditional tags. Thanks for the very useful information above!

  7. Carrie Avatar

    Hi Brad,

    I am trying to place a before content widget just above the content (not span all the way across above the sidebar). Is it best to use this code and adjust the css or is there another php code that doesn’t span the entire page?

    Additionally, I would like the widget area to show on both the home page (main blog roll) and single posts pages. Is it possible to place both sets of code above in my functions file, or is there a combined piece? Thanks in advance.

  8. Sharon Avatar

    The code for the HOME PAGE doesn’t work for me either. I added the code in the functions.php at the end like instructed into the Genesis Sample theme and I get errors as well.

    Parse error: syntax error, unexpected ‘}’, expecting ‘)’ in /home/designby/public_html/demo2/wp-content/themes/genesis-sample/functions.php on line 45

    For it to display on the home page only don’t we have to create another php (ie: home-page.php) file and put more coding in there?

    1. Brad Dalton Avatar
      Brad Dalton

      Sorry Sharon. You are right.

      I have now updated the code and tested all 3 snippets.

      Please try again and copy the code to your functions file.

      Thanks very much for alerting me to the faulty code. Much appreciated!!

      The code uses hooks which already exist in the different template files.

      You can learn more here if you like http://wpsites.net/?s=hooks+in+custom+functions

      1. Sharon Avatar

        Thanks Brad!!! I actually found a code that worked perfectly without having to rely on another php file.

        Do you have a good tut for toggle media menu (more specifically header right menu)?

        1. Brad Dalton Avatar
          Brad Dalton

          The Ambiance Pro theme includes the code for this and you can check out the result on the StudioPress demo which looks really good in my opinion.

          I’ll write a post about how to add this to the Genesis Sample theme shortly.

          That’s one of the big advantages of owning all the themes is you get access to all the code from existing and new themes which all runs on Genesis so you can mix and match features.

          1. Sharon Avatar

            I wish I could own all the themes. I always have just enough to get what I need LoL I have peeked at several themes working on the site I am right now. LOVE that about Studiopress Themes!!! To all your readers… THAT is the best way to learn Genesis Framework. This site, SP’s snipplets and other themes are go tos for creating child themes!!

            Thanks Brad!! You ROCK! 🙂

          2. Brad Dalton Avatar
            Brad Dalton

            In regards to adding the menu toggle effect to the header right widget, the coding solution will vary per theme because its includes a fair amount of CSS for both the menu toggle and the shrink effect.

            There’s also CSS foe Media Queries which need to be added from the Ambiance Pro theme to whatever theme you choose to use.

  9. Every time I paste this code into my site it errors out. Any idea?

    1. Brad Dalton Avatar
      Brad Dalton

      No one else has ever had a problem with this code.

      Where did you paste the code Mike?

      You can’t just paste it anywhere and expect it to work! hahaha

      The tutorial clearly states to paste it at the end of your child themes functions file using a text editor like Notepad ++.

    2. Brad Dalton Avatar
      Brad Dalton

      Sorry Mike. You where right. Not sure what happened but sincere apologies and the code has now been updated and tested.

  10. Hi Brad,
    This is perfect – thank you so much!

    1. Brad Dalton Avatar
      Brad Dalton

      You’re welcome Zee

  11. Debbie Rivero Avatar
    Debbie Rivero

    Brad,
    Want to thank you for this very helpful information. I am swooning over your Pastebin. Genius! I am a new user of WP and Genesis and so appreciate the knowledge shared by experienced people like yourself.

    1. Brad Dalton Avatar
      Brad Dalton

      Thanks Debbie.

      I also have 639+ code snippets on Github Gists that may help as well.

      I like to test these snippets locally on different themes as i have all the SP child themes installed locally for testing.

Was This Tutorial Helpful?