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

WP SITES

2662

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

Add Image After Header Using Customizer

This tutorial for a client and members is a more complicated version of the previous post about how to add a image after the header in the Ambiance Pro themes index.php file.

This version extends further by using Backstretch jQuery and the flexibility of the customiser as you can see in the following image:

back-stretch

This solution is better because it stretches the image according to the screen size and enables you to try different images simply by adding and removing them in the customizer.

Tested on the Ambiance Pro themes index.php file which is used for the front page.

There’s 6 steps that you need to take to complete this tutorial:

  1. Load the jQuery script directly from the index.php file and hook in the div class.
  2. Add a new .js file to the js folder specifically for the front page image as we’re using a different class.
  3. Add a default image to your child themes images folder.
  4. Add the customize.php file to your child themes lib folder.
  5. Load the new customize.php file from functions.php
  6. Add some basic CSS to your child themes style.css file

1st step

Register for full access

Related Templates & Code

  • Genesis Page Templates for Background Images
  • Hero Image Behind Site Header & Menu With Text Overlay In Genesis Sample Theme

After Header Image Ambiance Pro Theme

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems