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

Was This Tutorial Helpful?

Free

$0

Access only to all free tutorials per month.



Monthly

$75

Access to 10 premium tutorials per month.


Tutorial Request


Includes code guarantee and coding support.

Yearly

$500

Access to 15 premium tutorials per month.


Monthly Tutorial Request


Includes code guarantee and priority coding support.