Some of you may have noticed a rather obtrusive, large font, full-width section that sits at the top the eleven40 demo site. It’s on every page, screams in your face and is hard to ignore.
I’d like to introduce you to my Welcome Text Widget.
And in case you missed it, it’s the thing that sits just below the header, above the content area and says:
A mobile-responsive child theme built for the Genesis Framework.
Now you know what I’m talking about?
How to Fetch You Some Welcome Text Widget
As promised, I’m writing up this tutorial which will show you (just how easy it is) to add a welcome text widget to your website. If you can follow directions, then you might be able to put some witty text at the top of your site too!
In case you’re wondering, this code is lifted from our eleven40 Theme – which by the way is the same theme that I’m running here.
Moving right along…
1. Register Your Widget Area
Open up your child theme’s functions.php file, and place the following code:
/** Register widget areas */
genesis_register_sidebar( array(
'id' => 'welcome-text',
'name' => __( 'Welcome Text', 'genesis' ),
'description' => __( 'This is the welcome text widget.', 'themename' ),
) );2. Hook the Welcome Text widget
Also in your child theme’s functions.php file, place the following code:
/** Add the welcome text section */
add_action( 'genesis_before_content_sidebar_wrap', 'custom_welcome_text' );
function custom_welcome_text() {
genesis_widget_area( 'welcome-text', array(
'before' => '<div class="welcome-text widget-area">',
) );
}The function that you see above will add the Welcome Text widget to the genesis_before_content_sidebar_wrap hook. As a side note, you can probably use the genesis_after_header hook as well for this.
3. Create Your Welcome Text
Head over to the Appearance > Widgets page in your WordPress dashboard, and you will see that on the right hand side of your screen there is a Welcome Text widget area. Simply add a text widget to that, and write whatever you want your visitors to see.
4. Style Your Welcome Text
Open your child theme’s style.css file, place this code and customize:
/* Welcome Text
------------------------------------------------------------ */
.welcome-text {
border-bottom: double #ddd;
border-top: double #ddd;
font-family: 'Lora', serif;
font-size: 30px;
line-height: 1.0;
overflow: hidden;
padding: 25px 0;
text-align: center;
}
.welcome-text p {
font-size: inherit;
line-height: 1.0;
margin: 0;
}
Thanks! I was just wondering how to add something like this with Genesis without using a plug-in.
Good stuff James – now you know the answer.
Brian, thanks for sharing this.
I have a related question: how do you add the box at the end of your post that encourages people to sign up for your newsletter?
You can pretty much do the same thing as written above, but just hook it to the genesis_post_content hook, which means the section will show up after the post content.
So the code would look like this:
add_action( ‘genesis_post_content’, ‘custom_welcome_text’ );
Great! Thanks Brian!
Yep, I want one.
Does it work for the News Theme?
I don’t see any reason why this wouldn’t work on the News theme – it’s fairly straightforward, so it should work on any Genesis child theme.
really cool idea. Thank you for sharing, Brian. We’re on duty now
Hi Brian!
Love your Welcome Text Widget & I am going to implement. Which leads me to the next question, how did you put the About Blog Code Tutorials etc in the black bar? Mine are currently in the left side of what will be this new Welcome Text Widget.
Thanks!
That is just a custom menu placed into the header right widget area.
Hi Brian great tips my friend I was thinking about adding something like this in my headers section…
Hey Brian I know you posted the codes for the welcome message, but were do you exactly place them?
Eh, I guess I missed out on that step – which I’ll add now.
Thank you so much Brian I will be looking out for it.
And where do I add the text in the welcome text code that I added?
You’re registering a widget area, so in your Appearance > Widgets screen, you can add a text widget with this text.
Got it! It looks great but isn’t the same size or font as yours. Did you change the font & size?
Also, I want to change the Header Setting from Dynamic Text to Image Logo but where do you add the logo so it is attributed with this setting?
Thanks!!
Brian, love your instructions; even guys like me can grasp it
Jason, enjoyed your site. Powerful. And Smiling Peggy….love what you’ve done with the place. Tell me, how can I get my MENU up in the header like you and Brian have, and how did you get the “CHANGING TESTIMONIALS” in your page…nice touch. Thanks everyone; I’m so glad to be a part of the Genesis Family!
Thanks Dave! I am having a blast and learning a ton.
The testimonials are a widget: http://wordpress.org/extend/plugins/testimonials-widget/
Cheers!
Are you referring to the title above each of your posts or a static welcome message?
The static “Self-confessed Starbucks addict from the suburbs of Chicago.” that sits at the top of my site.
Once again all I can say is brilliant! Your instructions make it so easy to install.
Good stuff – glad you found it easy to install!
Thanks Brian. I’ve had an immediate go and like my results. I think I will use this to say something different to my readers every couple of days. Great idea, easy instructions. Cheers!
Hi Jason how did you change your background color for this widget? thanks so much my friend
I uploaded an image to my WordPress library and set it as the background image in the Widget text section of the css file. Hope that helps.
Sounds great Jason, thank you so much. Hey my friend great looking blog you have by the way……
Thank you Rob. I’ve got a long way to go.
All the best.
Hello Brian I wanted to ask you how do you add the Sign up for my Newsletter, to the ending of your post. I have something like that but it will not allow me to add HTML to it…
Implemented.
I took the liberty of adding a sidebar template loader so I could dispense with the widget and code up what I want displayed from the convenience of localhost with a git push to deploy. Sweet.
Thanks!
I was just getting ready to ask a question when I stumbled on this which will work for me. I want to put two message inside the box – two text boxes. How can I get them to line up side by side?
You’d have to create some additional containers and place them inside the .welcome-text markup. Then float one left and the other right.
Brian,
How would I put some ‘space’ (margin) below it? (It is touching the top of the primary sidebar widget box in the “Streamline” theme).
Thanks,
Mark Besh
Visual Impact Systems
Add some bottom margin to .welcome-text CSS. Would look something like in the bold below:
.welcome-text {
border-bottom: double #ddd;
border-top: double #ddd;
font-family: ‘Lora’, serif;
font-size: 30px;
line-height: 1.0;
margin: 0 0 20px;
overflow: hidden;
padding: 25px 0;
text-align: center;
}
Brian,
Work perfectly! Thanks!
Mark
Now…if I could only make my font BIGGER in that Welcome slot AND figure out how to place my own LOGO in the current “home” location.
Hello David just edit the Welcome text you added to your CSS
.welcome-text {
background: #fffffe;
border-bottom: double #000;
border-top: double #000;
font-family: ‘Lora’, serif;
font-size: 40px; <—–Change it were to see this to any size you like
line-height: 1.0;
overflow: hidden;
padding: 25px 0;
text-align: center;
}
.welcome-text p {
font-size: inherit;
line-height: 1.0;
margin: 0;
}
Very easy stuff
.
I was wondering if you can show us how to add two after post widgets as in Focus. This would come really handy as you could use one for an Add and another one for some cool stuff such us…something else.
Hi question – this is advertised in the WP.com version of the theme; I am helping someone design her site and she really wants it to look like yours with this Welcome Text Widget. There is a Welcome Text widget on the Wp.com version but I can’t seem to get it to take. Nonetheless, are you saying that this big type ‘welcome’ text widget as you have it on your site can’t be done in WP.com? Thanks.
All you should need to do is create a text widget and place it into the Welcome Text widget area.
Brian I can’t see any widget or text that you’re talking about, did you already remove it? If you did, could you amend this post to have a screen shot? I’ve literally spent 15 minutes going through pages and viewing source searching for Starbucks and I have no idea that this post is referring to. Thanks in advance.
Sorry about that Rob – good call on updating the post, which I’ve just done.
Hello Brian looks GREAT as always my friend. I have working on a few tutorials of self to make things a bit simple.
Hello Brian looks GREAT as always my friend. I have been working on a few tutorials of self to make things a bit simple. Sorry for the double post…typo
This was just what I was looking for. But how do I put the widget on just the home page of a site?
I guess it’s a conditional but I don’t know where to put it in the code you shared.
Thanks.
Yeah, it’s pretty much the basic if is home conditionally logic wrapped around the function.
This doesn’t work with Prose unless you edit the functions.php file, which it says you shouldn’t.
If you try and edit this in the Custom Code section as recommended, it doesn’t work.
Hm, not sure why that wouldn’t work. Are you sure it’s saving properly?
It works fine with my demo install, but not on a live site. Will fiddle and sort it. Thanks for sharing the code.
Even weirder. Let me know if you figure it out.
Hi Brian,
With Prose you have to register your widget with the Genesis Simple Sidebar plugin and then put the Add Action in the Custom code area and the CSS in the Custom Css.
When you register the widget with Simple Sidebars the ID must be welcome-text exactly as in your example.
It would be great if you could add the condition to the action. I can’t quite figure that syntax so I can have the welcome text widget just on the home page. Prose doesn’t have a home.php like other Genesis child themes.
Ah yes – but you could add a home.php file into Prose with the simple Genesis function in it.
Sounds silly but how to add a home.php file into Prose??
Hi Brian,
Haven’t managed to figure it out at all after a couple of hours, diligent copy and pasting and then even reinstalling the theme.
Very weird.
having a blast learning new things this w/end…simply by following all of your great tuts step by step … this one again worked no hitches.
Can I experiment with Italic and/or colour of text in the ‘welcome’.
Also is there a quick tut link you could shoot for ‘possibly’ adding new fonts to the family (eleven40) – cheers
How was your son’s pitching this w/end ?
grt shot.
Regards
Hey Paul – thanks for the comment! If you are looking to add a new font, head over to StudioPress where we explain how to add Google fonts to your theme/website.
Hi Brian,
Is there a way that I can have this welcome text widget only on the homepage and not on all pages of the site?
Yes, there is – you’d have to wrap the function call with a conditional statement (if is home).
Hey Eddie,
The code you need is:
/** Add the welcome text section */add_action( ‘genesis_before_content_sidebar_wrap’, ‘custom_welcome_text’ );
function custom_welcome_text() {
if ( is_home() )
genesis_widget_area( ‘welcome-text’, array(
‘before’ => ”,
) );
}
Thanks Brian for the Explanation and Thanks Jon for the code. I was sure that someone here would help me figure this out. My blog is powered by the Eleven 80 theme that comes with the Widget already I needed that modified, now I can make the tweaks for the site to function like the way I want it. Thanks Again.
Thanks Jon, that code makes all the difference! I’m loving it on the homepage
Thanks for the explanation and code. This was exactly what I was looking for!
Unfortunately the code given by Jon makes my Balance theme blog crash. I’ve tried adding it to functions.php and it breaks. I’ve tried adding it to home.php and it breaks to.
Is there a way of putting this widget across the top in the Balance theme in the home page only?
Hi Brian, thanks for sharing this code for the welcome text. I copied the code on my site, but I still don’t know how to get the font size for the welcome text to be the same size as it is in the demo for eleven40. Any ideas? Thanks!
Hey Dustin – in the text widget, do you have the Add Paragraph tags option checked?
Ah, thanks Brian! I got it to work. I originally put the words in the title section, but then switched it and put it into the section below it in the widget. I have one last question if that’s ok, in the eleven40 demo, on the left side there is the social media title and links below that (dribble, facebook, google, tumblr, twitter). Is there a plugin for that? Or do I have to write code manually? Thanks!
Hi Brian, I am trying to figure out how to remove the Welcome Text widget from a single page.
I’m using it to display a portfolio section on each page, but I do not want the widget on the Portfolio page.
Thanks for your help.
Chris
Just wanted to report that I have a solution to this problem of mine…
/** Remove Portfolio Widget from Portfolio Page**/
add_action( ‘get_header’, ‘child_sidebar_logic’ );
function child_sidebar_logic() {
if (is_page(1714) ) {
remove_action( ‘genesis_after_content_sidebar_wrap’, ‘custom_widget_area_name’ );
}
}
- Chris
Hi, this may sound stupid, but i have a theme with a text widget in it already…but to be quite honest…..I don’t really understand the purpose or point of the “text widget” what is it and what is the point of it?
Thanks
It’s just a way of putting in some text that you might want to display sitewide. If you look at the eleven40 demo, you’ll see what we put there.
Can I follow this guide to create a text widget in different themes ?
Yep, it should work just the same.
I tried to add a Welcome text widget but I failed !
the widget box appeared in Widgets after I removed “genesis” from the code but when I added a Text nothing appeared .
is there different code can i try to add a welcome text to my site ?
I love how simple you made this. I want to change the widget location to sit above the main content on each page, but not to change the placement of the sidebar. Is that possible? I’m guessing that I just need to change the hook, but I don’t know what to change it to. I’m just starting in WordPress so this is all new to me
Yes, that’s just a matter of using a different hook – possibly the genesis_before_content one.
I am planning to use this with eleven40 theme, would it work or do i need to make any modifications to style.css.
Hi, I was wondering, is this tutorial outdated? I already have a “Page Title” area on the right-hand-side of my widgets page that does the same thing and is even formatted to look the same.
I’m pretty sure i didn’t add it in manually, and currently all my plugins are disabled, but it still appears.
I can see the code block:
/** Add the page title section */
add_action( ‘genesis_before_content_sidebar_wrap’, ‘eleven40_page_title’ );
function eleven40_page_title() {
genesis_widget_area( ‘page-title’, array(
‘before’ => ”,
) );
}
Just curious, plus the answer to this comment may help others
Hi Eddie, Jon or Brian
Where do I insert the conditional code (for horizontal text on homepage only)?
As tried functions (led to error), css (nothing changed) and inside the widget (displayed code).
It’s good to be a rookie
Thanks, Michael
hey there,
very nicely explained, and easy to follow, I did all you described but it didn’t work on my genesis child theme ‘magazine’ so I still have a squashed up slider, how can I make this work on ‘magazine? What am I doing wrong?
take it back, just spotted the widget but its at the bottom . lol
okay, I got the welcome widget, but how do i fix my slider bar to look like the magazine demo?
This tutorial was written for the eleven40 theme. Do you have a link so we can see what things currently look like?
got it working now on the genesis theme, generate .. looks great !
Thank you for this article, I came across this when I was looking for a conditional code to display on the homepage. Obviously the code I require requires additional elements but looking at this given me a better understanding of what I did wrong. It’s one thing to know how how to copy code, it’s quite another to have an in-depth understanding of how it works.
This is simply a validation of my wonderful experience with the Genesis Theme Framework. As a UX designer, it really is quite a challenge for me to spread myself too thin. Using Genesis Framework as a leverage to know exactly what is possible, what can be done and what requires more coding gives me a very clean method of modularizing what I can or cannot do. Instead of trying to worry about a simple error in bad code, I can focus on the bigger picture and work my way to further detail. Thank you Brian, I want to start becoming a part of this Framework community.