One question we get all the time is, “how do you add a new widgeted area to Genesis?” With a little bit of code this can be handled with relative ease.
First, this tutorial requires novice to moderate php experience. You will be editing the functions.php file so make sure you have a backup of the file and a way to access your site via FTP, not just the theme editor in the dashboard. If you aren’t sure how to access your site via FTP, please contact your host before continuing this tutorial. They should be able to provide FTP login details. You also need an FTP client like Filezilla, which is free and available for every major operating system.
You also need to know a couple of important functions. genesis_register_sidebar() will register the sidebar and dynamic_sidebar() will display the sidebar. There are several ways to use these functions, but for the sake of simplicity, this tutorial will only cover basic usage.
Important Terms
There are a few important terms used in this article
- Sidebar/Widgeted Area: These terms refer to the exact same thing. Often there is confusion when “sidebar” is used because people assume that it can only mean a portion of the site alongside the content. In both cases, it means any area of the site that uses widgets to display content.
- Widget: This is a WordPress tool that allows users to change and rearrange the content in sidebars. There are several default widgets included with WordPress. Additionally, themes and plugins may add to or replace the default widgets. This allows for significant customization from the site administrator.
Register Your Sidebar
Open your functions.php file to register a new sidebar. Most child themes probably have a few sidebars registered at the bottom of the file. This code can go after the existing code, or at the bottom of the file if there aren’t any sidebars currently registered. You will be using this code.
genesis_register_sidebar( array( 'id' => 'after-content-ad', 'name' => 'After Content Ad', 'description' => 'This is a sidebar that goes after the content.', ) );
These are the 3 most important options.
The “id” must be a unique ID and uses all lower case, no special characters, or spaces. You can use numbers.
The “name” is more flexible, you can use spaces and other characters. This identifies the sidebar in the dashboard.
The “description” is used in the dashboard to help describe where the sidebar will be used.
You can register however many sidebars your theme will need using this function over and over. It is very important that each sidebar have a unique ID and to limit confusion, the NAME should also be different for each sidebar you make.
Display Your Sidebar
Now that you have a sidebar registered, you need to call for the sidebar. In this example we will be loading the sidebar after the content so an add can be inserted via a text widget below the sidebar. You can use the Genesis Hook Reference to pick the right hook for inserting the sidebar. This tutorial will be using the “genesis_after_content_sidebar_wrap” hook. This code will go in the functions.php file.
add_action( 'genesis_after_content_sidebar_wrap', 'child_after_content_ad_sidebar' );
/** Loads a new sidebar after the content */
function child_after_content_ad_sidebar() {
echo '<div class="after-content-ad">';
dynamic_sidebar( 'after-content-ad' );
echo '</div>';
}
If you prefer to use the Genesis Simple Hooks plugin at this point, add this to the “genesis_after_content_sidebar_wrap” field (make sure you enable PHP on that hook).
<div class="after-content-ad">
<?php dynamic_sidebar( 'after-content-ad' ); ?>
</div>
Style Your Sidebar
This is the most subjective part of this tutorial. You might need to make several rules to control how it is displayed on your site and how different widgets look inside your specific sidebar. Since this tutorial is about adding a widgeted area not CSS, this section is only going to cover the most basic CSS rules to show how it works. The sidebar is supposed to be a spot for a banner ad after the content and sidebar. I’m going to apply a clear, which will prevent the various floats used for the content, sidebars, and content sidebar wrap from affecting how this ad space works. I’m also going ot set a specific width, for 728px banner ads, and center it with auto margin.
Open your style sheet (typically style.css) and add this to the bottom of the file.
/* Ad Sidebar
------------------------------------------------------------ */
.after-content-ad {
clear: both;
margin: 0 auto;
width: 728px;
}
That’s it. If you followed these steps you now have a new sidebar in the dashboard. Put a text widget in with ad code for a 728px wide ad and you are done.
Closing Remarks and Additional Examples
It really is that easy to add a new widget area to Genesis child themes. Now you can take this code and with a few small changes adapt it to any part of the theme. Since some people learn by doing, grab the sample child theme and play with adding new sidebars all over the theme. Other people learn by examples, so here are 3 more sidebars you can use in your theme, note the simple differences that make a big difference in where the sidebars go.
Ad sidebar above header
Start by registering a new sidebar in the functions.php file
genesis_register_sidebar( array( 'id' => 'before-header-ad', 'name' => 'Before Header Ad', 'description' => 'This is a sidebar that goes before the header.', ) );
Next, display your sidebar using this code in the functions.php file.
add_action( 'genesis_before', 'child_before_header_ad_sidebar' );
/** Loads a new sidebar before the #wrap */
function child_before_header_ad_sidebar() {
echo '<div class="before-header-ad">';
dynamic_sidebar( 'before-header-ad' );
echo '</div>';
}
Finally, style your sidebar using this code in the style.css file
/* Ad Sidebar
------------------------------------------------------------ */
.before-header-ad {
clear: both;
margin: 0 auto;
width: 728px;
}
Sidebar Before Posts
Start by registering a new sidebar in the functions.php file
genesis_register_sidebar( array( 'id' => 'before-posts-sidebar', 'name' => 'Before Posts', 'description' => 'This is a sidebar that goes before the posts in the #content.', ) );
Next, display your sidebar using this code in the functions.php file.
add_action( 'genesis_before_loop', 'child_before_posts_sidebar' );
/** Loads a new sidebar before the posts in the #content */
function child_before_posts_sidebar() {
echo '<div class="before-posts-sidebar">';
dynamic_sidebar( 'before-posts-sidebar' );
echo '</div>';
}
Finally, style your sidebar using this code in the style.css file
/* Before Posts
------------------------------------------------------------ */
.before-posts-sidebar {
background: #dddddd;
padding: 10px;
}
After Post Subscribe Box
Start by registering a new sidebar in the functions.php file
genesis_register_sidebar( array( 'id' => 'after-post-box', 'name' => 'After Post Box', 'description' => 'This is a sidebar that goes after the posts for a subscribe box.', ) );
Next, display your sidebar using this code in the functions.php file. Note this also includes an if() statement so it only shows on the single post page.
add_action( 'genesis_after_post_content', 'child_after_post_box' );
/** Loads a new sidebar after the post on single pages*/
function child_after_post_box() {
if( is_single() ) {
echo '<div class="after-post-box">';
dynamic_sidebar( 'after-post-box' );
echo '</div>';
}
}
Finally, style your sidebar using this code in the style.css file
/* After Post Box
------------------------------------------------------------ */
.after-post-box {
clear: both;
margin: 10px;
border: 1px dotted #777777;
padding: 10px;
}
Genesis Responsive Header Updated
Genesis Responsive Header
How I Make Custom Fields Easier in Genesis
How I Added Custom Fields to the Genesis Responsive Slider
A Better Home Page
Thanks Nick for this tutorial…Would be kind of enough if you put screen-shots…so that tutorial looks more useful to newbies….
Thanks for the recommendation, I’m not sure what screen shots you would find useful, it is essentially all code. I try to use screen shots where there is something to take a picture of, and use the code markup when I’m using code to make things more accessible. If I know what screen shots would help I’ll consider updating the tutorial.
Hi Nick, thanks for the quick reply…for Instance in this tutorial…
after finishing this “Ad sidebar above header” you can add a screen-shot so that it shows the changes made looks like this…
looking forward for more tuts…on customizing genesis
ah, ok, I can see where that might help. This code is more “theoretical” showing the ways that this can be done. I don’t have screen shots like that because I haven’t added those sections to this site, as you can see.
yeah…hope in coming tutorials….screenshorts will be there….thanks again..for all the tuts..
you should wrap the register_sidebar inside a function and hook into widgets_init
Paul,
Generally I think that is a good idea, but within your average Genesis child theme, the sidebars are added at the bottom of the functions.php file, and in order to make it easier to people to adapt to existing themes, I’d prefer to keep with the existing markup in the tutorial.
For users interested in how this work work, you could use this code in place of the genesis_register_sidebar() function in the opening code
add_action( 'widgets_init', 'child_widgets_init' ); /** Registers Sidebars on the widgets_init hook */ function child_widgets_init() { genesis_register_sidebar( array( 'id' => 'after-content-ad', 'name' => 'After Content Ad', 'description' => 'This is a sidebar that goes after the content.', ) ); }Nice post Nick. I have already recommended your website to internees working in my website development company.
I have this in concept. I am using this to try to add a particular sidebar to a template page – I don’t want to affect the other pages with a sidebar which is using the default.
I followed above, used the genesis simple hooks to add to the genesis_before_sidebar_widget_area Hook
Got it working. But, of course it showed on every page with a sidebar. So I went into my custom template page (testimonial.php)
and took out:
and added:
So, on the testimonial page, this pulled the text widget from my widget area, but it left out all styling/css I had. However, the sidebar is still showing on all the other pages that use the sidebar.
I can supply you with two link examples if I am explaining it poorly, but I guess my first question is can I use this method to have template pages (my testimonial.php) page show a completely different sidebar/widget than other pages that use the default sidebar widgets.
Or is there a better way to do this?
Nick
Sorry about the confusion but I just managed to accomplish what I needed via the genesis simple sidebars plugin.
If I have trouble with that, I will post it to the forums. Glad to have found this site though, works well in conjunction with the forums.
Cheers
Natalie, Thanks for taking the time to comment and I’m glad you found a working solution.
Thanks for the great tutorial Nick. This is the first I’ve found that didn’t assume I already had a basic knowledge. You break things down in a way that makes it easy to understand. Much appreciated.
Denise, thanks I really appreciate the encouragement. And you’re welcome.
I do have a follow up question for you Nick. I understand that I need to register the action and then call for that same action. Do both of these commands go in the child theme functions.php?
I am using Agentpress and assumed this is what your instructions meant, but it doesn’t work and I’m wondering if I misunderstood something.
Nick,
Thanks for the tut but so far I’ve not got it working correctly. I am trying to add a widget section that fires right before the wo-cycle section on the main content area.
I added the following to the functions.php:
genesis_register_sidebar( array(
‘id’ => ‘after-menu-bar’,
‘name’ => ‘After Menu Bar’,
‘description’ => ‘This is a the section that comes right after the menu and before the featured image rotator.’,
) );
I put it between the home note and home featured sections in the functions file.
I then added the following to the genesis hooks before_content section and enabled php
;
I added the following to the bottom of the css style file:
.after-menu-bar {
clear: both;
margin: 0 auto;
width: 728px;
}
Any help would be appreciated.
Thankyou for the great info this is great, are you able to get it so that this will online appear on the home page? i know it would be conditional statement but not sure of it where to get that to fit in with this code ??
I explain how to make hooks conditional in another tutorial How to Load a New Section on Specific Pages.
I’m not sure where to put this in the updated Prose theme. Doesn’t seem to work putting it in Custom Code. And doesn’t work in the function.php of Prose or Genesis.
Well I got it to work with Genesis Simple Hooks, Custom Code (css) and the “genesis simple sidebars plugin”
Sounds like a pretty good solution, especially for Prose, thanks for sharing how you got it to work. If you are interested in doing it via the functions.php file, please start a thread in the support forums.
What is the recommended (best practices) way to register or add a new sidebar? Add it to the functions.php page vs using the plugins Genesis Simple Hooks / Simple Sidebars. Are there performance issues if using the plugins? Seems like the plugin makes it easier. Any suggestions / recommendations would be appreciated.
you will have to register the plugin via functions.php. Genesis Simple Hooks won’t let you register the file. As for calling for the sidebar, a plugin will use more resources, though in a good plugin this is minimal. For users that are able to do it via traditional hooks I’d recommend using the functions.php file instead of Simple Hooks.
AWESOME tutorial…followed very easily!!! Thanks so much!
great tutorial. many thanks.
i am just hung up on how to add the “is_home() ” as mentioned in the other section: https://designsbynickthegeek.com/tutorials/conditional-page-content
this is what i have, so far:
add_action( ‘genesis_before_content_sidebar_wrap’, ‘child_before_content_slider’ );
/** Loads a new sidebar before the content */
function child_before_content_slider() {
echo ”;
dynamic_sidebar( ‘before-content-slider’ );
echo ”;
}
never mind.
got it
add_action( ‘genesis_before_content_sidebar_wrap’, ‘child_before_content_slider’ );
/** Loads a new sidebar before the content */
function child_before_content_slider() {
echo ”;
if ( is_home() )
dynamic_sidebar( ‘before-content-slider’ );
echo ”;
}
Great, looks almost exactly like what I would recommend. I would suggest that you remove the empty echo lines if you aren’t going to output anything.
Hi Nick,
This is a great tutorial indeed.. It’s simplicity makes it unique. It really save me today, and was recommended to by a moderator on the StudioPress support forum.
Thanks again 🙂
Thanks so much for this tutorial! I am a newbie at all of this, but was able to figure out how to add a sidebar…thank you!
I did notice one error (I think)…should this actually be the style sheet..
“Finally, style your sidebar using this code in the functions.php file”
I made the change in my functions folder and got the big error page, but putting the code in the style sheet worked.
thanks for the heads up. I’ve updated the tutorial.
I am not that familiar with php and can register the widget no problem. Also no problem styling the class. My confusion is the add_action code for hooking this into the functions.php page.
In agentpress 2 I’d like to add a section between .featured-top and .welcome.
Any help would be greatly appreciated.
Mike
add_action( ‘genesis_before’, ‘child_before_welcome’ );
/** Loads a new sidebar before the welcome section */
function child_before_welcome() {
echo ”;
dynamic_sidebar( ‘before-welcome’ );
echo ”;
.before-welcome {
clear: both;
margin: 0 auto;
width: 728px;
}
}
genesis_register_sidebar( array(
‘id’ => ‘before-welcome’,
‘name’ => ‘Before Welcome’,
‘description’ => ‘This is a sidebar that goes before the Welcome section.’,
) );
Figured it out there is no bef0re-welcome hook (with the help of SoZo StudioPress Community Moderator). I registered a before-welcome widget on the functions.php page them added a before-welcome section to the home.php page and styled it with css. Working draft of the website: http://myamericancanyonhomesforsale.com
Hey Nick,
I posted this question in the forum and was referred to your tutorial.
What is the best way to add a section to each page similar to the “Home Welcome” section on the home page. Example – Each page would have it’s own unique “Home Welcome Message”?
I would like to keep the home welcome message as a default. I tried your tutorial, and it indeed adds a section to each page BUT it adds the same message via TEXT widget to every page. What do I need to do to get this set up properly?
Rita,
You need to use a plugin like Widget Logic to target your widgets.
Nick, I forgot to tell you I am using the Agency Theme…..I basically want it to work like the Genesis Simple Sidebars plugin, but instead of the message going in the Sidebar, I want the page specific message to go in the “Welcome Message” section as seen on the homepage.
Nick would you mind telling me how have you learnt this coding? Please
James, short version is, by doing it. Trite I know.
I am a intuitive learner, so I try things and figure it out as I go. I learned some basic car skills from my dad but everything else was built on that, so I can fix pretty much anything on my car. Same for carpentry, plumbing, and electrical work. I found HTML interesting back in the early 90s right as the internet got started and before CSS. Then I started working with CSS when that came out. After a break I came back a few years ago and decided I should learn something more dynamic and got into PHP and WordPress about the same time. I read code and learned from what I read. Anytime I see a function I don’t know I google it and read what it does, then I try to use it. The more code I read the better I am. I hope that makes sense.
Thank you, thank you , thank you for this tutorial! You saved my night. It is clear and really helped me.
Hey Nick,
Actually this is a great cracking tutorial. I have saerched for this on StudioPress forums, Then I found this link. 😀 I’m very happy coz’ I have added a Widget Area for my new site. Thank you million times and one more million 😀
I love simple, well-explained tutorials, I’m learning Photoshop also, but some sites don’t make their tutorials well-explained and I’m getting loss in PS :O And your tutorial doesn’t make me lost in Genesis. You’re a super guy.
All The Best For All The Work You’ve Done…!
Shyam.
I struggled with the logic pregression on the Studiopress site and landed here, Nick.
Your step by step logic aided me in implementing a header slider literally within 2 minutes.
I remain considerably impressed and thank you for the excellent advice.
Thanks, I tried to write things in a way it would have helped me getting started.
Nick,
Thank you for the heads up. I have bookmarked your site and will be visiting many times.
Thanks again for sharing!
Thank you, Nick. I used this tutorial to test a 728×90 ad on a development version of my website, Oak Ridge Today. I hope to start offering these ad sizes soon.
I added this bit of code to get my sample ad (uploaded as an image) to float left and to introduce some padding between the ad and the header below it:
.before-header-ad img {
float: left;
padding: 0 0 10px;
}
Hi Nick,
How would you go about adding a widget/sidebar area to the top left of the header? My end goal is to have two widgets in the header: One widget on the right and one on the left with the logo for the website in the middle.
Thanks for this great tutorial!!!
you could add it on genesis_header with a priority of 8
Nick,
Thanks a lot for a good tutorial on adding a new sidebar before header. I worked out well for me when I added an image-banner on the top of the Eleven40 theme. Now I am struggling a bit with the responsivness of the image. Nothing to show so far , as it still is in my own computer in development.
Your tutorial was a great support for me.
Nice post. I learn something totally new and
challenging on sites I stumbleupon everyday. It’s always useful to read through content from other authors and use a little something from other websites.
Hi Nick,
Great tutorial. Between your tutorial and Studiopress support I have managed to create a home-bottom widget area for a client’s website. The only thing I’m struggling with now is the CSS. How do I apply the page’s font and line spacing settings to the widget area? Is there something I’m missing? The website is goldcoastpets.com.au if you want to have a look. It’s the last piece in the puzzle and I’m keen to get this done! Thanks in advance!
Cas
Hi Nick,
Like many others, I found this really useful, one thing i’d really like to know, and surprised no one’s asked…;
I’d like to have a row of 4 widgets, but no matter what way i try , each widget i add is ‘line breaked’,, and end up underneath each other, on their own row. How can I get 4 widgets in a row? Is it a styles.css or functions.php thing?
Sorry to ask, i’ve tried everything i know, which isn’t much at this point: I’ve created 4 sidebars, 1 sidebar with 4 widgets, messing with the supplied css, php…
Any insight much appreciated.
colkav
you would need to set your CSS so that the widget areas have a width of ~25% and float left.
Hi, Nick
To be clearer, I might change the a.k.a. to “Sidebar or something else,” because if someone wants to add a full-width area under a slider, for example, it might confuse some people (like me) if you only say Sidebar. In the Agency theme, if I want an area under the home-slider, I wouldn’t call that a sidebar — I’d call it a full-width widget.
Just thinking it might help some folks out there,
Thanks,
Doug, Pro Plus Member
Thank you so much for this amazing information!!! I’m adding widget areas like a pro (almost), thank to you!
One question…on the section of code that goes in the functions.php file that is used to display the widget area, how would I add a condition, e.g., if I only want it to display underneath single posts, and not underneath each post on the home page?
Check out my conditional actions article for details, but you would do is_single() for your conditional.
Just want to say thanks for this, it saved me a lot of pain tonight! LOL
Hello,
Thank you very much for the tutorial. I’m using the Serenity theme and want to reduce the slider width and place a plugin to the right of it. The plugin would allow visitors to enter their email and receive a free product.
I reduced slider width to 600 and added the following to the functions.php:
genesis_register_sidebar( array(
‘id’ => ‘before-content-ad’,
‘name’ => ‘Before Content ad’,
‘description’ => ‘This is a sidebar that goes before the content.’,
) );
add_action( ‘genesis_before_content_sidebar_wrap’, ‘child_before_content_slider’ );
/** Loads a new sidebar before the content */
function child_before_content_slider() {
echo ”;
if ( is_home() )
dynamic_sidebar( ‘before-content-slider’ );
echo ”;
}
To style the sidebar I used:
/* Before Content
———————————————————— */
.before-content-slider {
background: #dddddd;
padding: 10px;
}
The sidebar shows up in the dashboard among the list of sidebars. However, it does not appear on the home page. I tested it by adding a text box and simply typing in sample text.
The result I got was a smaller slider that was centered on the home page and has a big white space underneath.
I am a novice at php. I’m guessing I set up something incorrectly. Here is my url: http://www.christinenferguson.com
Thanks in advance for your help.
Thank you, Nick.
I used your tutorial to add a top leaderboard ad on Oak Ridge Today (http://oakridgetoday.com) just below the navigation bar on a site that uses the Genesis News theme.
The only change I had to make was to add a bit of CSS (margin:10px auto 0;) to adjust the top margin and center the ad.
Thank you for sharing.
John
Nick,
I posted this question also on the StudioPress forum, but I wondered if you are able to help. I added a 728×90 before-content-ad between the navigation bar and content-sidebar wrap using the before_content_sidebar_wrap hook and your tutorial.
However, I haven’t figured out how to make the ad responsive. I tried adding a .before-content-ad class to the box-sizing rules in the CSS responsive rules section, but that didn’t seem to work quite right. Here are the responsive rules that currently apply: box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 95%. I’m wondering if I need to set the width for the 728×90 ad to less than 95 percent to narrow it to fit the rest of the content.
Do you have any suggestions? We’re using the News theme. Our website is http://oakridgetoday.com.
Thank you,
John Huotari