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

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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.

Reader Interactions

Comments

  1. Jamie Lynch says

    January 14, 2016 at 4:45 am

    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….”)

    Log in to Reply
    • Brad Dalton says

      January 14, 2016 at 4:51 am

      Add an array like this

      if ( is_page(array('1','2','3')))
      Log in to Reply
      • Jamie Lynch says

        January 14, 2016 at 6:33 am

        Perfecto! Thanks!

        Log in to Reply
  2. Stephen Mayall says

    September 15, 2014 at 12:58 pm

    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?

    Log in to Reply
    • Brad Dalton says

      September 15, 2014 at 2:29 pm

      Change

      is_singular('post')

      to

      is_front_page()

      and

      genesis_before_content

      to

      genesis_before_content_sidebar_wrap
      Log in to Reply
      • steve says

        September 15, 2014 at 10:12 pm

        Thanks Brad

        Log in to Reply
        • Brad Dalton says

          September 15, 2014 at 10:28 pm

          No worries Steve

          Log in to Reply
  3. Tammy says

    September 5, 2014 at 5:49 pm

    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!

    Log in to Reply
    • Brad Dalton says

      September 5, 2014 at 7:11 pm

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

      Log in to Reply
      • Nicole R says

        September 19, 2014 at 2:58 am

        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?

        Log in to Reply
        • Brad Dalton says

          September 19, 2014 at 3:05 am

          Hello Nicole

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

          Log in to Reply
          • Nicole R. says

            September 19, 2014 at 9:47 am

            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.

          • Brad Dalton says

            September 19, 2014 at 1:26 pm

            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.

          • nicole r says

            September 19, 2014 at 12:53 pm

            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?

          • Brad Dalton says

            September 19, 2014 at 1:23 pm

            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.

          • Nicole R says

            September 19, 2014 at 1:34 pm

            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).

          • Brad Dalton says

            September 19, 2014 at 1:39 pm

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

  4. Mathias says

    August 8, 2014 at 3:14 am

    Thank You so much. Very useful and helpful guide.

    Log in to Reply
  5. nhkduy90 says

    May 28, 2014 at 8:20 am

    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.

    Log in to Reply
  6. Carrie says

    May 18, 2014 at 11:05 am

    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!

    Log in to Reply
  7. Carrie says

    May 18, 2014 at 10:24 am

    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.

    Log in to Reply
  8. Sharon says

    May 14, 2014 at 9:33 pm

    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?

    Log in to Reply
    • Brad Dalton says

      May 15, 2014 at 1:45 am

      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

      Log in to Reply
      • Sharon says

        May 15, 2014 at 1:49 am

        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)?

        Log in to Reply
        • Brad Dalton says

          May 15, 2014 at 2:03 am

          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.

          Log in to Reply
          • Sharon says

            May 15, 2014 at 2:12 am

            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! 🙂

          • Brad Dalton says

            May 15, 2014 at 2:52 am

            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. Mike says

    January 12, 2014 at 3:25 pm

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

    Log in to Reply
    • Brad Dalton says

      January 12, 2014 at 8:16 pm

      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 ++.

      Log in to Reply
    • Brad Dalton says

      May 15, 2014 at 1:48 am

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

      Log in to Reply
  10. Zee says

    December 11, 2013 at 6:01 pm

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

    Log in to Reply
    • Brad Dalton says

      December 12, 2013 at 12:40 am

      You’re welcome Zee

      Log in to Reply
  11. Debbie Rivero says

    August 21, 2013 at 8:43 pm

    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.

    Log in to Reply
    • Brad Dalton says

      August 21, 2013 at 10:01 pm

      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.

      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