Redesigning Custom Post Type “Add New” page

I’ve been browsing all over google for a solution to this. I’m writing a custom post types plugin for work to log-in visitors that we get. I initially wrote a mock-up without custom post types, then I came around here from a google search and saw a screenshot that showed an example of custom post types to store information about Attorneys. It showed that someone redesigned the “add new”/”edit” page for custom post types with a whole new interface.

I was wondering if wordpress @ stackexchange would have any resources to redesign the custom post types “add/edit” pages.

I can’t remember the search terms that I did to find that article however.

Thanks,

-Zack

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

The question / answer you are referring to was Tips for using WordPress as a CMS.

The screenshots posted in that answer were created using the register_meta_box_cb argument that is available to for custom post types.

register_meta_box_cb must specify a callback function that contains the code for the meta box.

To create the meta box you can use the WordPress built in add_meta_box function which also requires a function to save the entered data when the post is saved.

Here is some example code that I created to add 2 custom meta boxes to my portfolio post type I use on my personal website.

The “Projects” post type I created contained this argument:

'register_meta_box_cb' => 'c3m_project_meta',

The first function below is the call back function for register_meta_box_cb. The following 2 output the html for the meta boxes on the add post page and the last 2 save the entered data.

function c3m_project_meta() {
        add_meta_box('_c3m_project_url', __('Enter Website Url') , 'c3m_project_url', 'project', 'side', 'low');
        add_meta_box('_c3m_project_work', __('Enter Work Done on Project') , 'c3m_project_work', 'project', 'side', 'low');
        
        }

            
    function c3m_project_url($post) {
        global $post;
        echo  '<input type="hidden" name="banner-buttonmeta_noncename" id="banner-buttonmeta_noncename" value="' .
        wp_create_nonce( plugin_basename(__FILE__) ) . '" />';
        $projecturl = get_post_meta($post->ID, '_projecturl', true);
        echo '<input type="text" name="_projecturl" value="' . $projecturl . '" class="widefat" />' ; 
        }
        
    function c3m_project_work($post) {
        global $post;
        echo  '<input type="hidden" name="banner-buttonmeta_noncename" id="banner-buttonmeta_noncename" value="' .
        wp_create_nonce( plugin_basename(__FILE__) ) . '" />';
        $projectwork = get_post_meta($post->ID, '_projectwork', true);
        echo '<input type="text" name="_projectwork" value="' . $projectwork . '" class="widefat" />' ; 
        }
    
    
    add_action('admin_init', 'c3m_project_meta');

        
    
    function c3m_save_project_meta( $post_id , $post ) { 
 
        if ( !wp_verify_nonce( $_POST [ 'banner-buttonmeta_noncename' ], plugin_basename( __FILE__ ) )) { return $post ->ID; 

        }
     
        if ( !current_user_can( 'edit_post' , $post ->ID )) return $post ->ID; 
        $c3m_projecturl [ '_projecturl' ] = $_POST [ '_projecturl' ]; 
                    foreach ( $c3m_projecturl as $key => $value ) { 
                    if ( $post ->post_type == 'revision' ) return ; 
            
                    $value = implode( ',' , ( array ) $value );
                    if (get_post_meta( $post ->ID, $key , FALSE)) { 
                    update_post_meta( $post ->ID, $key , $value ); } else { 
                    add_post_meta( $post ->ID, $key , $value ); } if (! $value ) delete_post_meta( $post ->ID, $key ); 

                    }
         
        $c3m_projectwork [ '_projectwork' ] = $_POST [ '_projectwork' ]; 
                    foreach ( $c3m_projectwork as $key => $value ) { 
                    if ( $post ->post_type == 'revision' ) return ; 
            
                    $value = implode( ',' , ( array ) $value );
                    if (get_post_meta( $post ->ID, $key , FALSE)) { 
                    update_post_meta( $post ->ID, $key , $value ); } else { 
                    add_post_meta( $post ->ID, $key , $value ); } if (! $value ) delete_post_meta( $post ->ID, $key ); 

                    }
        }
        
   add_action( 'save_post' , 'c3m_save_project_meta' , 1, 2);

Method 2

When I was looking into the same matter, I found this article to be quite interesting:

How to Create A Custom WordPress Meta Box Instead of Using WordPress Custom Fields

Learning how to create custom WordPress meta boxes allow you to make professional UI elements for yourself and your clients. This WordPress meta box tutorial will show you how to add admin UI elements to the edit post/page screens.

Chris is right on the money, though an additional resource doesn’t hurt 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0