Responsive After Header Image Text & Button

This tutorial adds a after header widget area to the front page of the Genesis Sample child theme by StudioPress. You can add this featured to any other Genesis child theme however the CSS may need a little tweaking.

If you want to do the work yourself, you can take the code from the Enterprise Pro theme like i have done and add it to any child theme yourself which will require some time ( approx. 1 – 2 hours ) as well as modification and addition of code.

Demo Video

Here’s the demo video showing how the CSS for Media Queries works at different screen widths:

Here’s the Genesis – Featured Page width settings you need to configure:

Code Installation

After downloading and unzipping the folder below for logged in members, follow these instructions:

Step 1 : Upload the front-page.php file to the Genesis Sample themes folder. If you’re wanting to use this solution with a theme that already includes a front-page.php or home.php file, you’ll need to take the code out of the front-page.php file and add it to your themes front-page.php or home.php file.

Step 2 : Copy and paste the PHP code from the functions.php file to the end of your child themes functions.php file.

Step 3 : Copy & paste the CSS & CSS for Media Queries from the style.css file to the end of your child themes style.css file.

You’ll also need to configure the Genesis Featured Page widget in the Home Top widget area and choose a page to use for the content.

Here’s the download for logged in members:

Related Tutorials

• After Header Parallax Image