Creating Custom Post Type Meta-Boxes in WordPress

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 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.

This entry was posted in Wordpress Development and tagged , . Bookmark the permalink.

CommentsNo comments

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Contact Us

Wordpress Sliding Drawer Plugin

This jQuery powered sliding content area is made possible by 61 Designs Free Sliding Drawer Content Area Plugin. The plugin features an easy to use admin section where you can control everything from the position, color and text of the plugin. It also features up to 4 unique widget areas on the fly letting you drop anything into your sliding area with ease. The contact form below is a shortcode we dropped in a text widget.

Read more about the plugin in this blogpost…Read More

Contact Us