Adding an offscreen content area with a toggle to a Genesis Theme

The latest Genesis Infinity Pro theme has a top right toggle icon which allows for some off screen content to come into prominence in the viewport, this can be great for lead capture, ecommerce, contact details etc

offscreen-content-genesis

Here is how you can add this to the Sample Theme, also should work ok in other Genesis themes too.

Basically you’ll need to add some snippets to functions.php, some CSS styles to style.css and add and enqueue a javascript file.

Add in OffScreen Content Functions

<?php
// Enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'themeprefix_enqueue_scripts_styles' );
function themeprefix_enqueue_scripts_styles() {
wp_enqueue_style( 'themeprefix-ionicons', '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css', array(), CHILD_THEME_VERSION );
wp_enqueue_script( 'themeprefix-offscreen', get_stylesheet_directory_uri() . '/js/offscreen.js', array( 'jquery' ), '1.0.0', true );
}
// Register Offscreen Content Widget
genesis_register_sidebar( array(
'id' => 'offscreen-content',
'name' => __( 'Offscreen Content', 'themeprefix' ),
'description' => __( 'This is the offscreen content section.', 'themeprefix' ),
) );
// Add offscreen content if active
add_action( 'genesis_before_header', 'themeprefix_offscreen_content_output' );
function themeprefix_offscreen_content_output() {
$button = '<button class="offscreen-content-toggle"><i class="icon ion-ios-close-empty"></i> <span class="screen-reader-text">' . __( 'Hide Offscreen Content', 'themeprefix' ) . '</span></button>';
if ( is_active_sidebar( 'offscreen-content' ) ) {
echo '<div class="offscreen-content-icon"><button class="offscreen-content-toggle"><i class="icon ion-ios-more"></i> <span class="screen-reader-text">' . __( 'Show Offscreen Content', 'themeprefix' ) . '</span></button></div>';
}
genesis_widget_area( 'offscreen-content', array(
'before' => '<div class="offscreen-content"><div class="offscreen-container"><div class="widget-area">' . $button . '<div class="wrap">',
'after' => '</div></div></div></div>'
));
}
view raw function.php hosted with ❤ by GitHub

Here the scripts are being registered for the Ionicons and for the Javascript – offscreen.js

A widget area is being registered ‘offscreen-content’ which will appear in the Widgets area ready to add in whatever content you want – this will be the offscreen content that can be toggled.

The third function adds the markup only if the widget area is populated, you can also change the icons in here by adjusting the code, you don’t have to use Ioncions you can equally use fontawesome or dashicons.

Add in OffScreen CSS

/* Offscreen Content
---------------------------------------------------------------------------------------------------- */
.no-scroll {
overflow: hidden;
}
.offscreen-content {
background-color: rgba( 255, 255, 255, 1.0);
display: none;
height: 100%;
left: 0;
overflow-y: scroll;
padding: 20px;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 10000;
}
.offscreen-content .wrap {
margin-left: auto;
margin-right: auto;
max-width: 720px;
}
.offscreen-container {
display: table;
overflow: hidden;
table-layout: fixed;
text-align: center;
width: 100%;
}
.offscreen-container .widget-area {
display: table-cell;
padding-bottom: 20px;
vertical-align: middle;
width: 100%;
}
/* Offscreen Content Icon
--------------------------------------------- */
.icon {
font-size: 36px;
font-size: 3.6rem;
}
.offscreen-content-icon,
.offscreen-content-toggle {
position: fixed;
right: 20px;
top: 18px;
z-index: 10000;
}
.admin-bar .offscreen-content-icon,
.admin-bar .offscreen-content-toggle {
top: 52px;
}
.offscreen-content button,
.offscreen-content-icon button {
background-color: transparent;
color: #000;
font-size: 20px;
font-size: 2rem;
padding: 2px 10px 2px 12px;
}
.offscreen-content button:hover,
.offscreen-content-icon button:hover {
color: #d43c67;
}
/* Offscreen enews
--------------------------------------------- */
.offscreen-content .enews-widget {
background-color: #f5f5f5;
padding: 60px;
}
.offscreen-content .enews-widget form {
margin-left: 60px;
margin-right: 60px;
}
view raw offscreen.css hosted with ❤ by GitHub

Add in the offscreen content CSS in your themes style.css

Add in OffScreen Javascript

