{"id":131886,"date":"2014-09-18T08:00:00","date_gmt":"2014-09-18T12:00:00","guid":{"rendered":"http:\/\/premium.wpmudev.org\/blog\/?p=131886"},"modified":"2014-09-18T02:55:50","modified_gmt":"2014-09-18T06:55:50","slug":"build-apple-inspired-full-page-scrolling-pages-for-your-wordpress-site","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/build-apple-inspired-full-page-scrolling-pages-for-your-wordpress-site\/","title":{"rendered":"Build Apple-Inspired Full Page Scrolling Pages For Your WordPress Site"},"content":{"rendered":"

That full page scrolling is\u00a0becoming increasingly popular\u00a0is hardly\u00a0surprising as it taps into our paper-based reading experiences and provides\u00a0all the visual clues about needing to read to the end before “turning the page”.<\/p>\n

In this post, I’ll show you how to leverage all the advantages of full page scrolling in your WordPress site by integrating the fullPage.js library – the gold standard of full page scrolling – to build an Apple-inspired, full page, scrolling landing page with animation.<\/p>\n

\"5
Build impressive pages with animation and full page scrolling<\/figcaption><\/figure>\n

This post was inspired by the examples that Alvaro Trigo<\/a>\u00a0has put together to showcase his fullPage.js jQuery plugin<\/a> which\u00a0delivers\u00a0full page scrolling both vertically and horizontally. In particular, the clone of the now-superseded promotional page for Apple’s iPhone 5C<\/a> is particularly impressive, combining full page scrolling and animation.<\/p>\n

Have a look at the demo as this is what we are going to recreate in WordPress. To do this, we’ll need to:<\/p>\n

    \n
  1. Create a template<\/em> specifically for using fullPage.js<\/em><\/li>\n
  2. Ensure that any post that uses fullPage.js<\/em> is rendered using the new template<\/li>\n
  3. Mark-up post content so that it is fullPage.js<\/em> compatible<\/li>\n
  4. Add\u00a0custom post-specific CSS for\u00a0injecting into the output<\/li>\n
  5. Add custom post-specific javascript for injecting\u00a0into the output to initialize fullPage.js<\/em><\/li>\n<\/ol>\n

    Steps 2 to 5\u00a0are facilitated via a custom plugin. There is a WP FullPage plugin<\/a> in the WordPress.org plugin repository but I have to confess that I had a hard time using it, so I resorted to writing my own, much simpler version.<\/p>\n

    Step 1 – Creating A Specific fullPage.js Template<\/h2>\n

    As fullPage.js<\/em> is, as the name suggests, full page, it needs to operate in as simple a template as possible, devoid of any headers, footers and sidebars that your current theme may have.<\/p>\n

    And that requires a custom template.<\/p>\n

    The plugin comes with a simple template (see \/templates\/fullpage.php), designed to let fullPage.js<\/em> be completely unencumbered as it does its work:<\/p>\n

    Loading gist ad4397db80c95570fe4e<\/a>

    Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n

    As you can see, there’s really not much to it. It outputs the standard CSS, the jQuery plugin (both contained in the plugin’s directories) and jQuery itself as well as any custom CSS (this is held in the post’s fullpage_css custom field).<\/p>\n

    jQuery and jQuery UI are pulled in from the Google CDN, so change this if you prefer to use a local copy.<\/p>\n

    The only actual content is the post’s filtered content but you’ll notice that we first remove the wpautop<\/a> filter\u00a0from the the_content<\/a> function so that we can better lay out the content without having to worry about superfluous <p><\/em> tags being added that can easily break your content.<\/p>\n

    The final action of the script is to output the javascript to initiate fullPage.js<\/em> on the page itself. If the post has the\u00a0fullpage_js<\/em> custom field set then this content is used as the initialization script otherwise the default fullPage.js<\/em> initialization script is used.<\/p>\n

    Step 2 – Ensure the New Template Is Used<\/h2>\n

    It’s no\u00a0good having a template unless it gets used of course, so the plugin that adds fullPage.js<\/em> to your WordPress install, uses the template_include<\/a> filter to change the template if the post is using fullPage.js<\/em>.<\/p>\n

    Loading gist ad4397db80c95570fe4e<\/a>

    Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n

    The fullpage<\/em> template is located in the plugin’s \/templates<\/em> folder.<\/p>\n

    Download, install and activate the plugin.<\/p>\n

    Step 3 – Mark-up fullPage.js Compatible Post Content<\/h2>\n

    When porting the example across to WordPress, there were a number of decisions to be made about how much functionality should be abstracted.<\/p>\n

    To keep things initially simple, I’ve opted for (only!) 5\u00a0new shortcodes to model fullPage.js<\/em>‘s basic structure:<\/p>\n

      \n
    1. fullpage – <\/em>this is the main container\u00a0for a fullPage.js page; all content should reside inside this wrapper<\/li>\n
    2. section – <\/em>a section is effectively a page; has the following attributes:\n