New Meta Box for WordPress Custom Post Type
We recently were presented with the challenge of creating a custom post type meta box in WordPress’s Admin section. The new custom post type (slide) would need a set of new meta boxes when adding a new slide. This new meta box would be called slide type and it’s main purpose is to determine what other meta boxes should be displayed when a certain slide type was selected. The reason for this approach is to keep the UI for the slide custom post type clean. There are three options of our slide type - Nivo, Cycle Content, and Cycle Active.
- Nivo
- Nivo slide type is used for the nivo slider. When creating a new nivo slide, the user will be able to input the images as well as a caption for the image
- Cycle Content
- A Cycle Content slide is basically ANY content that can be entered through the wordpress TinyMCE editor. This includes shortcodes, images, videos etc.
- Cycle Active
- Cycle Active Sliders are really cool and the input form for a slide of this type is basically three spots for images that make up a single slide. The idea here is to have the three images have transparent backgrounds and “fall” on top of each other to create some pretty cool effects
As you can see, each slide type requires a different type of input form. So, to keep the UI clean and uncluttered, when a user clicks Add New Slide, the first thing they are presented with is a radio group which gives them the option to choose which type of slider they’d like to create:
Once they select what type of slide they’re creating, the appropriate input form is presented for that slide type. This keeps the UI clean and easy to understand. Here’s the basics on how we go this to work:
Step 1 – Add the Meta Box
add_action( 'add_meta_boxes', 'add_slides_metaboxes', 1 ); // priority 1
function add_slides_metaboxes() {
add_meta_box('slide_type','Slide Type', 'slide_type','slides','normal','high');
}
Step 2 – Meta Box Content Function
In the add_meta_box function call above, we said that our callback function was slide_type (the third parameter). This means that we now need a function that called slide_type that will output the html/jquery content of our new meta box.
function slide_type(){
//Function to output the html of the meta box form. jQuery to hide all content and show when a certain radio is selected
}
Ater your have your function built with the necessary php/jQuery to perform the work, when a user clicks Add New Slide, they’re only shown the radio list meta box to select the slide type. Once they choose a slide type, the proper UI input form for that particular slide type appears.
CommentsNo comments