#development

WordPress Custom Taxonomy Meta

I remember all the custom solutions and plugins needed before this was supported in WordPress 4.4.

A great snippet to have in your toolbox. I’ve reduced it to the bare basics.

https://gist.github.com/davidsword/f9b2ad34ba769d53b52eae1e9aadcd38

One Password Form For All Password Protected WordPress Posts

When using a custom post type for portfolio items, I needed several of them to be password protected, showing a lock icon instead of the portfolio item. The posts are shown via a normal loop, but they’re just thumbnails with lightbox links. To password protect them all, and have them all unlock with a single method, I came up with the following:

https://gist.github.com/davidsword/fd1f805789ba84a9366d42b382dfb300

For the above to work, all posts passwords need to be the same password. The above uses featherlight, or whatever lightbox you prefer to hide/reveal the password form. Remove the display:none from #passwordInput to bypass lightbox.

Google Maps v3 API AutoComplete Use First Result

The following script stores the first result from Google Maps v3 API AutoComplete into a hidden input, allowing you to do something with the autocomplete input field if the user decides to type their address instead of click a result. I’ve included only the extra code ontop of the normal autoComplete script.

https://gist.github.com/davidsword/b4969ddffee2bcdf659c79b541a259db

WP-CLI Works But Gives ERRORs For All Updating

Every developer has these all-day’er’s. What in the happenings of happenings is happening. I had it with one of my favourite tools wp-cli something I rely on heavily for my workflow.

Clean installed, valid versions, so on. wp list plugins returned all good. However any real writing like wp plugin update --all failed. And the error’s are so vague:

PHP Warning: array_filter() expects parameter 1 to be array, boolean given in phar:///usr/local/bin/wp/php/WP_CLI/CommandWithUpgrade.php on line 319
Warning: array_filter() expects parameter 1 to be array, boolean given in phar:///usr/local/bin/wp/php/WP_CLI/CommandWithUpgrade.php on line 319
//…
Error: No plugins updated.

What made matters worse: no one else seemed too of experienced this, so I had no resources online to work off of.

The problem was two-fold:

1) The php.ini file being used (found via wp --info) was PHP cli’s, not apache’s, so short_open_tag wasn’t set to On. I have many plugins that use this tag and I didn’t know about cli having it’s own php configuration.

2) I had folders in my themes/ and plugin/ that were soft deleted (there but inaccessible) set to chmod 700. That needed to be removed. Apparently wp likes to read every folder therein and if it can’t it throws a fit.

I was able to discover these problems and bypass them with the --skip-plugins flag. So if you’ve experienced anything like what I just went through, try that, and lookout for those two issues above.

CSS Menu/Nav Hamburger Animation

CSS Menu/Nav Hamburger Animation

While finally buying a Keurig today, I (oddly) decided to do my research on my phone instead of desktop, and also (oddly) decided to go to Keurig.ca instead of my normal stomping ground of Amazon.ca. While there, I was distracted in a nerdy daze by the animation they added to their hamburger navigation, immediatly stoped everything and went to code it myself.

A very polished touch to a now very common element:

https://gist.github.com/davidsword/3ca3347ae8cf763a3a7bf89270ff340f

I used CSS3 var for easy line weight changing. Playing around with EASE also gives the button much more life. (It took two cups of coffee to write and refine that).

Make Height Match Dynamic Width To Create Dynamic Squares CSS

Make Height Match Dynamic Width To Create Dynamic Squares CSS

This is a fix I’ve got running in my image gallery. The height of the image’s are dynamic- the square images would make the boxes square themselves, but during load, their containers height is 0 and you get a really chalky and ugly load staggering. Running a fix in Javascript fires too late, and I don’t want to hide everything until JS can get to it, so CSS is the fix; finding the dynamic width and making that the height:

Found from a thread in stack overflow, I hope this helps someone else:

https://gist.github.com/davidsword/c39ff32da9aa3f256513a7dcc79ff237

Yeah that’s it, a pseudo element can take on the dynamic height based on the dynamic width.