Working on the filterable gallery I mentioned in the Flickity/MLA carousel post, there were a lot of little things I had to look up or work out by trial and error, some of which were ultimately quite simple but took a while to figure out. I want to lay them out for future reference, my own and potentially that of readers of the (forthcoming) post(s) about the gallery itself.

• If something that’s supposed to be clickable only works on part of its area, such as a div where only the bottom half is clickable, check for overhang. You can’t click through another div even if it’s empty.
• String concatenation: . for PHP, + for JavaScript.
• $.load puts the second thing into the first thing: $( ‘#wrapper’ ).load( ‘source-page.php #contents’ ), not $( ‘#contents’ ).load( ‘source-page.php #contents’ ). The latter will result in two divs with the id ‘contents’. This of course means you have to build your page with a wrapper div.
• $.load seems to require that the function to run after loading completes be an anonymous one. Putting in a named function doesn’t necessarily work (I found sometimes it did and sometimes it didn’t). That is, not $.load( ‘source.php’, setup() ); but instead $.load( ‘source.php’, function() { setup(); });
• If all you want is to add or change a query string (that is, ‘?attr=value’) on the current URL, $.load() needs only the query string itself. If you give it the page slug also, WordPress will show you the correct page, but the slug will be doubled in the URL. The same goes for window.history.pushState();
• Using WordPress’s get_terms to access a taxonomy nets you an array of objects. The PHP syntax to access pieces of an array is completely different than the syntax used to access pieces of an object. Remember that and things will work better.
• You can add whatever information you want to an anchor element by adding a data attribute; syntax is <a href="..." data-slug="...">, where “slug” would be whatever the kind of data is in your application.

John Steuart Curry’s painting Ajax via Wikimedia Commons.