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