Meta box controls – datepicker and slider UI

Custom metabox datepicker and slider

Today we'll be covering a more advanced meta box controls that include jQuery UI plugins - datepicker and slider UI.

In the previous article I covered drop down controls in our meta box. Today we’ll move forward to more custom solutions. Instead of image and gallery meta box controls, we’ll add a datepicker – a calendar, and slider UI. They can be used for various things. I used datepicker for a custom reservation plugin, and in another project, I used it to schedule the custom post type expiration date using wp_cron().

Preparing the functions and layout

We’ll  be using the same template for post meta box as in the previous articles, but with some modifications. First we’ll ‘split’ the meta box to left and right side, so that everything is not crammed in. Remember you can set any kind of HTML layout you like. Our HTML will look like this

In the left part we’ll put our existing meta box controls, and in the right part we’ll put the new ones.

Before we start with the php code, we’ll need to add our JavaScript, otherwise we won’t be able to use our date picker and slider. Luckily for us, WordPress got us covered. If you take a look in the wp_enqueue_script() function developers page, you’ll notice that you can load dependencies that will be loaded with your enqueued script. We’ll need an admin.js file that will be enqueued only on our post/page page in the admin. In our functions.php we’ll add

We only want our admin.js to load on the post.php admin page, that’s why we will add the check if ( 'post.php' === $hook || 'post-new.php' === $hook ) to check for new or existing post. Next, notice that we’ve added jquery, jquery-ui-datepicker and jquery-ui-slider in our dependency array.  This way we don’t need to download separate files or call them from CDN since they are already included in WordPress.

Adding the controls

Now that we have our JavaScript file ready, and our layout pre made, we can add our custom controls. Inside our mytheme_metabox_controls( $post ) function we can add variables

Inside the right_part div we’ll add

We’ll create a slider that has a range (to make it more interesting). For our custom controls to work, we need to add some JavaScript. In admin.js add

Notice that we had to add some tests that will make the slider see the ranges it has in its values (if there are any). You can customize this as you wish of course. The same goes for datepicker. You can make it always present on screen, instead of calling it on input click for instance.

And we need to save our values, so in mytheme_save_metaboxes( $post_id ) function add

after the last if condition.

If you look at our meta box controls you’ll notice that they don’t have any styling set. WordPress will load JavaScript files, but won’t load any accompanied css styles with jQuery UI. That means that we either need to load it via locally downloaded files, set our own styling inline or pull the style from CDN network. I’ll show you how you can add the default style by calling it from the CDN. To do so, in our admin enqueue function you’ll add

We’ve used google’s CDN here.

Now that we’ve got that going we can see how it all looks like.

Datepicker and slider meta box control

Datepicker and slider meta box control.

Active datepicker and slider meta box control

Active datepicker and slider meta box control.

Note that you can add as many sliders as you want, but the JavaScript should be modified a bit to suit your needs (either duplicate the slider function, or use $.each function to apply the slider UI to each slider element – just be careful not to duplicate element id’s). You can also make datepicker always present on screen, in which case you’ll use a div instead of input field. But there is a small catch – since you need to save values, you’ll still need to place your selected values in an input field so that you can fetch it via  $_POST variable. This can be circumvented by making your calendar input field type="hidden" and then placing the picked value in it using JavaScript. It takes a bit more coding, but nothing you can’t do ;)

Our full php code for the metabox now looks like this:

Usage

The way you’ll use this on the front page is analogous to the previous cases

Next time I’ll cover the promised image and gallery upload meta box controls, so stay tuned for that.

I hope you’ll find this tutorial interesting and useful. If you have any questions feel free to post them below, and as always, happy coding :)


Also published on Medium.

Join the Discussion

  • sonia maklouf

    Hi Denis

    I try to mix this tuto and the Adding related pages and links in your articles one.
    In order to create a slider ui repeater metaboxes but I have some problems.

    How do you differenciate slider ui in order to get back their own value.

    In the repeater only the first slider works

    https://uploads.disquscdn.com/images/37d9b9b1e52db95eac6a63f92867f7f155d88ab15d0737db5bc28f2adb539621.png

    I’ve posted the question on SO : https://stackoverflow.com/questions/41312863/multiple-jquery-ui-slider

    • You need to be careful not to use ID of the slider to target it, since the ID should be unique. This is probably why you only get the first slider to work.

      Instead of $( '#slider-range' ).slider({...}); you’d need something like $('.slider-range').each(function(){$(this).slider({...});}); in your JS code. This code will make every present slider on your page work.

      But the issue is that you’re adding them dynamically, so you’d probably need to write a function that will initialize a slider, and then call that function every time you add one using the repeater field. There is some work to be done in order for this to work properly.

      • sonia maklouf

        Thanks :-)