Have you seen the Pretty Pictures Theme from StudioPress? It’s stunningly simple and right in line with the other clean, minimal themes created by Brian Gardner.
The text overlay on the large featured image is one of my favorite design elements of Pretty Pictures. The theme layout cleverly takes advantage of Genesis custom header support to pull this off. You just go to Appearance > Header to upload your background image and then tootle on over to Appearance > Widgets > Header Right to add your overlay text.
But if what if you’re not using Pretty Pictures and want to add the text overlay effect to a different StudioPress Theme?
A couple of readers asked this question after I posted about how to add a featured slider to the Minimum Theme. This post will show you one way to go about it.
Text Overlay on the Minimum Theme
I’m going to tackle this simply. The large featured image that appears on the Minimum home page is hard-coded. We’re going to use a widget area plus a little CSS to place our text over the image.
Create a New Widget Area
We need to register a new widget area to house the text we’re going to show over the featured image. From your WordPress admin dashboard, go to Appearance > Editor and open up functions.php.
Please read this article before making any edits.
Add this bit of code, preferably toward the bottom of the file with other widgets being registered:
Add the Widget Area to the Home Page
If you were to go check out Appearance > Widgets, you’d see that your new widget area exists. Now we need to specify where it shows up.
We’re still rooting around in functions.php, so find the featured image section (around line 66 in a default install of the Minimum Theme).
Change this:
function minimum_featured_image() { if ( is_home() ) { echo '
'; }
To this:
function minimum_featured_image() { if ( is_home() ) { echo '
genesis_widget_area( ‘my-widget’, array( ‘before’ => ‘
echo ‘
'; }
Add some CSS Styling
Open up your stylesheet and locate the style for the #featured-image. This is going to be the container that holds our featured image as well as our overlay text. Change it out to this:
#featured-image { height: 600px; /* Set this to your actual image height */ margin: 0 auto; position: relative; width: 1600px; /* Set this to your actual image width */ z-index: 0; }
Next we need to style the actual featured img
. In the previous step we added a class called underlay, so let’s add some style for that:
.underlay { position: absolute; z-index: -999998; }
The z-index property works within positioned elements to stack, or layer, items. Giving a ridiculously large z-index to the image basically ensures it’ll display BELOW our text. You can read more here about how z-index works.
Last, but not least, we need to style our widget area that’s going to hold our overlay text. Your style will vary based on your design and whether you want the text to fall on the left, right, or center of your image. Here’s an example if I wanted my text to be on the left side.
.my-text { overflow: hidden; padding: 10%; width: 30%; } .my-text p, .my-text h4 { color: black; margin-bottom: 15px; text-shadow: 1px 1px #CCCCCC; }
After testing the above code, here’s what I came up with for the home page on the Minimum Theme:
Try it out and let me know how it works for you!
Sweet! Great post; thanks for the tip and great explanation. Cheers, Steve & Sally Wharton, Seattle
Hi Carrie
I think that from an SEO point of view all text should be real text and not text that is part of an image.
The GoogleBot can only read real text, it can’t read image text.
The Pretty Pictures theme solved the problem, but sadly no solution for Minimum 2.0… until the Genesis coding fairy appeared just before the New Year and sprinkled coding dust over the functions.php file.
Thanks for coming up with what my old maths teacher would call “an elegant solution” and a solution that most genesis users would be able to attempt.
Having a solution like this means that you can change the text, restyle the text and reposition it.
Lots of Minimum 2.0 users will absolutely love this.
BTW – I have got to have a pair of those boots, just got to!
Happy 2013 to you and yours Carrie.
Keith, you are spot on regarding SEO benefits to using actual text. I think the text also renders cleaner as opposed to any pixelation that might happen when saving to jpg or png.
Can’t wait to see this in action on your site. Let me know if you run into any problems!
As for those boots, Texas is crawling with them. You make it over to this side of the pond and I’ll take you shopping myself. 😉
Really great tutorial, here is what I had to do to get this tor work.
Using this code allows you to keep the same “sample.jpg” structure of the original. I also changed the names of the widget and the class. I called them “text-overlay” and “widget-text-overlay”.
function minimum_featured_image() {
if ( is_home() ) {
echo ”; // add underlay class
genesis_widget_area( ‘text-overlay’, array( ‘before’ => ”, ) ); //replace widget ID if needed
echo ”;
}
Here is how I registered the widget:
/** Register widget area */
genesis_register_sidebar( array(
‘id’ => ‘text-overlay’,
‘name’ => __( ‘Text Overlay Widget’, ‘theme-slug’ ),
‘description’ => __( ‘Places text over homepage image’, ‘theme-slug’ ),
) );
And then of course changed the CSS a bit to this:
.widget-text-overlay {
overflow: hidden;
padding: 10%;
width: 30%;
}
.widget-text-overlay p, .my-text h4 {
color: black;
margin-bottom: 15px;
text-shadow: 1px 1px #CCCCCC;
}
Works great though, thanks for the write-up, made my life much easier.
Glad it’s working for you! Thanks for sharing your code!
I echo the “SEO likes this” comment, it’s definitely better to have the text be “text” if at all possible. (I was noting this earlier this morning while reading someone else’s blog, and contemplating writing a plugin to reposition caption text on top of the image. Oh well…)
I did have to chuckle, though – in all the above images dealing with real text on photos, the text is not real text! lol
Haha – Oh so literal, yankeerudy! Just dishing up a little irony. 😉
Hi Carrie, I am trying to add an opague background around the text widget and for some reason it’s putting it around the text and not the text widget itself. How can I add an opaque background to the widget area? Thanks in advance.
Hey Anita, can you shoot me a link?
Great post!
Ok, full disclosure here: Im a bit of a noob.
However, I have changed all the code and set everything up as described here but Im obviously missing something – How (or where) are you actually putting the text?
I tried just dropping a Text area into ‘My Widget’ but that didnt seem to work. What am I missing here? I feel like its something obvious and elementary…(See Noob).
Thanks in advance for the help!
Hey Josh,
Glad you found it helpful. Gotta check with you – did you actually type text into the text widget? If it’s a empty widget, nothing will show. 🙂 Provide a link to your site and I’ll see if I can help troubleshoot!
Carrie
Carrie –
Thanks for the reply! I did put text in there but I dont see anything. I dont even see the div in my browser’s inspector. The site is under massive construction and Im just not sure what Ive done wrong.
http://lumetechnologies.com/
Hmmm you are right! That’s what I was going to look for, too. Can you post the entire code chunk for function minimum_featured_image() ?
Sure thing! Here’s what I have in my functions.php file:
function minimum_featured_image() {
if ( is_home() ) {
echo ”;
genesis_widget_area( ‘my-widget’, array( ‘before’ => ”, ) );
echo ”;
}
elseif ( is_singular( array( ‘post’, ‘page’ ) ) && has_post_thumbnail() ){
echo ”;
echo get_the_post_thumbnail($thumbnail->ID, ‘header’);
echo ”;
}
}
Ah! Try this:
if ( is_home() ) {
echo ‘
genesis_widget_area( ‘my-widget’, array( ‘before’ => ‘
echo ‘
‘;
}
Just need to throw those divs in there and you should be good.
Awesome Carrie! I’ll try this tonight – thanks for the help!
Your tutorial worked perfectly for me, absolute beginner.
My next step is to adapt this tuto to add an optin-form over the featured image of my home page.
Thanks a lot Carrie !
That’s what I like to hear! What are you going to use for your opt-in form?
I’d like to use my OptinSkin plugin, as it can perform split tests and analytics.
I want something quite simple, like your optin in your footer, for example.
Hey ! I just noticed your optin form just below your header ! That very nice and very close to what I want.
How did you do that ?
Just a quick note. This is a good tutorial, but unfortunately, if you change anything else in the way Minimum was made, you’ll likely break other things in the process.
For example… While it works fine for the homepage, it also means that all featured images in the site have to be the same size as the homepage image. In the site I’m working on, only the homepage image is 1600px wide. All the post featured images are 740px (content width). Secondly, no it doesn’t play well as mobile responsive. Additionally, the guys at Studiopress had created a plugin for Minimum to allow the use a thumbnail featured image and a large banner image. Given, I couldn’t get this code to work well on my site, I’m not going to take it as far is to see how it would play with that plugin.
Thanks for the tutorial and for providing the code. Unfortunately, for it to work for some, they would also need to be CSS and PHP ninjas to be able to customize it to work for their sites. I had to remove it and go back to have it was. Thanks nonetheless. -Danny
Hi Danny,
The code in the tutorial won’t break anything in a standard installation of Minimum, but you’re right – the tutorial does require some working knowledge of CSS and PHP – especially if you’ve made other modifications to your theme. You can use conditional statements and declare a second ‘featured image’ size to handle featured images on those inner pages. I’ve played with the GMIE plugin you mention and it’s fantastic.
Keep playing and have fun!
Carrie
Hi Carrie,
Fantabulous aticle! It is so very helpful to me as I do not have training in coding but I am editing my wordpress site on my own so I am learning as I go. I am using the Minimum theme and I just needed to ask if I want to change the huge featured image size on my home page to a smaller height do I simply add this code into the stylesheet and adapt it to the size I want? Or should I remove the irrelevant lines, if any?
#featured-image {
height: 600px; /* Set this to your actual image height */
margin: 0 auto;
position: relative;
width: 1600px; /* Set this to your actual image width */
z-index: 0;
}
Cheers,
Su
I’d leave all the properties in there and just change out your width/height as desired! 🙂
Thanks Carrie, I will try it out and let you know what happens!
Cheers,
Su
So often I’m looking for info/help on stuff and run across sites that are filled with “corrections” in the comment sections or the advice is insanely complex and would require a client to be familiar with something other than WordPress visual editor. This site is clearly not one of those – to echo the first commenter, I think quite possibly you are the Code Fairy Godmother! I am one of those people who never signs up for newsletters, etc. as a matter of policy/stubbornness, whatever. I’ve never done it – until now. For the first time ever, I’m actually going to use an optin form – yours! I consider myself intermediate, and there’s not a lot of stuff “out there” for a lot of us who aren’t up to our elbows in php all day, but are definitely not beginners, either. Thanks so much for so much great information! I just realized how spammy this comment looks, but I mean it sincerely, lol 🙂
Love -> “Code Fairy Godmother” 🙂
I followed your instructions, but seem to have lost the picture on the home page. Where do I find it and how do I insert the picture of my choice. Sorry if this is a sophomoric question.
Hi Carrie,
For some reason, my text continues to appear below my image on my home page.
Do you know why this is the case?
Hi,
If you can post a link, I’ll take a look, but most likely you’ll need to tweak the CSS.
Carrie
I’m having the same problem as Etienne (text appearing below image). Can I know what the solution was?
Thank you so much, Fairy Codemother! 😉 I love it!!
I managed to jack up the entire site by not commenting out the old featured image function before adding the new. But once that was all fixed and I got it all lined up right, there’s no way I would remove the overlay. I just love it that much.
Wondering if adding a translucent white background (kinda see through) to the overlay is easy enough or maybe I should just add it to the featured image photo in Photoshop.
That’s a tricky one. If you add it to the widget div, the text will pick up the opacity, too. I think if you get one extra div in behind the text you could target with an opaque background. Never do with Photoshop what you can do with a little CSS. 🙂
Hi Carrie! Loving your website. Lots of useful information!
I’m thinking of purchasing the minimum theme from studiopress but I’d really love for the top navigation menu to remain sticky as you scroll down the page.. Do you know if this is easy to do?
I’d also like the sticky menu to fade out when it’s not being hovered over. Basically, I want it to look like this! http://nikkijumper.com
Let me know if you think this is do-able. Thank you! 🙂
Hey Lauren,
I haven’t done that customization, but it certainly could be done with a little custom CSS work. 🙂
Minimum is a fun theme!
Carrie
Hi Carrie,
Great article, and I’m loving your site!
Everything worked perfectly for me except one thing. My featured image is no longer mobile responsive.
I did everything the article described and the only edit was the dimensions of my featured image (2000×600 instead of 1600×600).
Is this a known problem?
Just swapping out the image alone shouldn’t impact re-sizing on mobile. Maybe something else going on. Post a link to your site and I’ll take a look.
Thanks… not sure what it would be? It worked fine previously.
Website is http://www.gradskills.com.au
Also, can you please let me know how to ‘center’ the widget as opposed to the left? 🙂
Ah, I went back and read the tut – I didn’t test it originally for mobile responsive and so it is not. I’ll work up a revised tutorial as soon I can.
In the mean time, add “margin: 0 auto;” to .my-text to center your overlay.
Thanks, really appreciate it. Looking forward to it!
Hi Carrie,
I implemented the text overlay on my site and, after fiddling around, removed it as it was not responsive. Or more specifically, the image was no longer responsive.
I too would love to see a reworked tutorial that is mobile-friendly. Thanks!
I too would love to see a responsive solution. I’ve been ‘tinkering’ for hours without success.
Thanks, Tom
Hi Carrie,
Thank you for sharing your Genesis-wisdom…lots of useful information for WP novices like me!
Add me to your ever growing list of Desperables interested in a mobile responsive text overlay for the Minimum featured image.
My case: I’d like to add “(artwork-title) – detail” in the bottom right corner of my artwork(=FeaturedImage), on my art website: gordanavukovic.com
Great tutorial, thank you so much for sharing! I’m wondering if you had any ideas on how to do an image overlay over the Genesis Featured Posts thumbnails? So instead of an image behind it like a background does, an image on top of it?
I haven’t done it, but I think the same principle would apply. You’ll have to play with positioning of that block level element of with the overlay image and then use opacity.
One word of caution going that route, though – do a little reading on browser support for the opacity element and how that might impact accessibility (i.e. screen readers). If opacity fails, your image would be shown in all it’s glory, completely hiding whatever is behind it.
Poke around over at css-tricks.com – there are some great articles. 🙂
Argh on trying to implement this on minimum pro…
Looks like
function minimum_featured_image() {
now replaced with front-page.php code:
if ( ! get_background_image() )
return;
And employs Scott Robin’s backstretch.js which makes having a max-height really hard..
But might make just adding text and formatting css easier…
You’re ahead of me – I haven’t gotten to play with Minimum Pro yet! Be on the lookout for a plugin from Andrew Norcross that makes a backstretch slideshow…cool stuff. 🙂
Here’s how this can be done in Minimum Pro: http://sridharkatakam.com/overlaying-text-background-image-minimum-pro/
Awesome tutorial Carrie. Double awesome.
The million dollar question for anyone… how this works for other themes?
My theme has a homepage full width widget area, so inserting images via html works easily. But as this requires an overlay of text and CSS (of the hardcoded image), I’m wondering about work arounds.
Is there a way to load an image to wp-content and tell the widget CSS to pull that image for a background, then insert text into the widget area via appearance > widgets, then style in CSS? Or another way?
Thanks!
Hi Carrie, I am a fan of your Studio Press tutorials, and I finally have the project to use this one with. Only thing is, Minimum Theme has been updated. Will this tutorial work on the new Minimum? Would really like to use it. Thanks for any direction you can give…and great work!
Hi Cynthia,
Check out this great tutorial from @srikat:
http://sridharkatakam.com/overlaying-text-background-image-minimum-pro/
Carrie
So has anyone ever gotten this to work on Minimum 1.0 while getting responsive styling to work?
Cariie,
Thanks for the tutorial, I have a little different twist to the question here. I have seen on many sites where they have put a widget over a slider. For example, real estate websites that have an image slider and put a search box right over the top of it, or an image slider with a contact box/form over the top of it. Would this work for that application or can you explain how that would be different? Thanks
Hi Ryan,
The concept would be the same – you could either hard code your slider (instead of the static image in this demo) or just create two widget areas and use CSS to position them on top of each other.
Depending on the slider you’re using, a lot of them have titles/excerpt overlays built in to them, which might tackle everything you need in one.
Cheers,
Carrie
Hi there,
I have the minimum pro theme, and I want to add a text box to overlay the main image. I want a text box like you see here: http://www.goodlifefitness.com
BUT on this site: http://demo.commit2bfit.ca/
I want the box to give me the ability to have people sign up for the newsletter or view class schedule. What kind of code or widget do I need?
Hey Emily,
Check out Sridhar’s tutorial here for adding the widget area to Minimum Pro.
Carrie
The link doesnt work 🙁
Here: http://sridharkatakam.com/overlaying-text-background-image-minimum-pro/
Thanks Sridhar!
Hi Carrie, This is a fantastic tutorial. Relatively easy even for a complete beginner like myself!
I am slowly building my site and when I do everything described above, the featured image disappears, even though the text shows as it should. Any clues? Here’s what I have in functions.php
function minimum_featured_image() {
if ( is_home() ) {
echo ”; // add underlay class
genesis_widget_area( ‘my-widget’, array( ‘before’ => ”, ) ); //replace widget ID if needed
echo ”;
}
Are you using older Minimum or Minimum Pro? This tutorial was written before Pro was available. Try changing the conditional from is_home() to is_front_page() and see if that does the trick.
Hi Carrie, Thank you for the reply! I’m using Minimum 2.0.1
I managed to get the image to show up. The image shows as a different size than before (my image file is exactly the same size as sampleimage.jpg). On my laptop this causes a horizontal scroll bar because the image no longer fits. On the large screen of my desktop, the text appears differently in relation to the image because the image has the space it needs.
here’s what i have in functions.php. Is it the way I’ve accessed the image? Thank you again for the tutorial and you’re speedy help!
function minimum_featured_image() {
if ( is_home() ) {
echo ”; // add underlay class
genesis_widget_area( ‘my-widget’, array( ‘before’ => ”, ) ); //replace widget ID if needed
echo ”;
}
I apologize, I posted the wrong code. here it is:
function minimum_featured_image() {
if ( is_home() ) {
echo ”; // add underlay class
genesis_widget_area( ‘my-widget’, array( ‘before’ => ”, ) ); //replace widget ID if needed
echo ”;
}
Hi Great article, thankyou. Can I also do this on the featured image of a portfolio item in minimum pro theme?
Hey Carrie, great tutorial once again. Thanks for sharing the goodness. BTW, the link to Pretty Pictures Theme returns a 404 error. You might want to fix that. Thanks!
Thanks, Carrie.
I’ve found myself stuck on your website as I re-design mine… Seriously considering one of your courses to gain a better understanding of Genesis hooks and PHP. Is there one in particular you recommended?
– Sean
Hey Sean!
Absolutely. I’d start with Customizing themes with Genesis for WordPress. That course focuses on “deconstructing” Genesis and working with hooks and filters.
From there, WordPress and Genesis: Building Child Themes from Scratch will help you understanding creating a theme from the ground up.
Those are both Lynda.com courses. If you don’t have an account there, use this link (lynda.com/trial/carriedils) for a free 10 day trial. That’s plenty of time to take both courses. 🙂
Cheers,
Carrie
hi could this work for the featured image widget. The title is currently above the image. But I want to position an overlay with the title on the bottom of the image.
I haven’t tried it, but you could probably achieve that with some CSS wizardry.
Hi Carrie, I appreciate your tutorial as it is very helpful! I have one question. Is it possible to give the widget functionality to place the overlay text at different locations? So have an option to click for top center, top left and top right and so on? Any advice is appreciated.
Hello, that would be considerably more effort to create a widget with that ability rather than just using CSS to position the widget where you’d like to.
Right. I did find a plugin that offers many positioning options but also has a roll-over effect. Perhaps I’ll go with this and just edit the code for the unwanted overlay styles. I appreciate your opinion and prompt response! Here is the plugin in case anyone wants to know: http://codecanyon.net/item/caption-pro-image-caption-wordpress-plugin/8675962
This article contained the objective that I’m trying to achieve. Unfortunately, this was written more than four years ago and the minimum-pro theme has apparently changed during that time. I say this because the functions.php doesn’t contain the code that you reference. For example, function minimum_featured_image() is not in the current functions.php of the minimum theme.
As a result, this post in its current form is almost useless.
Sorry, mate. It’s hard to keep a library of free resources up to date. That said, the coding principles are still quite valid even if the code isn’t an exact match to the current version of Minimum Pro.
Hey Carrie, Thanks for the Tutorial!
I am gonna go ahead and try to do this. But before that – Is there an easier way to do this in 2018?
Hi Carrie, do you have an updated (for 2020) tutorial for the text overlay on the Minimum Pro front page featured image? Is there one you can refer us to?
Hey Jacqueline, the good news is it’s WAY EASIER now. You’ll want to use the new Gutenberg block editor to create the home page (not the classic editor). There’s a block specifically for overlaying text on a background image.