I'm trying to make a photo gallery where the individual photos can be shared on Facebook and Twitter, and when you click the link, the photo that was shared will open in a lightbox automatically.

Most lightbox plugins provide a deep-linking feature that provides this in the form of a #! after the URL. Unfortunately, both the Facebook (https://www.facebook.com/sharer/sharer.php?u=http://google.com) and Twitter (http://twitter.com/share?text=My%20Tweet&url=http://google.com) share boxes strip out all text after the #. This means that when you try to share a deep-linked lightbox photo, the link just brings you back to the gallery rather than opening that photo.

The non-WordPress solution I came up with was to share a static URL and then use a RewriteRule to send them to the correct place. So for example, the user would share "example.com/gallery/123/" on Facebook, and when they went there they would be sent to "example.com/gallery/?photo=123". This would be parsed by Javascript to programmatically click on the correct image and open the lightbox.

The RewriteRule I came up with:

RewriteRule ^gallery/(.*)/$ /gallery/?photo=$1 [R]

Does work fine on a static site, but not in WordPress, which is why I'm here!

I'd prefer the URL to be /gallery/#!/123, but I know you can't add a #! with RewriteRule, so if anyone can think of a way to do that, it'd be even better!

1 Answer 1


one way you could do this with an internal WordPress rewrite, which would then set a query var you could check when enqueueing your javascript, and pass that data via localize script.

so first, rewrite rule to intercept requests to gallery/ with something appended, load the page named gallery, and set the query var gallery_id to whatever was in the URL. also we add the gallery_id query var so WordPress knows about it. Make sure to visit permalinks settings page after adding the rewrite, to flush rules and this new rule.

function wpa_gallery_rewrite(){
add_action( 'init', 'wpa_gallery_rewrite' );

function wpa_gallery_query_var( $query_vars ){
    $query_vars[] = 'gallery_id';
    return $query_vars;
add_filter('query_vars', 'wpa_gallery_query_var');

Now when we enqueue our javascript, we can check for that value and set a var which will be added along with the script and available to it.

function wpa_scripts() {
        get_template_directory_uri() . '/js/my_gallery.js',
    $default_photo = ( get_query_var( 'gallery_id' ) ) ? get_query_var( 'gallery_id' ) : 0;
            'default_photo' => $default_photo
add_action( 'wp_enqueue_scripts', 'wpa_scripts', 100 );

Now in your javascript, check wpa_data.default_photo to see if it equals 0, or there was a specific photo requested.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.