Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

Reload Page on Slider Navigation Click

Important: This doc assumes you’re comfortable creating and/or editing PHP files in your WordPress installation and is intended for advanced users.

You can enable page reload on slider navigation click for all Soliloquy sliders following this guide.

Step 1 – Create Plugin File

The first step is to create a new php file in the wp-content/plugins/ directory of your WordPress installation. The easiest way to do this is using your favorite FTP program or through your web hosting account’s file editor (if they provide one).

Once you’ve navigated to the wp-content/plugins/ directory, create a new file with the name soliloquy-reload-page-on-navigation-click.php

Step 2 – Edit the New Plugin File

Next, you’ll want to copy and paste the following code into the soliloquy-reload-page-on-navigation-click.php plugin file you’ve created:

<?php
/**
* Plugin Name: Soliloquy - Reload Page on Navigation Click
* Plugin URI: https://soliloquywp.com
* Version: 1.0
* Author: Tim Carr
* Author URI: http://www.n7studios.co.uk
* Description: Reloads the entire Page when the next or previous arrows are clicked, or the pager navigation is used. The correct slide is injected into the URL.
*/

/**
* Reload the entire page with a new slide is requested, showing that slide on the new page request
*
* @param array $data Slider Data
*/
function sol_soliloquy_reload_page_on_navigation_click( $data ) {

	global $post;

	// Get current post URL
	$url = add_query_arg( array( 'sol_slide' => 'soliloquySlideIndexX' ), get_permalink( $post->ID ) );
	?>
	$(document).on('click', 'a.soliloquy-prev, a.soliloquy-next', function(e) {
		e.preventDefault();
		var classes = $('li.soliloquy-active-slide', $(this).closest('.soliloquy-wrapper')).attr('class').split(' ');
		var classParts = classes[1].split('-');
		var slideIndex = (Number(classParts[2]) - 1);
		var url = '<?php echo $url; ?>';
		url = url.replace('soliloquySlideIndexX', slideIndex);
		window.location.href = url;
	});
	$(document).on('click', 'a.soliloquy-pager-link', function(e) {
		e.preventDefault();
		var url = '<?php echo $url; ?>';
		url = url.replace('soliloquySlideIndexX', $(this).data('slide-index'));
		window.location.href = url;
	});
	<?php

}
add_action( 'soliloquy_api_start', 'sol_soliloquy_reload_page_on_navigation_click' );

/**
* Start the slider based on the supplied index
*
* @param array $data Slider Data
* @param int $sliderID Slider ID
* @return array Slider Data
*/
function sol_soliloquy_dynamic_starting_slide( $data, $sliderID ) {
	
	if ( isset( $_GET['sol_slide'] ) ) {
		$data['config']['start'] = absint( $_GET['sol_slide'] );
		$data['config']['random'] = 0;
	}
	
	return $data;
	
}
add_filter( 'soliloquy_pre_data', 'sol_soliloquy_dynamic_starting_slide', 10, 2 );

/**
* Don't strip double forwardslashes in JS minification, so http[s]:// can be included in our code above without breaking everything
*/
add_filter( 'soliloquy_minify_strip_double_forward_slashes', '__return_false' );

Step 3 – Activate the New Plugin

The last step is to navigate to the WordPress Admin > Plugins screen, locate the plugin named Soliloquy – Reload Page on Navigation Click and activate the plugin.

That’s it! You’ve successfully enabled page reload on slider navigation click!


Troubleshooting

  • Soliloquy 2.4.1.1 or higher must be installed. Javascript errors will occur if using this method on older versions.
[i]
[i]