I'm looking for the absolute simplest way to pass a data attribute along to a new page (non AJAX loading).
I've been messing around with a Wordpress theme all night trying to customize the gallery category filters. I want to do as little coding as possible in making my adjustments to a pre-existing layout, but the complicating factor here is that I have a single page which already has data attributes assigned to elements that can be filtered from links on the same page and I need to be able to load the page with data attributes already set for filtering from external links.
I'll try to make a visual for the scenario that might help (or not ?):
First page is already functioning:
<!---main-gallery_page.php--->
<header class="category-filters">
<ul class="list">
<li> <a href="#" data-example-id="generic-1">Category Filter 1</a> </li>
<li> <a href="#" data-example-id="generic-2">Category Filter 2</a> </li>
<li> <a href="#" data-example-id="generic-3">Category Filter 3</a> </li>
</ul>
</header>
<div class="gallery-thumbs">
<!--- thumbnails with example-id data attributes are filtered, respectively: "generic-X" --->
</div>
Second page needs to manipulate the page above after loading it ^
<!---second-example_page.php--->
<div class="alternate-category-filters">
<ul class="list">
<li> <a href="/path_to/main-gallery_page.php" data-example-id="generic-1">Category Filter 1</a> </li>
<li> <a href="/path_to/main-gallery_page.php" data-example-id="generic-2">Category Filter 2</a> </li>
<li> <a href="/path_to/main-gallery_page.php" data-example-id="generic-3">Category Filter 3</a> </li>
</ul>
</div>
Obviously the second example is not going to function because the new page doesn't receive any instructions to filter the thumbnails, so it'll just load as-is.
Just want to be able to operate the category filter on page load as specified from an external (non-ajax) page. Any ideas on a simple method? I've been trying to see what I can do with php echoes and even stuffing the info into the hyperlink href value, but I couldn't get that to work. It would be ideal if I could do something like this:
<!---second-example_page.php--->
<div class="alternate-category-filters">
<ul class="list">
<li> <a href="/path_to/main-gallery_page.php?exampleId='generic-1'">Category Filter 1</a> </li>
<li> <a href="/path_to/main-gallery_page.php?exampleId='generic-2'">Category Filter 2</a> </li>
<li> <a href="/path_to/main-gallery_page.php?exampleId='generic-3'">Category Filter 3</a> </li>
</ul>
</div>
Help would be greatly appreciated, I've exhausted myself jumping around millions of topics that always seem to just miss explaining this particular scenario's solution.
You could poll a value in localStorage. Make the main page poll localStorage.category. (Using setTimeout for example). Then, once the second page loads and changes the value, the main page could see the change and act accordingly.