Replace Header with Parallax effect

Do not edit the Twenty Eleven theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes.

I’ve actually already created a child theme and have gotten everything looking how I want to. I would just like to have a section of images using a parallax effect below the nav where the header images are. Don’t know the best way to go about doing that.

Um – you lost me a bit now… The header image is above the nav in Twenty Eleven. So do you want to replace that image or add something additional below the nav? Only the placement determines which template file you’ll be customising in your child theme.

O sorry. I swapped the position of the nav and the header. I have the nav as a fixed position element at the top, so the page scrolls behind it. What I’d like to do is insert a parallax effect below the nav, so that when you scroll down the page, it engages the parallax effect.

Ah! That means you definitely still need to be customising header.php. assuming your jQuery is in a separate file, you can enqueue it in the child’s functions.php file using something like:

function my_jquery_init() {
	wp_enqueue_script('my-script',
	get_stylesheet_directory_uri() . '/js/myscript.js',
	array('jquery'),
	false
	);
}
endif;
add_action('template_redirect', 'my_jquery_init');

Do remember to ensure that your script uses no-conflict wrappers.

Then it’s just a case of adding your div blocks before </header> in the theme. Obviously this is all very general. I, personally, have absolutely no idea how a parallax effect works. ??

@ carn21

I just found your post and it occurred to me that you may want to check this tutorial, which explains how to easily add a parallax effect to your WordPress theme (any theme!). You’ll just have to use the Parallax Background Builder that allows you to create this effect in a very user friendly way.