jQuery(function($) {
// Set offscreen container height
var windowHeight = $(window).height();
$( '.offscreen-container' ).css({
'height': windowHeight + 'px'
});
if ( ( 'relative' !== $( '.js .nav-primary' ).css( 'position' ) ) ) {
var headerHeight = $( '.site-header' ).height();
$( '.site-inner' ).not( '.front-page .site-inner' ).css( 'margin-top', headerHeight+'px' );
} else {
$( '.site-inner' ).removeAttr( 'style' );
}
$(window).resize(function() {
var windowHeight = $(window).height();
$( '.offscreen-container' ).css({
'height': windowHeight + 'px'
});
if ( ( 'relative' !== $( '.js .nav-primary' ).css( 'position' ) ) ) {
var headerHeight = $( '.site-header' ).height();
$( '.site-inner' ).not( '.front-page .site-inner' ).css( 'margin-top', headerHeight+'px' );
} else {
$( '.site-inner' ).removeAttr( 'style' );
}
});
// Set offscreen content variables
var body = $( 'body' ),
content = $( '.offscreen-content' ),
sOpen = false;
// Toggle the offscreen content widget area
$(document).ready(function() {
$( '.offscreen-content-toggle' ).click(function() {
__toggleOffscreenContent();
});
});
function __toggleOffscreenContent() {
if (sOpen) {
content.fadeOut();
body.toggleClass( 'no-scroll' );
sOpen = false;
} else {
content.fadeIn();
body.toggleClass( 'no-scroll' );
sOpen = true;
}
}
});
view raw offscreen.js hosted with ❤ by GitHub

This is the javascript for which you will have to make a file in your theme’s /js folder called offscreen.js and add in the JS code.

That’s it, the code used is from Infinity Pro with a couple of tweaks, the usage works well in mobile as well as desktop.

Example Genesis Sample site

13 Comments

  1. Jake Faulstich on October 16, 2017 at 1:12 am

    Hey Neil –

    After implementing this, I have the offscreen content working on the home page + blog pages, but the menu button doesn’t seem to be triggering on standard pages.

    I’ve tried to kill all custom CSS and extra code I have in functions.php and no dice.

    You can see the dev site at http://dev-jkf.ww-stage.com/ (p: seethework) and a page where the toggle isn’t working at http://dev-jkf.ww-stage.com/z_test/ (p: seethework).

    Using the Monochrome theme / WP & all plugins up to date.

    Any help is much appreciated!!

    • Neil Gowran on October 16, 2017 at 1:49 am

      I can see the offscreen on that page with the toggle working – maybe clear any caches

  2. Jake Faulstich on September 10, 2017 at 5:02 pm

    This is an awesome post! One of the better modern features in Genesis themes.

    Question – where would you add in text (like “Menu”) to have it appear to the right of the icon where all is clickable to load the overlay?

    (ex –> “[icon] Menu”

    Thanks!

    • Neil Gowran on September 10, 2017 at 10:37 pm

      You can add text in between the <i class="icon ion-toggle-filled"></i> and <i class="icon ion-toggle"></i> or after it and you’ll most probably need a bit of CSS to style the text.

      • Jake Faulstich on September 11, 2017 at 1:25 am

        Excellent, thank you! I’ll give that a try.

  3. Cathy Larkin on December 15, 2016 at 8:03 pm

    Sorry to seem naive – but can you give an example or a site where this is implemented. I don’t understand what type of content you would put there, and how would the average site visitor know it is there to trigger it? or is it where a pop up lives, after or before it is set to pop up., so someone can access it again?

    Thanks

    • Neil Gowran on December 15, 2016 at 11:01 pm

      There is a link in the post of an example site

  4. James Burgos on November 17, 2016 at 12:40 pm

    Hi there,

    Thanks for this. I’ve been trying to implement something like this for a while. I do have one question on a mod.

    I’d like to add genesis_header and genesis_footer to the offscreen overlay above and below the widget area when it’s clicked, but I’m not sure how to instantiate the hooks within the markup. How should I approach this?

    Any insights would be appreciated.

    • Neil Gowran on November 21, 2016 at 9:29 pm

      I don’t think this would be the best approach as the hooks have already loaded as it is one and the same page – the offscreen content is just initially hidden – so really best off to add additional content in a similar way, as in the widget area.

      • James Burgos on December 5, 2016 at 7:48 pm

        Thank you for replying. Let me rephrase. What I’m actually interested in doing is including my site title above and my footer information below. They don’t necessarily have to reside within their corresponding hooks, but that’s how I imagined it might work. It seems like the code I need could be injected around line 30 and again at line 35. What do you think?

  5. Paul on November 13, 2016 at 11:35 am

    Hi Neil,

    This is awesome. I have to do exactly this next week on a site. Very timely. However in my case the icon is to reveal hidden full screen nav.

    I wonder if I could ask your opinion… I am trying to be a bit more accessibility aware in the last few sites I made (yes… Late to the party, but recently I have made some efforts)…

    Anyway, my hidden offscreen content is main nav. So it’s kind of essential content.

    I saw you put the screen-reader-text class on the button for your hidden content, so I learned a bit there thanks.

    However, with my widget being essential content (nav), would you suggest that instead of using display none, that I use again the screen-reader-text class on the whole widget abd Aria hidden on the launch button?

    The key difference with my situation being my content is essential for navigating the site.

    Thanks again for yet another excellent tutorial.

    Cheers

    • Neil Gowran on November 13, 2016 at 9:35 pm

      Hi Paul, yes I would use some aria attributes on the toggle and screen-reader-text class above the nav

      • Paul Lacey on November 13, 2016 at 10:07 pm

        Oh thanks Neil. Much appreciated having your input on that! I’ll tweet you the result when done.
        Cheers, and have a nice week.
        Paul

Leave a Comment





%d bloggers like this: