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.
- Create a new front-page.php file which gets uploaded to your child themes root directory.
- Add PHP code to your child themes functions file to hook in a widget and image to your functions file.
- 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.
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?
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.
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.
Nel
Thanks for the idea about Evernote.
Have bookmarked and will look into it.