Genesis framework is among the most popular frameworks for rapid WordPress theme development. Whether it is the best one is out of the question – there is no “best” when it comes to development of any kind. What is excellent for one purpose could be completely useless for another purpose.
But one of the good things Genesis brings is that it comes with quite a lots of action hooks and filters, allowing us to easily rearrange elements on the template. Within this tutorial, I will describe how to create a front page with parallax effect based on widgets (although there are other ways to achieve this, such as ACF) and custom backgrounds (done through WordPress customizer).
If you’d like to test the code I’m about to show you, you’d need a working child theme because this is where all the code with Genesis theme development goes. At the end of this tutorial you’ll also find a link to a live demo.
Choosing the Parallax
Parallax effect has become increasingly popular in recent years (for a good reason) and is a frequent request from clients, while some of the best themes and web designs created in the last few years regularly include different types of parallax effects. Which one to choose is a difficult question because if searching for the “best one”, you can easily become overwhelmed with hundreds of parallax effect based on jQuery, pure JavaScript, pure CSS effects, etc. In order to keep the things simple, I have chosen a simple and lightweight (minified version has 6.50 KB) Parallax.js plugin. The plugin is licensed under the MIT license.
Once we have downloaded the script, we need to properly enqueue it into the child theme folder, preferably in js/ folder to keep the hierarchy clean:
add_action(‘wp_enqueue_scripts’, ‘gs_custom_enqueue_parallax_script’); function gs_custom_enqueue_parallax_script() { wp_enqueue_script(‘parallax’, get_stylesheet_directory_uri() . ‘/js/parallax.min.js’, array(‘jquery’)); }
Notice that parallax script is dependent upon jQuery.
Registering content areas
There is a default register_sidebar( $args ); WordPress function, but Genesis provides genesis_register_sidebar(); function which does the same. As it has been said previously, we decided to use widgets to create content on the front page sections. It is up to us how many sections we want – for this purpose, we will register six homepage widget areas (sections). This would go into functions.php:
//* Register widget areas genesis_register_sidebar( array( ‘id’ => ‘home-1’, ‘name’ => __( ‘Home Section 1 (parallax)’, ‘gs-custom-theme’ ), ‘description’ => __( ‘Home Section 1 (parallax)’, ‘gs-custom-theme’ ), ) ); genesis_register_sidebar( array( ‘id’ => ‘home-2’, ‘name’ => __( ‘Home Section 2 (no-parallax)’, ‘gs-custom-theme’ ), ‘description’ => __( ‘Home Section 2 (no parallax)’, ‘gs-custom-theme’ ), ) ); genesis_register_sidebar( array( ‘id’ => ‘home-3’, ‘name’ => __( ‘Home Section 3 (parallax)’, ‘gs-custom-theme’ ), ‘description’ => __( ‘Home Section 3 (parallax)’, ‘gs-custom-theme’ ), ) ); genesis_register_sidebar( array( ‘id’ => ‘home-4’, ‘name’ => __( ‘Home Section 4 (no-parallax)’, ‘gs-custom-theme’ ), ‘description’ => __( ‘Home Section 4 (no-parallax)’, ‘gs-custom-theme’ ), ) ); genesis_register_sidebar( array( ‘id’ => ‘home-5’, ‘name’ => __( ‘Home Section 5 (parallax)’, ‘gs-custom-theme’ ), ‘description’ => __( ‘Home Section 5 (parallax)’, ‘gs-custom-theme’ ), ) ); genesis_register_sidebar( array( ‘id’ => ‘home-6’, ‘name’ => __( ‘Home Section 6 (no-parallax)’, ‘gs-custom-theme’ ), ‘description’ => __( ‘Home Section 6 (no-parallax)’, ‘gs-custom-theme’ ), ) );
Registering customizer options
Given that we decided to create six content areas on the homepage, we will need six customizer controls as well. Three of them will control the background images and three will control the background colors. Here’s the code:
function gs_custom_theme_home_sections ($wp_customize) { // Add new section on customizer $wp_customize->add_section( ‘gs_custom_theme_front_section’, array( ‘title’ => ‘Front Page Options’, ‘priority’ => 201 ) ); // Register three background image sections $wp_customize->add_setting( ‘gs_custom_theme_setting_background_image_1’, array( ‘default’ => ”, ‘sanitize_callback’ => ‘gs_custom_theme_sanitize_bgi’, ) ); $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, ‘gs_custom_theme_background_image_1’, array( ‘label’ => __( ‘Background Image 1st’, ‘gs-custom-theme’ ), ‘settings’ => ‘gs_custom_theme_setting_background_image_1’, ‘section’ => ‘gs_custom_theme_front_section’, ‘priority’ => 15 ) ) ); $wp_customize->add_setting( ‘gs_custom_theme_setting_background_image_2’, array( ‘default’ => ”, ‘sanitize_callback’ => ‘gs_custom_theme_sanitize_bgi’, ) ); $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, ‘gs_custom_theme_background_image_2’, array( ‘label’ => __( ‘Background Image 2nd’, ‘gs-custom-theme’ ), ‘settings’ => ‘gs_custom_theme_setting_background_image_2’, ‘section’ => ‘gs_custom_theme_front_section’, ‘priority’ => 17 ) ) ); $wp_customize->add_setting( ‘gs_custom_theme_setting_background_image_3’, array( ‘default’ => ”, ‘sanitize_callback’ => ‘gs_custom_theme_sanitize_bgi’, ) ); $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, ‘gs_custom_theme_background_image_3’, array( ‘label’ => __( ‘Background Image 3nd’, ‘gs-custom-theme’ ), ‘settings’ => ‘gs_custom_theme_setting_background_image_3’, ‘section’ => ‘gs_custom_theme_front_section’, ‘priority’ => 19 ) ) ); // Register three color background sections $wp_customize->add_setting( ‘gs_custom_theme_setting_color_background_1’, array( ‘default’ => ‘#000000’, ‘sanitize_callback’ => ‘sanitize_hex_color’ ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, ‘gs_custom_color_bg_setting_1’, array( ‘label’ => __( ‘Background Color 1st’, ‘gs-custom-theme’ ), ‘settings’ => ‘gs_custom_theme_setting_color_background_1’, ‘section’ => ‘gs_custom_theme_front_section’, ‘priority’ => 16 ) ) ); $wp_customize->add_setting( ‘gs_custom_theme_setting_color_background_2’, array( ‘default’ => ‘#000000’, ‘sanitize_callback’ => ‘sanitize_hex_color’ ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, ‘gs_custom_color_bg_setting_2’, array( ‘label’ => __( ‘Background Color 2nd’, ‘gs-custom-theme’ ), ‘settings’ => ‘gs_custom_theme_setting_color_background_2’, ‘section’ => ‘gs_custom_theme_front_section’, ‘priority’ => 18 ) ) ); $wp_customize->add_setting( ‘gs_custom_theme_setting_color_background_3’, array( ‘default’ => ‘#000000’, ‘sanitize_callback’ => ‘sanitize_hex_color’ ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, ‘gs_custom_color_bg_setting_3’, array( ‘label’ => __( ‘Background Color 3rd’, ‘gs-custom-theme’ ), ‘settings’ => ‘gs_custom_theme_setting_color_background_3’, ‘section’ => ‘gs_custom_theme_front_section’, ‘priority’ => 20 ) ) ); } add_action(‘customize_register’, ‘gs_custom_theme_home_sections’);
This is quite straightforward, but if you put this code into functions.php or elsewhere (but in the file which is loaded by functions.php), you will probably get errors because we have to define custom function(s) we used for sanitization. You would be surprised how often custom customizer controls lack sanitization functions, even when we are talking about premium themes. On the contrary, you cannot find a theme without sanitization functions on wordpress.org theme directory, because when reviewing themes, it will be one of the first things reviewers will check.
I don’t think we need to explain why sanitization is important, but given the template layout, we need sanitization functions for images and colors. For colors, we can use the built-in WordPress function sanitize_hex_color ( string $color ), while for the background images, we can use a simple mimes check:
function gs_custom_theme_sanitize_bgi ( $image, $setting ) { $mimes = array( ‘jpg|jpeg|jpe’ => ‘image/jpeg’, ‘gif’ => ‘image/gif’, ‘png’ => ‘image/png’, ‘bmp’ => ‘image/bmp’, ‘tif|tiff’ => ‘image/tiff’, ‘ico’ => ‘image/x-icon’ ); $file = wp_check_filetype( $image, $mimes ); return ( $file[‘ext’] ? $image : $setting->default ); }
Creating the front page template
Front page template – front-page.php in our case – is the template used when Settings > Reading ->Front page display is being set (although there are other ways to achieve this, but they’re not important at this moment). And this is where we reach the final step of this tutorial – we need to put widget areas and customizer controls into action. But before we do, let’s rearrange elements a bit, remove default markup and hook layout function into genesis_after_header() action hook.
remove_action(‘genesis_loop’, ‘genesis_do_loop’); remove_action(‘genesis_after_header’, ‘genesis_do_nav’ ); add_action( ‘genesis_header_right’, ‘genesis_do_nav’ ); add_filter( ‘genesis_markup_site-inner’, ‘__return_null’ ); add_filter( ‘genesis_markup_content-sidebar-wrap_output’, ‘__return_false’ ); add_filter( ‘genesis_markup_content’, ‘__return_null’ ); add_action(‘genesis_after_header’, ‘gs_custom_theme_home_content_sections’);
Have a look at the example on how we could use colors and images set within customizer:
$background_image_url = get_theme_mod( ‘gs_custom_theme_setting_background_image_1’); echo ‘<div class=”parallax-window” data-speed=”0.1″ data-parallax=”scroll” data-image-src=”‘.$background_image_url.'”><<div class=”site-inner”>’; if ( is_active_sidebar( ‘home-1’ ) ) { dynamic_sidebar( ‘home-1’ ); } echo ‘</div></div>’; $background_color_one = get_theme_mod( ‘gs_custom_theme_setting_color_background_1’); echo ‘<div class=”parallax-window” style=”background-color:’.$background_color_one.'”><<div class=”site-inner”>’; if ( is_active_sidebar( ‘home-2’ ) ) { dynamic_sidebar( ‘home-2’ ); } echo ‘</div></div>’;
So the idea is to store them into variables first and then use them as inline styles. Also, have a look at the data-speed property – it comes with parallax.js and it changes the speed of the parallax effect. If you put different numbers in different sections, you can get nicer effects. Finally, this is the full code for our front-page.php template:
<<div class=”site-inner”>’; if ( is_active_sidebar( ‘home-1’ ) ) { dynamic_sidebar( ‘home-1’ ); } echo ‘</div></div>’; $background_color_one = get_theme_mod( ‘gs_custom_theme_setting_color_background_1’); echo ‘<<div class=”parallax-window” style=”background-color:’.$background_color_one.'”><<div class=”site-inner”>’; if ( is_active_sidebar( ‘home-2’ ) ) { dynamic_sidebar( ‘home-2’ ); } echo ‘</div></div>’; $background_image_url2 = get_theme_mod( ‘gs_custom_theme_setting_background_image_2’); echo ‘<<div class=”parallax-window” data-speed=”0.5″ data-parallax=”scroll” data-image-src=”‘.$background_image_url2.'”><<div class=”site-inner”>’; if ( is_active_sidebar( ‘home-3’ ) ) { dynamic_sidebar( ‘home-3’ ); } echo ‘</div></div>’; $background_color_two = get_theme_mod( ‘gs_custom_theme_setting_color_background_2’); echo ‘<<div class=”parallax-window” style=”background-color:’.$background_color_two.'”><<div class=”site-inner”>’; if ( is_active_sidebar( ‘home-4’ ) ) { dynamic_sidebar( ‘home-4’ ); } echo ‘</div></div>’; $background_image_url3 = get_theme_mod( ‘gs_custom_theme_setting_background_image_3’); echo ‘<<div class=”parallax-window” data-speed=”0.7″ data-parallax=”scroll” data-image-src=”‘.$background_image_url3.'”><<div class=”site-inner”>’; if ( is_active_sidebar( ‘home-5’ ) ) { dynamic_sidebar( ‘home-5’ ); } echo ‘</div></div>’; $background_color_three = get_theme_mod( ‘gs_custom_theme_setting_color_background_3’); echo ‘<<div class=”parallax-window” style=”background-color:’.$background_color_three.'”><<div class=”site-inner”>’; if ( is_active_sidebar( ‘home-6’ ) ) { dynamic_sidebar( ‘home-6’ ); } echo ‘</div></div>’; } genesis();
Everything else is about styling and adding/removing containers and CSS.
If you want to see all of this in action, here’s a pretty basic live demo or you can download the source code and play with it:
Now up to you: what is your favorite parallax effect? Do you prefer custom coding or plugins?
