Password protected page Hash url

Question

I am using owl carosel which takes a hash url to go to a specific slide (http://www.owlcarousel.owlgraphic.com/demos/urlhashnav.html#five)

Lets say I want to visit a password protected page with the slider there (site.com/page#slideone)

When I visit the page I am asked for a password, upon entering it, the hash at the end is removed after the redirect. (redirects to site.com/page on success)

Any idea where I would look to keep the original url intact?

Just to confirm, there are multiple hash urls so I cannot hard code a single one.

Thanks!

Answer 1

The issue is that the browser doesn't pass the hash value in the request, it is parsed by the browser itself. Since the server doesn't know about the hash it can't forward it along after the login. You do have access to the hash with javascript though...Without seeing your code I can't give you a specific answer but something like this would probably work:

Assuming you are using wp_login_form(), otherwise change the selectors accordingly

<script>
jQuery(document).ready(function($){
    $redirectField = $('input[name="redirect_to"]');
    $redirectField.val($redirectField.val() + window.location.hash);
});
</script>

You could include that on every page, or better would be to include it using the login_form_bottom filter.

Answer 2

Here is the solution working with Wordpress 5.9 (assuming your theme is using jQuery):

add_filter( 'the_password_form', function ( $output ) {
    $input = '<input type="hidden" name="_wp_http_referer" class="wp_http_referer" value="" />';
    $js = <<<'JS'
jQuery(function($){
    console.log('updated hash')
    $( '.wp_http_referer' ).val( window.location );
});
JS;

    return str_ireplace( '</form>', $input . '</form><script>' . $js . '</script>', $output );
} );

(Building upon https://wordpress.org/support/topic/jump-link-into-password-protected-page/)