Genesis Alvaro Trigo fullPage

Description

Using the Clip

Adding fullPage

1. Go to Pages > Add New, and add a new page.
2. Add an appropriate title, but no content.
3. Select the ‘fullPage by Alvaro Trigo’ template from Page Attributes.
4. Publish or Save Draft.

Note: If you wish to use fullPage as the front-page, go to Settings > Reading and select your new page as a static ‘Front Page’.

Adding a Menu

You can add a menu in 2 different ways. If a menu already exists in the header section, you can install a menu management plugin such as Genesis Simple Menus and assign a menu to your header on the respective page; or use the fullPage Header Menu location as described below.

The fullPage template installs and uses the fullPage Header Menu location –

1. Go to Appearance > Menus (create a new menu if required).
2. Select the Manage Locations tab.
3. Assign a menu to the fullPage Header Menu location.

Note: All other menu locations are disabled when the fullPage Header Menu location is assigned.

Adding Menu Items to Navigate Sections

Section navigation is controlled by the ‘data-anchor’ attribute. To add a link to a section –

1. Identify the ‘data-anchor’ value of the section to link to (e.g. section-2).
2. Go to Appearance > Menus and select your menu.
3. Add a custom link with #[data-anchor] as the URL (e.g. #section-2).

Note: External links will require an absolute URL (e.g. http://www.mydomain.com/#section-2).

Adding Menu Items to Navigate Slides

Slide navigation is controlled by the section’s ‘data-anchor’ attribute plus a slide ‘index’ (starting at 1 on the 2nd slide). To add a link to a slide –

1. Identify the section’s ‘data-anchor’ and ‘index’ of the slide to link to (e.g. section-2, 3rd slide or index 2).
2. Go to Appearance > Menus and select your menu.
3. Add a custom link with #[data-anchor]/[index] as the URL (e.g. #section-2/2).

Note: External links will require an absolute URL (e.g. http://www.mydomain.com/#section-2/2).

Adding Content to Sections and Slides

By default, the fullPage template includes 4 sections, with ‘Section 2’ divided into 4 slides.

Section 1 – fullPage
Section 2 – Slide 1 – fullPage
Section 2 – Slide 2 – fullPage
Section 2 – Slide 3 – fullPage
Section 2 – Slide 4 – fullPage
Section 3 – fullPage
Section 4 – Footer – fullPage

To activate and add content to any of these sections –

1. Go to Apperance > Widgets.
2. Add a ‘text widget’ to the section or slide and add your content to the widget.

Note: Section Footer – fullPage widget area will include the site’s footer and footer widget area.

Reconfiguring Sections and Slides

Sections are added using the at_fullpage hook.

add_action( 'at_fullpage', 'at_fullpage_section_1', 5 );
add_action( 'at_fullpage', 'at_fullpage_section_2', 10 );
add_action( 'at_fullpage', 'at_fullpage_section_3', 15 );
add_action( 'at_fullpage', 'at_fullpage_section_footer', 20 );

Custom code can be added to WP Clips custom Clip to reconfigure sections and slides –

Removing Sections

Sections can be completely removed using ‘remove_action’ –

remove_action( 'at_fullpage', 'at_fullpage_section_1', 5 );

Reordering Sections

Sections can be reordered using ‘priorities’ –

remove_action( 'at_fullpage', 'at_fullpage_section_2', 10 );
add_action( 'at_fullpage', 'at_fullpage_section_2', 17 );

Adding Sections and Slides

Sections can be added by registering a new widget area and then introducing the widget area with the at_fullpage hook –

genesis_register_sidebar( array(
    'id'            => 'at-fullpage-new',
    'name'          => __( 'Section New - fullPage', 'wp-clips' ),
    'description'   => __( 'This is a new section of the fullPage.', 'wp-clips' ),
) );

//* Add Section New (if active)
add_action( 'at_fullpage', 'at_fullpage_section_new', 13 );
function at_fullpage_section_new() {
	
    if( is_active_sidebar( 'at-fullpage-new' ) ) {

        echo '<div class="section" id="at-fullpage-new" data-anchor="section-new">';
	
        genesis_widget_area( 'at-fullpage-new', array(
            'before' => '<div class="widget-area"><div class="wrap">',
            'after'  => '</div></div>',
        ) );
	
        echo '</div>';
    }
}

or, if adding a new section with slides –

genesis_register_sidebar( array(
    'id'            => 'at-fullpage-new-1',
    'name'          => __( 'Section New - Slide 1 - fullPage', 'wp-clips' ),
    'description'   => __( 'This is the first slide in the new section of the fullPage.', 'wp-clips' ),
) );
genesis_register_sidebar( array(
    'id'            => 'at-fullpage-new-2',
    'name'          => __( 'Section New - Slide 2 - fullPage', 'wp-clips' ),
    'description'   => __( 'This is the second slide in the new section of the fullPage.', 'wp-clips' ),
) );

//* Add Section New (if active)
add_action( 'at_fullpage', 'at_fullpage_section_new', 13 );
function at_fullpage_section_new() {
	
    if( is_active_sidebar( 'at-fullpage-new-1' ) ||
        is_active_sidebar( 'at-fullpage-new-2' )
    ) {
        echo '<div class="section" id="at-fullpage-new" data-anchor="section-new">';

        // Add Slide 1 (if active)
        genesis_widget_area( 'at-fullpage-new-1', array(
            'before' => '<div id="at-fullpage-new-1" class="slide widget-area"><div class="wrap">',
            'after'  => '</div></div>',
        ) );

        // Add Slide 2 (if active)
        genesis_widget_area( 'at-fullpage-new-2', array(
            'before' => '<div id="at-fullpage-new-2" class="slide widget-area"><div class="wrap">',
            'after'  => '</div></div>',
        ) );

        echo '</div>';	
    }
}

Note: Data-anchors must not have the same value as any other element ID.

Additional Options

Refer to Alvaro Trigo’s GitHub –
https://github.com/alvarotrigo/fullPage.js/

Note: fullPage.js ‘options’ will need to be added direct to the Clip’s clip-script.js file. Please make a note of any changes on your custom Clip‘s log.txt file.

Notes

The Clip adds the ‘at-fullpage.php’ template to the active theme’s directory. The template is automatically removed when the Clip is deleted.

The Clip forces a ‘full-width’ content layout.

The Clip was developed on the Genesis Sample Child Theme. Additional styling and modifications may be required for other Genesis child themes.