WordPress Logo

Convert Taxonomy Options to Term Meta

WordPress 4.4 introduced Taxonomy Term Meta. Until this version, meta had to be stored as an Option. Most tutorials would tell you to give it a prefix followed by the ‘term_id’ so you can grab the data easily later. I already had a site with lots of populated meta. What I needed was a conversion script to move meta from an Option into real Term Meta.

I found a couple of interesting quirks with Term Meta while converting my site.

The first is that if you run get_term_meta( $term->term_id ) it will present you with an array of arrays. The value is stored as the first key of these sub-arrays. Where you might have had $term_meta[‘my_key’] for your option, you now need $term_meta[‘my_key’][0]. If the value returned is an array, it will need to be unserialized. This only applies if you want all Term Meta for a taxonomy. If you use get_term_meta( $term->term_id, ‘my_key’, true ) it will automatically perform both these tasks to return a single meta key.

Another difference shows itself when saving values. An Option will overwrite the value (array) in most cases. However the update function for Term Meta will only update individual meta keys. You need to iterate through and store them individually. However this is no bueno when using checkboxes. If the checkbox is unchecked, it will not be present in the postdata. Below is my generic save function for Term Meta, it will delete a value if it was stored previously but is no longer available.

When you’re all finished converting and everything is sweet. You’ll probably want to clean up your options table. Use this function at your own risk.

HTML5 Logo

Disable Arrows on Number Inputs

HTML5 introduced some interesting form element changes. Inputs can now have an input type of “number”.

Web Browsers set character input restrictions and validation parameters for this input type. It will restrict to characters 0-9. This is great because it reduces the code overhead required to ensure a user enters the correct data. It will also show a numeric keypad on devices with dynamic keyboards. You should always have server side form validation. By using a number input you’re not relying entirely on JavaScript for client side validation.

Unfortunately there are now a couple of caveats to using the number input, depending on your use case. Firefox and Webkit browsers will show an Up and Down arrow for the user to increment the number. These can get in the way of styling or cause user error. The other issue is that this increment can be adjusted with the Mouse Wheel and the Up and Down keys.

The below code will allow you to remove the increment arrows and maintain the other benefits of a number input.

CSS3 Logo

Ticker Using CSS Transitions & jQuery

The other day I was looking for a lightweight ticker to show some special offers. I couldn’t do this entirely with CSS (CSS3 Transitions). Some JavaScript is required to toggle an active state. I also wanted the ticker to pause when you mouse over the element. I forgot that I could use the Carousel built into Bootstrap, which the site does use, so I wrote my own jQuery plugin. Rather than delete the plugin, I thought I would share it.

The HTML is simple. You’ll need a wrapping element with some children. Give the wrapping element a class for its role ‘ticker’. For each of the children you want it to toggle the active state, add class ‘item’. The first item you want to show should be given the class ‘active’.

Next we need some CSS. There is many transitions you can create. I want a crossfade and a vertical movement. I have provided just what is required to make the animation work.

And then finally, the JavaScript. I wrote this using jQuery, which means you will need to add this before my plugin if its not already there.

Then use this to execute the plugin.

If you are using Bootstrap. You can forget about the jQuery plugin I created. But you can use the CSS, just change class ‘ticker’ to class ‘carousel’ and add the other attributes below.

All you need to do now is add your own finishing touches!