Meta box controls – select and dropdowns

Custom metabox select

Continuing on the meta box tutorials, today's tutorial will cover the dropdown selects - pages and category dropdowns and custom select options.

Last time I covered the input field, radio buttons and check boxes for your meta box custom controls. We are going to continue on the same path. Today we’ll be interested in adding select dropdowns in our meta box. The environment in which we are going to do this will be the same as last time, so if you are testing this out, simply add the new controls after the already existing ones, and you’ll be good to go.

PHP code

Assuming you have added the meta box (if, not just look at the last article), inside the mytheme_metabox_controls() function we’ll add the new controls.

Here the things we’ve added are the new saved options

This is our check to see if we have anything saved in the database. You can even change the default values of these variables from empty to some value that you know can appear – certain page or a category ID, or a custom select value of your choice.

For custom select, we’ve populated the <select> HTML element with our own options. To have saved option displayed, or selected, we are using the built in function selected(). This function takes the saved value, and compares it to the value that is in the <option> element. The last argument, if set to true, will echo out the selected inside the option. The last argument is used if you want to use the selected function inside the return statement. In that case you can set it to false, so that it wouldn’t echo it out (because we don’t want echoing inside a return statement).

The next two functions we used are wp_dropdown_pages() and wp_dropdown_categories(). These built in functions will output selects with the pages or categories (taxonomies) that you want. The great thing about them is that you can customize them using the arguments array.
In the case of our pages select, we want to make sure that the selected option will show – we set it to the saved meta value, and that we give it the name and id so that we can target the correct $_POST array key

Similarly we do it for the categories

Saving the meta box

The last thing before completion is making sure that we have saved the selected options. In our mytheme_save_metaboxes() function

Notice the last three save options. We just follow the same principle as with input field. In the end we are left with something that looks like the image below

Select control in meta box

Select control in meta box


Using the meta fields is the same as before. Just use get_post_meta() function like

This will return the ID of the pages (or category), or the custom value from your custom select respectively. Just make sure you change the meta name.

This completes the second article in the series of meta box controls articles. In the next article I’ll cover the creation of image select, and gallery upload meta box controls, which can be useful in custom post types especially (in custom plugins). If you have any questions feel free to ask it in the comments below, and as always, happy coding :)

Also published on Medium.

Join the Discussion