• Skip to fullPage navigation
  • Skip to primary navigation
  • Skip to main content
Krolyn Studios

Krolyn Studios

Precoded Clips for WP Clips

  • Precoded Clips
  • Demos
    • Full-Window Genesis Responsive Slider
    • Genesis Responsive Slider Custom Classes
    • Genesis Responsive Slider V-Middle Excerpt
    • Genesis Simple Mega Menu
    • Genesis Alvaro Trigo fullPage
    • Genesis Bgrd Featured Image Effects
    • Genesis Isotope Filters
  • WP Clips

Genesis Alvaro Trigo fullPage

v2.0 / Demo
Dwnlds800

This Clip enables Alvaro Trigo’s fullPage.js script on most Genesis child themes.

Category: Free Clips
  • Download
  • Setup
  • Comments
Requirements
WP Clips - download and install latest version

Genesis v2.2+ (by StudioPress) + most child themes


Installation / Updates
  1. Download the Precoded Clip zip file.
  2. clip-genesis-alvaro-trigo-fullpage.2.0.zip

    Download Clip
  3. Go to Settings > Clips in WordPress admin and install via 'WP Clips Manager'; OR unzip and upload via FTP (or file manager) to the /wp-content/clips/precoded/ directory.

Code Source / GitHub

https://github.com/alvarotrigo/fullPage.js/


Credits / Sponsors
Clip authored by Jon Barratt / Krolyn

Alvaro Trigo (author of fullPage.js)

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.

Reviews

There are no reviews yet.

Cancel reply

Your email address will not be published. Required fields are marked *

  • WP Clips
  • WP Clips Multisite
  • Krolyn’s ClipBank

© Copyright 2015 Krolyn Studios · Privacy Policy · Contact