• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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:

text over image

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

transparent background

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

Reader Interactions

Comments

  1. R. Christian says

    May 9, 2014 at 6:44 pm

    So THANK YOU for this – so excited. Anyways, I wonder why my text falls off the image drastically when you adjust screens:

    What am I missing?

    Log in to Reply
    • Brad Dalton says

      May 9, 2014 at 9:22 pm

      You need to add Media Queries which will vary per theme and also vary depending on the size of your content.

      That’s not something i can accurately provide which will work for everyone.

      However, what you can do is use your themes existing CSS for Media Queries as a guide for creating custom code which makes your content mobile responsive.

      Log in to Reply
  2. Nel says

    May 9, 2014 at 5:06 pm

    Sweet ! Maybe you can consider to add the Evernote to share function at Jetpack. So that everyone can easily to grab all useful content. Cheers.

    Log in to Reply
    • Brad Dalton says

      May 9, 2014 at 9:25 pm

      Nel

      Thanks for the idea about Evernote.

      Have bookmarked and will look into it.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.