How to add a Featured Image Background Parallax section on single Posts in Parallax Pro

This tutorial provides details on displaying Post Title and Post Info on Featured Image below header with parallax effect on single Posts in Parallax Pro.

For Posts that have a Featured image, the featured image will appear as the background for the section below header.

For Posts that do not have a Featured image, a default image will appear.

Summary of steps:

1. Register Single Parallax Section widget area
2. Create a shortcode that outputs the URL of author page for the entry author. This is needed because Sridhar Katakam used by genesis_post_info() does not work outside the loop.
3. Set the URL of Post's featured image (if present) as background image for .single-parallax-section in a .js file.
4. Simulate Parallax effect on .single-parallax-section by changing the background position on scroll in the .js file.
5. Hook a function to genesis_after_header that outputs single-parallax-section div having Post title and Post info.
6. Customize entry meta in the entry header using genesis_post_info filter, essentially to replace Sridhar Katakam with [post_author_posts_link_outside_loop].
7. Load the .js file on single Posts. If the Post has a featured image, pass its URL to the js file using wp_localize_script().
8. Add styling.

Step 1

Add the following in Parallax Pro's functions.php: