Display Widget Text Content Over Image In Genesis

In this tutorial, i’ll show you how easy it is to add text over an image like this:

The above example uses a text widget positioned using CSS and pretty much replicates exactly what the official WordPress.com website looks like at the time of publishing for logged out users.

Here’s what we’re going to do.

1. Create a new front-page.php file which gets uploaded to your child themes root directory.
2. Add PHP code to your child themes functions file to hook in a widget and image to your functions file.
3. Add CSS to your child themes style.css file to position the widget and style your text and button. Remove the button CSS if your theme already includes this code

The Code

Options

• You can change the genesis_hook position and display the image anywhere on any page like the footer.
• The CSS code includes code for the button which is optional as your theme will generally already include button code.
• You can add the functions code directly to the front-page.php template file however that’s not as flexible as leaving it in the functions file which enables you to use conditional tags after the function or more control.

Add Transparent Background To Widget

If you want to add a transparent background to your call to action which works in any browser simply replace the original CSS with this code.

Important Notes

• Media Queries not included as different widget content requires different CSS.
• Addition of image and widget can be coded using dozens of different options depending on your current theme, existing custom code and plugins etc.
• Some work is required on your behalf to make this solution work the way you want on the theme you have installed and the widget and/or widget content you choose.
• Tested on the Genesis Sample child theme and may need tweaking to work on other themes.

Related Tutorials

• Add Text & Button Over Full Width Image