Add Image After Front Page Primary Nav Menu Apparition Theme

Tony asked this question awhile ago on the StudioPress community forums:

Is it possible to add a full-width featured image under the primary navigation bar in the Apparition theme home page.

There’s at least 2 options you can choose from.

  1. You can hook in the image from your images folder using the genesis_after_header hook.
  2. Or you can hook the image using the genesis_before_content_sidebar_wrap hook

Lets look at the first 2 solutions i tested locally on the Apparition child theme by StudioPress.

Using The After Header Hook

This solution results in a full width image displaying immediately after your primary nav menu and doesn’t require any additional CSS code.

Full Width Image After Header Genesis

The code pulls the image from your child themes images folder.

And here’s the code which goes in your functions file.

Using The Before Content Sidebar Wrap Hook

This solution only displays your image the width of the header and requires a small amount of CSS be added to your child themes style.css file to remove the gap which you’ll see after adding the PHP code.

remove inner padding before content sidebar wrap genesis

And here’s the PHP code which goes in your functions file and the CSS for your style.css file.

Note: All PHP code should be copied from the view raw link in the Gist. The CSS classes used in this tutorial assume you’re using the XHTML version of the Apparition theme and haven’t converted it to HTML 5 markup.

Other Options

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.