Add a Second Panel (Advanced Users Only)

As of version 2.2.0, SuperSide Me does support adding a second panel to your site. However, this is advanced stuff, and a bit outside of the box. This tutorial presupposes that you know what you’re doing to create the panel and content for it. It’s offered as an option for advanced users. This code has been tested, but may still be a bit rough around the edges.

The code examples here use the Genesis Framework, but you could do add your button and content any way you like, as long as it works.

First step: add your button to trigger the second panel.

add_action( 'genesis_before_header', 'prefix_add_button' );
/**
 * Add a button element to the DOM. ID must match the button key in the second panel filter.
 */
function prefix_add_button() {
	echo '<div class="buttons-menu"><button id="new-button" aria-pressed="false" aria-expanded="false">New Button</button></div>';
}Code language: PHP (php)

Make sure it has a unique ID. The class is optional, but will help with styling.

Second step: create the content for your second panel.

This can be a widget area, or straight up HTML, as in the example, or anything you like:

add_action( 'genesis_after', 'prefix_add_widget' );
/**
 * Source for the new panel. Again, the ID must match. Instead of doing this by hand,
 * you can use an existing widget or div element which would be added to the site and hidden by default.
 */
function prefix_add_widget() {
	echo '<div id="new-widget" style="display:none;"><p>Thanks a lot, kid. Please, Marty, don\'t tell me, no man should know too much about their own destiny. I\'ll call you tonight. What\'s going on? Where have you been all week? I hope so.</p>';
	echo '<p>What Lorraine, what? Hello. I\'m gonna ram him. I have to tell you about the future. Mayor Goldie Wilson, I like the sound of that.</p>';
	echo '<p>Calvin, why do you keep calling me Calvin? I don\'t worry. this is all wrong. I don\'t know what it is but when I kiss you, it\'s like kissing my brother. I guess that doesn\'t make any sense, does it? Well, they\'re bigger than me. Wait a minute. Wait a minute, Doc. Are you telling me that it\'s 8:25? Hot, Jesus Christ, Doc. Jesus Christ, Doc, you disintegrated Einstein.</p></div>';
}Code language: PHP (php)

My example is just text, as you see. Note that your containing <div> element must have a unique ID as well.

Third step: tell SuperSide Me about it.

add_filter( 'supersideme_second_panel', 'prefix_add_second_panel' );
/**
 * SuperSide Me filter to pass necessary values to the script.
 * Everything else (colors, timing, etc.) will follow the plugin settings.
 * @return array
 */
function prefix_add_second_panel() {
	return array(
		'button' => '#new-button', // must be an ID
		'source' => '#new-widget', // must be an ID
		'panel'  => 'widget-panel', // will be the ID of the new panel
		'side'   => 'left',
	);
}Code language: PHP (php)

Notes:

• button: must match the unique ID of your new button (step one)
• source: must match the unique ID of your new panel (step two)
• panel: another unique ID
• side: what side you want the panel to slide in from

Otherwise, the second panel will inherit most of the settings set for the first panel, such as the color, speed, and close button.

Although swiping still works with a second panel on, the swiping code will be tied only to the first panel, and will not affect the second panel at all, so I would advise disabling the swiping function altogether.

Return to SuperSide Me