If your website uses the Genesis Framework, you already know how easy it is to do things like change page layouts, widgetize your homepage, or use different sidebars for different parts of your site. Those are just a few of the reasons I love Genesis and recommend it to all my clients.
As part of my effort to give back to the Genesis community, I volunteer in the StudioPress support forums, where users ask questions and look for tips about different customizations. Recently, several people have asked how they can add a widget area to a specific page on their sites – not in a sidebar, but inside the page itself.
Using a widget area on a page can serve any number of purposes. For example, one user wanted to create a full-page layout using the various social media widgets available for sidebars. Another wanted to display RSS feeds on a page using an RSS widget.
Here’s how you can add a widget area to a page, step by step. Please note: This method will not work for your site’s homepage unless you are using a static page. Instructions for adding a widget area to your homepage depend on what child theme you’re using and how it’s configured.
How to Add a Widget Area to a Genesis Page
1. Create the widget area.
To add a new widget area to your child theme, open functions.php and add the following:
You can change the ID, name, and description to fit your use case. So if this widget area is going on your contact page, for example, you could change the ID to something like “contact-widget” or “contactwidget.” Just make sure you change it in all the other steps.
2. Create the condition for displaying the widget area.
We want the widget area to display only on a particular page, so we need to add code to functions.php to tell the theme where it goes.
If your Genesis child theme uses XHTML (older or non-Pro themes):
If your Genesis child theme uses HTML5 (Pro child themes):
A few things to keep in mind:
- If you changed the name of the widget area in Step 1, you’ll need to change it twice in this step.
- You’ll need to replace “ID” with the page ID number you are using. To find your page ID, go to Pages > All Pages in your WordPress dashboard. Hover over the page title and you’ll see a URL like this at the bottom of your browser window:
https://nutsandboltsmedia.com/wp-admin/post.php?post=2677&action=edit - That number is the page ID, which you’ll need to use in the function above. Do not use the entire URL – just the ID number.
- In each function above, we are using a hook to place the widget after any content on the page. That allows you to add regular content to the page and display the widget area afterward. To change that, check the Genesis hook reference.
3. Add some CSS rules.
Without some CSS, your widget area won’t display correctly. Here is some base CSS to add to your child theme’s stylesheet (though it is definitely not exhaustive – feel free to alter as needed).
Again, if you changed the name of your widget area, you’ll want to update here so your stylesheet is looking for the correct div ID.
4. Drop in some widgets and take a look.
Now you should see your widget area under Appearance > Widgets. Drag a widget into the new area, then go check out your page to see how it looks!
All Nuts and Bolts projects are built on the Genesis Framework because we believe it's the most stable and well-supported framework available. Our partners love it and so do we - once you try it, you'll never use another WordPress theme!
Comments are now closed for this article.
Hi Andrea
Well set out and explained tut for Genesis users.
Just given this one a tweet.
Thanks for visiting and sharing, Keith!
Was just googling for an answer to this question and was so happy when I saw your pic pop up! 🙂 Your advice has helped me *SO* much already + everything always works out great! Quick question before I try this out: I recently downloaded Genesis Extender - is there a way to use that to do this? I still don’t really know how to use it, but I followed a tutorial on another blog for using it to add an extra widget area to my homepage, so I’m thinking it can probably be used to do this type of thing as well?
Hello again! 🙂
You can probably use Extender to create the widget area, but I’m not sure you’ll be able to use the hook to put it within the page. I’d have to load up Extender on a site and try it. Honestly, I think it’s easier to do it this way - I know people are terrified of code, but it’s really not that bad.
If you’d feel better, I can write a quick plugin that will place the widget area and email it to you. I would just need to know the ID of the page you want to use it on and what you want the widget area to be called.
That is so, so nice of you!! The page ID is 5100 and the widget area could be called “Database Widgets”.. Basically, I want to put the Jellyfish Counter Widget I have at the bottom of the blog sidebar on this page: http://prayersandapples.com/mind-body-spirit-research/ ..thanks you sooo much!!!
I’ve got it finished but my email bounced back when I tried to send it - can you send me an email at andrea@nutsandboltsmedia.com?
Thanks for this helpful tutorial! If the page I want to target is the home page, how do I find the ID since it’s not listed on the Pages? I tried “if (is_home())” but that didn’t work for me. Thanks!
Hi Danielle,
The way you add a homepage widget area depends on your child theme. If you can post back with your child theme and whether your homepage shows blog posts, widget areas, both, or neither, I’ll see if I can give you a function that will work.
Thanks Andrea! I’m using the theme Outreach which has 4 widget areas. I want to add another above the existing 4 columns of widgets.
Okay, I’m going to email you all this stuff because it’s a lot of info, but I’ve got the extra row of widget areas displaying on a test site.
Hi Andrea,
Thank you for the tutorial. I also want to add a widget to my home page (Education Theme). Can you help me find my home page ID?
Actually the process to add a homepage widget is a little different since Education already uses a widgetized homepage template. Give me a bit to look at the theme files and I’ll email you with some instructions - where do you want the new widget area to be?
thanks for the tutorial, but I still do not understand how the application code, can you help me? where I have to put the code, I am still a beginner
As mentioned in the post, the first two pieces of code go in your child theme’s functions.php file. The CSS at the end goes in your style.css file. Please keep in mind that editing theme files can be tricky - if you aren’t comfortable or aren’t sure what to do, you might consider hiring a developer to help you. Otherwise you could break your site (though it could always be fixed if that happened).
Nice post Andrea! Really helpfull for people who are new at Genesis.
Perhaps its not the right place to ask, but what if we want the widget area to appear only at the homepage; Cant find the homepage id that way.
Hi George,
The homepage would have to be done using home.php or front-page.php, depending on your child theme. And the method would be totally different. Let me know if you need help with a specific theme and I’ll try to help!
Hi Andrea, I am using the Genesis theme with the sample child theme included. In case you need it, you can have my website.
Okay, the sample theme doesn’t have a widgetized homepage by default, so you’d need to create a home.php or front-page.php. You could borrow the code from any child theme that has the type of layout you want, though you’d need to add considerable CSS to the theme to make it work.
Hi Andrea - great post, thanks! One question what about if I want the widget in a spot on actual page not above or below the content?
Hi Neil,
It depends - where do you want it to go? You’d just need to change the hook to move it to a different place.
What about inside the entry-content div - if you wanted to place a widget in between 2 blocks of text
Honestly, you’d probably be better off inserting the blocks of text as text widgets within the new widget area - you could place the area within the content with a lower or higher priority, but I’m not sure how you would use a hook to specify the number of paragraphs before it displayed. I’d have to do some research on that one…
Hi Andrea, thanks for the great post. This question may be slightly off-topic, but how do you go about displaying your code snippets in your posts? I have tried a few plugins, but can’t find one that looks as good as yours. Do you use a plugin, or do you have another method? Many thanks.
I’m using the WP Gist plugin (checking to make sure that’s actually the name). I went through several but this was the first one I found that was easy to use. Hope that helps!
Great, thanks Andrea - I’ll certainly give that a try.
hi Andrea,
I’ve been following your post guidance on a Streamline Pro customisation. I am replicating featured home slots 1 & 2 (of a row of 3 up top in the theme) to sit within the genesis_entry_footer hook. I got the php done - registering new homepage-featured-4 and 5 widget area, and dragged Featured Page Advanced widget in them.
My query is really about the CSS bit as I’ve now got my two new widgets sitting vertically in that entry footer rather than horizontal. I don’t know what code to start styling with in fact, whether:
a) to replicate some current .homepage-featured code from the top row; or
b) to put (guessing here) .genesis .widget-area , etc. or .home-featured-4 and .home-featured-5 and style these bottom of the CSS as standalone items.
Ideas and help much appreciated if you’ve time! Tnx.
Hi Liz,
It’s hard to tell without being able to see the site, but generally you need an overall div to hold both of the other two. Can you email me your functions.php? My email is andrea@nutsandboltsmedia.com
Hi Andrea, thanks for the post. I was just checking my codes to see if they are the same as yours. I was just wondering what difference does it make if you put:
‘after’ => close div
under where you put
‘before’ => open div
Thank you for this tutorial, Andrea.
I’m using the Genesis Sample Theme to learn and I’d like to add two widgets below the header: one for an image (id is below-header-image) and the one below it to collect email addresses (id is email-cta).
I registered two widget areas and the next step is to hook the uppermost one using genesis_after_header and the one below that one using genesis_before_content_sidebar_wrap. However I’m paralyzed and don’t know how to write the code to display the widget areas. I want both widgets to show up on the homepage only.
Your assistance would be greatly appreciated.
Okay, first thing - don’t freak out! It’s going to be fine. 🙂
You can do this one of two ways: (1) You can add a front-page.php to the Sample theme, or (2) you can just add the functions to functions.php. Which is the way we’re going to do it since I’m assuming you’re displaying posts on the homepage.
So we need a function for each one that will say “If we’re on the homepage, add these widget areas in these locations.” Try these and let me know how it goes: https://gist.github.com/nutsandbolts/9408deba914947a6b578
The two widget areas display on the home page as desired—thank you SO MUCH, Andrea!
This is greedy of me but I have follow-up questions. I’ve been trying to tweak the lower widget area (just above the content and sidebar)—do you have any recommendations for how to get the text to fit on the same line as the input boxes and submit button? I’d like it to look like the email opt-in on this site: http://kriscarr.com. Also, how can I get rid of the space between the image and the call to action widget? I tried setting margin-top and padding-top to 0 but neither worked.
Thank you once again!!
Can you post a link to your site? It’s always easier to help if I can see what you see.
Ooops; sorry about that. Please visit http://goodnaijablogs.com/see to have a peek.
Thank you
Try doing
#email-cta { margin-top: -10px; }in your stylesheet - that gets rid of the gap for me, though it’s still a bit close.As for making the text sit next to the opt-in, I would put the text into a text widget (instead of using the eNews areas) inside a div, then float the div left and float
#email-cta .enews-widgetto the right.Thank you, Andrea.
Do you know what determines how much space a widget takes up in a widget area? I noticed that when I floated the enews widget to the right, it ended up taking up approximately 1/3 of the horizontal space while the text widget appears to have about 2/3 of the space—I’d like it to be 50/50. I used padding to shift the content of the two widgets (goal is this look: http://kriscarr.com) but I don’t know if this is the best way to do it. Thank you once again.
http://goodnaijablogs.com/see
Try adding this to your stylesheet:
#email-cta .widget { width: 50%; }Andrea, CODE is missing now in your post for creating a new widget area.
Thanks for the heads up - it should be displaying correctly now. 🙂
Andria, your code is again missing from the article. 😉
Sorry about that! I’ve been doing some work on the site today. Can you try a hard refresh? It’s displaying for me when logged out so it should be okay now.
Hi Andrea, Thanks for the post, have read it a few times and all the comments, but am at a loss - maybe I’ve tried too many different things and have a mish mash now - What I’m trying to do is add widget areas to the Home page of Going Green Pro, which shows blog posts — I’ve got to the point where they are showing up, but they are on the background, not on the white page background. Can you point me in the right direction? Thanks Helen
Hi Helen,
Are you using a static page as your homepage, or are you still showing posts? If you can send me a link to your site I’d be glad to take a look.
Andrea, Thank you so much, I’ve tried so many different ways — I’m using a domain as a test site here is the link — http://bejeweledbandanas.com/ I was just aobut to undo to try something else, but I won’t touch it until I hear back from you. Thanks, again, Helen
Okay, I see the widget areas - what hook(s) did you use for them?
Also, have you seen this tutorial? http://sridharkatakam.com/widgetized-homepage-template-genesis/
I used exactly that tutorial from Sridhar Katakam’s and this is what I ended up with, I don’t know what’s wrong? I’ve checked it a few times. I’ve redone it a few times, because before following his tutorial, I had tried other things. Do you know why the widget areas are appearing like that? Helen
Do you mind to create an admin login for me on the test site so I can take a look at it? My email is andrea@nutsandboltsmedia.com. I won’t get a chance until tomorrow morning but I don’t mind at all to check it out. Alternately, you could try tweeting Sridhar - he may be able to spot the issue quickly.
Andrea, After setting up an admin login for you last night, I then tried to get in touch with Sridhar by tweeting, per your suggestion, and he replied asking me to post a comment on his blog post! So, am thinking it makes sense for me/us to wait and hear back from him, but if you spot anything or want to pursue, that’s great! I’m so thankful for your attention and follow-up and interest to something that has become really frustrating and I’ve tried to set up several times.
Hello, again, I am not hearing back from Sridhar - did you spot anything or do you have suggestions - such as - is it a matter of css? What I’m trying to do is add widgets to the home page of the going green pro theme which doesn’t come with a home page — I tried following your instructions, but couldn’t identify the home page properly, so then, as you know, I found and followed Sridhar’s instructions, which are basically working, but have a problem which I don’t understand… I’d be happy to back out what I’ve got, start all over with your instructions, but I got stuck with/need a function that works with a home page with blog posts — it looks like you have sent other people that, so I’m hoping you can send me it, too? I’m hoping —- what I need is the basics, I will then add more widgets according to your instructions because I can’t use top, middle, bottom full width — but just need the basics — Thanks for the help.
Hi Helen,
Was just about to email you to see if you got the issue resolved. I just grabbed your front-page.php and I’m loading it on a test site now to see if I can get it working. I’ll touch base with you in just a bit.
Hi Andrea - I followed your instructions exactly and I am not getting the widgets to show up on my page. Page address: http://happyandblessedhome.com/dev/wp-admin/post.php?post=6927&action=edit
The widget shows up in the widget builder tool on my WP site and I’ve added the page in place of my ID but no matter what type of widget I out in the widget builder I can’t get anything to show up. I’m using Modern Blogger Pro (I used the HTML 5 version of your code) and still no luck. Any help is greatly appreciated.
Hi Monica,
Can you email me the exact code you used in functions.php? Usually when it shows in Appearance > Widgets but doesn’t show on the site, it’s a little tiny issue that’s fairly easy to resolve. I’d be glad to take a look. My email is andrea@nutsandboltsmedia.com
Sent you an e-mail. I look forward to hearing from you.
Hi Andrea,
It works perfectly for me!
I just have a further question.
what if I wanna apply it to multiple pages? I tried is_page(’21’, ’23’ ,’23’ ,’23’ ) it doesn’t work.
Or is there something like is_not_front….I don’t have any knowledge of php, it’s kind of stupid…so…
Thank you.
For multiple pages, you’ll need to add an array. So it will look like this (assumes you’re using the HTML5 code):
//* Add the page widget in the content - HTML5add_action( 'genesis_entry_footer', 'nabm_add_page_content' );
function nabm_add_page_content() {
if ( is_page(array(ID1, ID2, ID3)) )
genesis_widget_area( 'pagewidget', array(
'before' => '< div id="pagewidget" >',
) );
}
(Except without the weird spacing issues - the site doesn’t love something I did there, so don’t copy and paste that!)
Or if you wanted it to work on all pages, you would just use is_page() with no page ID within the parentheses. Hopefully that makes sense!
If your homepage is set to a static page and you want everything but the homepage to show the widget area, you’d replace the “if” line with this:
if is_page() && !is_page(ID_OF_HOMEPAGE) ) {That says “if it’s a page but is not the static homepage, show this widget area at the bottom of the page.”
Thanks so much for this helpful post! I can get it to work on one of my pages, but as soon as I try to make it work on more than one the whole site goes blank. I’ve tried entering the code multiple times (with appropriate id’s, etc.), and with the array as you stated in an answer above.
Any clue how to fix this? I’d like to have control over four of the pages!
Hi Mary,
If you’re using the same function for all 3 widget areas, you’ll definite see errors and/or a white screen - each one will need a unique function name. In the example above, I used
nabm_add_page_widget, so you’ll need to change that for the other two (it’s there twice). Hopefully that solves the problem, but let me know if it doesn’t!Woohoo! You are the best! Thanks for the help!
Hello Andrea, I was very apprehensive to leave a fresh comment here, but I am stuck!
If you have the time, I have a question. The widget is pretty much where I want it on the page, but there is an indent as well as padding on top and bottom. After playing with the css you provided, setting margins and paddings to 0 and even to -10 there have been no visible changes. Where can I make these changes?
Thank you again for this article, it’s been a great improvement over sticking this widget in the footer!
The page I’m working on is http://genewhitehead.com/about/
and the widget is the social contacts between the page title and the body text.
Hi Gene,
Try changing #pagewidget to .pagewidget in your CSS. Remove the current padding rules and do margin: 0 and padding: 0, then add this:
.pagewidget .simple-social-icons {padding: 0;
}
That should get you a little closer since most of the padding is coming from the CSS for the icons. HTH!
Brilliant! Thank you so very much for your help, have a great weekend 🙂
Hi Andrea,
This is great and it worked like a charm to display a single full width widget for me; however, I’d like to show 3 widgets to appear side-by-side (e.g. in 3 columns) below the content on several different pages. Been trying to figure out how to do this, but no luck. Any suggestions?
Thank you!
Hi Jennifer,
There are two ways you could do this:
(1) You could use CSS for .pagewidget .widget (or whatever you named your new widget area) to display each widget at 33% (ish) and display them inline
(2) You could create three separate widget areas with column classes inside a containing div and drop one widget in each
Personally, I usually go for #2 since the CSS for column classes is already there. I sense a tutorial coming on because there’s just no good way to explain this in a comment… Appreciate the idea!
Hi Andrea,
I am also trying to get the widgets to display side by side. I’m looking at the bottom of my css stylesheet and found this, but I can’t for the life of me figure out how to make them side by side. Thank you for your help!
.pagewidget {
line-height: 1.5;
padding: 30px;
}
.pagewidget p {
margin-bottom: 24px;
text-align: center;
}
Hi Gene,
Can you put the code for the two widgets into Pastebin or something and post the link so I can take a look at what you’ve got?
Thank you so much, Andrea. I sincerely appreciate your help! Here is the Pastebin. The ‘pagewidget’ on page 176 works well, except I can’t figure out how to align them horizontally. Those are at http://eastwestcoffee.com/coffee-consulting/
The ‘reviews-pagewidget’ for page 275 doesn’t appear on the page at all but I cannot find my mistake! That one will be at http://eastwestcoffee.com/reviews/
I hope this is the proper information you asked for, and again thank you so very much for all that you do!!
I’m terribly sorry, I forgot to give the pastebin >.<
http://pastebin.com/UF1q3cDg
Can you try a different hook for the reviews page widget and see whether you can get the widget to display? I would suggest trying
genesis_entry_contentjust to see whether it shows up somewhere. I can’t see the widget in the page source, so you’ll also want to be sure there is a widget in there.Re: the three widgets on the other page, I’d probably use a single text widget and Genesis column classes, like this: https://gist.github.com/nutsandbolts/b4c009011dcd0cf3fa35
You may need to add a class to all three h4 tags to style them, but otherwise that will give you three columns and they will adjust automatically for mobile. Hope that helps!
Wow… thank you!! Both problems solved! The different hook for the widgets I couldn’t get to work solved the problem immediately, and the horizontal display on the others looks perfect! I tested it and when I add more consulting projects they will align nicely right underneath.
Thank you again for the rescue, I sure appreciate your help!!
You’re so welcome - glad I could lend a hand. 🙂
Hi Andrea! Great tutorial! I was able to add the widget area and am able to drop various widgets in the area, but nothing will show up on the site. Any idea what I’m doing wrong??
Any help would be very appreciated.
Many thanks, Cynthia
Hi Cynthia,
Can you paste in the code you used so I can take a look at it? Also, what theme are you using?
Hi,
I was wondering how did you center the sharing plugins? which pare of the css do I have to change? I have tried many things and finally installed SumoMe… I’d love to use these… Can you help?
Hi Jacek,
You can center the Genesis Simple Share buttons by adding this to your theme’s style.css:
.share-before,.share-after {
text-align: center;
}
That should center them on all posts/pages. Hope that helps!
Andrea — you are a genuine star for me from now on!! It works like a charm. Have a lovely weekend you nice girl!
You’re so welcome - hope you have a great weekend as well!
There are multiple ways to work out customized coding for Genesis, but, Andrea’s suggestions are always the right way to do it. Clean code that works!
Thanks for reaching out today, Erin! Glad I was able to help. 🙂
Andrea,
Thank you so much. It worked! I’m new to this - so I’m surprised it worked for me - but your directions are spot on.
My question is - on this widget page I created - I have been able to add a widget - but it’s still acting like a regular page where I would also post. So at the top of the page it says (edit) and at the bottom there is still a space for people to comment.
Can you let me know how to get rid of the “edit” and comments section? I would like the page to be widget only if possible. Thank you! Here is the link to the page: http://glutenfreebabe.com/subscribe/
Carol
Hi Carol,
The “edit” link is only visible if you’re logged in as admin - visitors can’t see it. Still, if you don’t like the links (I don’t, personally!) you can place a line of code in your functions.php file to remove them: https://gist.github.com/bgardner/4380359
There are two places to check to be sure comments are turned off on your pages:
(1) In Genesis > Theme Settings > Comments & Trackbacks, be sure the box isn’t checked to allow comments on pages.
(2) On the individual page’s editor screen, complete the following steps to check:
- Look for Screen Options in the very top right of the screen and click to open the toggle
- Check the Discussion box, then click Screen Options again to close the toggle
- Scroll below the editor box to the Discussion section and be sure the box to allow comments isn’t checked.
Hope that helps!
Hi Andrea,
Thank you. Your advice with the comments worked!
Unfortunately I went to that link you gave me for the “edit” link - put his code into my functions.php and my whole site is gone! I can’t even get in to the dashboard now to edit it and take this out!!! It’s just gone. What do I do?
Carol
Uh oh! It sounds like you might have pasted all four lines - if you notice, the first one is an opening PHP tag, then there is a comment reminding you not to include that tag. (Which I know is confusing.) You only wanted to add the last 2 lines of code to the bottom of functions.php.
You’ll need to access your functions.php file via FTP or your host’s file manager to remove those first two lines. If you aren’t familiar with that, you can ask your host to remove it for you. I recommend using FTP to do any PHP edits in the future, as a typo, misplaced comma, etc. can kick you out of your dashboard, which you’ve just experienced. Fingers crossed that you get it fixed ASAP!
Andrea,
Thank you! I called Bluehost and told them what you said and got it fixed. You are so smart! I greatly appreciate all your help. My site is awesome now. I am going to read your other posts. Thanks again!!!! Carol
Awesome! I’m glad I was able to help and that the site is sorted out now. 🙂
Hi Andrea
What plugin comment used on your site?
Hi, Lucy! I’m actually not using any comment plugins other than Subscribe to Comments Reloaded. What you see is just the native comment system built into WordPress.
Thank you for the great tutorial. However, I tried to add more than one new widget, and adding more than one condition broke my site. I’m not great with PHP - what I did was add your condition code twice, one after the other. Like this:
//* Add the page widget in the content - HTML5
add_action( ‘genesis_entry_footer’, ‘nabm_add_page_content’ );
function nabm_add_page_content() {
if ( is_page(‘ID’) )
genesis_widget_area (‘pagewidget’, array(
‘before’ => ”,
‘after’ => ”,
) );
}
//* Add the page widget in the content - HTML5
add_action( ‘genesis_entry_footer’, ‘nabm_add_page_content’ );
function nabm_add_page_content() {
if ( is_page(‘ID’) )
genesis_widget_area (‘pagewidget’, array(
‘before’ => ”,
‘after’ => ”,
) );
}
How do I do it without breaking the site?? Thank you SO much!!!
You need to use unique function names. If you look on the “add_action” line at the beginning,
genesis_entry_footeris the hook being used andnabm_add_page_contentis the function (which is then repeated on the next line). To use the function again, you’ll need to change it to something else. You’ll also need to change all instances ofpagewidgetin the second one so you have two unique widget areas.If you are wanting to add the same widget area to different pages, I can show you the code to do that. But otherwise you’d do something like this: https://gist.github.com/nutsandbolts/5b639c9ea14e67357f34
Hi Andrea,
Thanks for writing this article. It helps newbies like me a lot. Now I want to ask you a question which some of the readers already asked. But since you have not posted the solution openly I need to ask it again.
I am using the ALTITUDE PRO THEME and I want to add a widget area below the already configured widgets (ie at the bottom of the page).
How do I know the page id? Please help me.
Thanks a ton!
Saleem
Hi Saleem,
Since Altitude Pro uses a widgeted template for the homepage, you’d need to edit the template to add a new widget area using Genesis hooks. Do you want the new widget area to be full width?
Hi Andrea,
I followed your instructions, the widget shows up in the widget-area but not on the site. I use Modern Portfolio Pro and followed the Genesis instructions to have an own blogpost page. I set up a new site and choose “Blog” as template. Here is the code I put in the functions.php file:
genesis_register_sidebar( array(
‘id’ => ‘testkategoriewidget’,
‘name’ => __( ‘testkategorie Widget’, ‘teka’ ),
‘description’ => __( ‘This is the widget area for a specific page.’, ‘teka’ ),
) );
//* Add the page widget in the content - HTML5
add_action( ‘genesis_entry_footer’, ‘teka_add_page_content’ );
function teka_add_page_content() {
if ( is_page(array(‘ID534’)) )
genesis_widget_area (‘testkategoriewidget’, array(
‘before’ => ”,
‘after’ => ”,
) );
}
Do you have any idea how I can see the widget in the content section - ideally before the blogposts?
Your issue seems to be here:
if ( is_page(array('ID534')) )- it’s not an array if there is only one ID listed, and the ID should be the number only, without the letters ID. Like this:if ( is_page('534') )Hi Andrea,
thanks for your quick answer. I changed it, but I still have the same result. Nothing shows up on the page. Any other idea?
Hmmm, can you paste your entire functions.php into something like Pastebin or Github so I can take a look?
Hi Andrea,
I tried it with “genesis_before_content” - now it shows up on the page. Wonderful;-) Thanks so much for your help.
Just wanted to tell you that you and your replies/answers are really awesome!! Really nice to help all those people out!
Thanks very much, Demian! The Genesis community is great - I got a ton of help when I first switched to Genesis for all my projects, so I love paying it forward when I can. 🙂
My intention was to just give you a compliment, but now i do need your help, im working on a website/shop and would like to have a widgetarea like in the agency pro theme on the beautiful pro theme…
ive tried to register it but nothing seems to work, there is no front-page.php but even when i tried to do that it didnt work…. could you help me out with it?
That’s a little more involved - you’d need to create a front-page.php (or use conditionals to display only on the homepage). Can you link to a Pastebin or Github gist with the code you used?
Hey, thanks for this, just what I need 🙂
I’m struggling to get the widget to display where I want it though so I wonder if you could help?
See http://www.mediareform.org.uk/resources/books
I want the widget to display after the entry text but before the share button - how can I do that?
Many thanks in advance,
Josef.
Hi Josef,
To display the widget before the share buttons, you’ll probably need to change the hook used. I’m not sure where Jetpack outputs its sharing buttons, so it would likely take some trial and error. You will likely need to familiarize yourself with priorities to get the exact display you want: https://magikpress.com/using-hook-priorities-genesis/
hello. Great tut. I want to show one widget below the header in post and another just to show on the homepage. how would I be able to do this and can you please do a tutorial on styling the comment section. It’s very nice. I tried sneaking a peak with firebug. I got some pieces in but when I add to change color for author post. The header is covered by the color. Thanks
You can add the widget areas using conditional tags. This will allow you to specify “if this is a single post, display the widget area” or “if this is the homepage/front page, display the widget area.” Alternately, you can create a single.php and add the code there. How you’d create a template for the homepage depends on the theme you’re using and whether it already has a homepage template.
Can you send me a link to your site so I can look at the issue with the comment styling? You can usually target
.bypostauthorin the stylesheet, but sometimes you may need additional CSS depending on how your theme is structured.Thanks for the quick reply. http://rebelde.website/test6/2016/01/09/hello-world/ is the site. I figured out how to style most of it. I am using the magazine pro theme. The byauthor broke my site, also tried even and odds to get a different color, but that didn’t work. So if I wanted another widget in that same area, I would just add a new widget and put a conditional statement in there and it will override the one I have for the whole site or do I need to add conditional statements for both. I wanted to display a welcome image on the homepage instead of the grid I have there. Thanks again.
I was able to add
.bypostauthor {background-color: #eee !important;
}
in Inspector without any problems - it seemed to change the background color of your comment but nothing else on the page.
If you want a widget to display everywhere except a certain page, you could put that in your conditional for the page. So you’d have one function to add the widget area sitewide, then in your second function, you’d say “if we’re on X page, remove that one and add this one.” Whatever
add_actionyou used for the sitewide one, you’d use aremove_actionwithin your conditional to take it back out.Thanks for your time. Much appreciated. I had issues getting the widget to work, so I just put it before the header instead. Might as well have a welcome message show up first. But I got it to display only on homepage. So at least I did something right. Thanks again.