PagePiling in Bricks

This Pro tutorial provides the steps to set up PagePiling, a jQuery script to “Pile your sections one over another and access them scrolling or by URL” in Bricks.

If you are interested in using fullpage.js instead, Maxime wrote a tutorial on how to integrate fullPage.js with Bricks.

Step 1

If you are not using the Bricks child theme already, upload and activate it.

Create an assets directory and inside that, css and js directories in the child theme.

Upload jquery.pagepiling.min.css to assets/css.

Upload jquery.pagepiling.min.js to assets/js.

Create a file named say, pagepiling-init.js in the above directory having:

jQuery(function( $ ) {
    // Use matchMedia to check if the screen width is 992px or above
    if(window.matchMedia("(min-width: 992px)").matches) {
        $('.brxe-post-content').pagepiling({
            navigation: {
                'textColor': '#000',
                'bulletsColor': '#000',
                'position': 'right',
                // 'tooltips': ['Section 1', 'Section 2', 'Section 3', 'Section 4']
            },
            sectionSelector: '.brxe-post-content .brxe-section',
            // verticalCentered: false,
            anchors: ['one', 'two', 'three', 'four'],
            sectionsColor: ['white', '#E8E8E8', '#f2f2f2', '#fff'],
        });
    }
});

Set/change your Sections’ background color in the above.

Replace both instances of .brxe-post-content with the selector by inspecting the page on the front end with dev tools. In some cases, it might be #brx-content.

Step 2

Add this at the end in child theme’s functions.php:

add_action( 'wp_enqueue_scripts', function () {
    if ( is_page( 'pagepiling' ) ) {
        wp_enqueue_style( 'pagepiling', get_stylesheet_directory_uri() . '/assets/css/jquery.pagepiling.min.css' );

        wp_enqueue_script( 'pagepiling', get_stylesheet_directory_uri() . '/assets/js/jquery.pagepiling.min.js', [ 'jquery' ], '1.5.6', [ 'in_footer' => true, 'strategy' => 'async' ] );

        wp_enqueue_script( 'pagepiling-init', get_stylesheet_directory_uri() . '/assets/js/pagepiling-init.js', [ 'pagepiling' ], '1.0.0', [ 'in_footer' => true, 'strategy' => 'async' ] ); // Custom script for initializing pagepiling
    }
} );

Replace

if ( is_page( 'pagepiling' ) ) {

as appropriate.

If you are setting this up on a static homepage, you’d change it to

if ( is_front_page() ) {

Step 3

Create/edit a Page (titled, “PagePiling” in our dev site).

Edit it with Bricks.

In the Page Settings, add this custom CSS:

@media (min-width: 992px) {
  #brx-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    /* background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px); */
  }

  /* #brx-footer {
    z-index: 99999;
    position: fixed;
    left: 0;
    bottom: 0;
  } */
}

@media (max-width: 991px) {
  html, body {
    overflow: auto !important;
	}
}

If you want the footer to always be shown even for sections that have long content, uncomment

/* #brx-footer {
    z-index: 99999;
    position: fixed;
    left: 0;
    bottom: 0;
} */

Step 4

Add four Sections having headings like Section 1, Section 2…

After implementing the tutorial, you can delete some Sections or add more. Remember to make the corresponding changes in the JS code from Step 1.

Check the front end on desktop.

We’ve set the PagePiling init script to fire only for screen widths 992px and above.

If you are checking by resizing your browser dev tools, at lower widths make sure you reload the browser.

For Sections that will contain long content, you may want them to be scrollable. So go to that Section’s STYLE tab and add this class: pp-scrollable

Now you are ready to replace the Sections, add content in etc.

References

https://make.wordpress.org/core/2023/07/14/registering-scripts-with-async-and-defer-attributes-in-wordpress-6-3/

https://sridharkatakam.com/full-screen-portfolio-with-pagepiling-in-genesis/