WP SITES

2896

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

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

  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!

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

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

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

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

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

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

  5. 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. 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. 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. 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?

    • 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

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

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

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

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

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

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

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

Leave a Reply