How to convert the WordPress meta box Page Attributes->Page Template dropdown to radio buttons?

I would like to be able to change the Page Attribute "Templates" dropdown to radio buttons, to allow me to have corresponding thumbnails next to them.

I have already removed and replaced the Page Attributes meta box on functions.php, as per below:

add_action( 'add_meta_boxes', 'wpse44966_add_meta_box' );
function wpse44966_add_meta_box( $post_type ){ 
    remove_meta_box(
        'pageparentdiv',
        'page',
        'side');
    add_meta_box(
        'wpse44966-meta-box',
        'page' == $post_type ? __('Page Style Templates') : __('Attributes'),
        'wpse44966_meta_box_cb', 
        'page', 
        'side', 
        'low');
}

I am then able to call back the "Templates" dropdown in my own meta box - I have also included the page_template_dropdown function (renamed 'page_template_dropdown_show_it').

function page_template_dropdown_show_it( $default = '', $post_type = 'page' ) {
    $templates = get_page_templates( null, $post_type );
    ksort( $templates );
    foreach ( array_keys( $templates ) as $template ) {
        $selected = selected( $default, $templates[ $template ], false );
        echo "\n\toption value='" . esc_attr( $templates[ $template ] ) . "' $selected" . esc_html( $template ) . '/option';
    }
}

function wpse44966_meta_box_cb( $post ){
    echo 'Please select from the below'; 
    if ( count( get_page_templates( $post ) )  0  get_option( 'page_for_posts' ) != $post-ID ) :
        $template = ! empty( $post-page_template ) ? $post-page_template : false;  ?
        p class="post-attributes-label-wrapper"label class="post-attributes-label" for="page_template"?php _e( 'Template' ); ?/label?php do_action( 'page_attributes_meta_box_template', $template, $post ); ?/p
        select name="page_template" id="page_template"
            ?php $default_title = apply_filters( 'default_page_template_title', __( 'Default Template' ), 'meta-box' ); ?
            option value="default"?php echo esc_html( $default_title ); ?/option
            ?php page_template_dropdown_show_it( $template, $post-post_type ); ?
        /select
    ?php endif;
}

However, when I then amend both page_template_dropdown_show_it and wpse44966_meta_box_cb to show radio buttons, the changes are applied visually but nothing happens when you select them?

function page_template_dropdown_show_it( $default = '', $post_type = 'page' ) {
    $templates = get_page_templates( null, $post_type );
    ksort( $templates );
    foreach ( array_keys( $templates ) as $template ) {
        $checked = checked( $default, $templates[ $template ], false );
        echo "\n\tinput type='radio' name='page_template' value='" . esc_attr( $templates[ $template ] ) . "' $checked" . esc_html( $template );
    }
}

function wpse44966_meta_box_cb( $post ){
    echo 'Please select from the below'; 
    if ( count( get_page_templates( $post ) )  0  get_option( 'page_for_posts' ) != $post-ID ) :
        $template = ! empty( $post-page_template ) ? $post-page_template : false;  ?
        p class="post-attributes-label-wrapper"label class="post-attributes-label" for="page_template"?php _e( 'Template' ); ?/label?php do_action( 'page_attributes_meta_box_template', $template, $post ); ?/p
            ?php $default_title = apply_filters( 'default_page_template_title', __( 'Default Template' ), 'meta-box' ); ?
            input type='radio' name='page_template' value="default"?php echo esc_html( $default_title ); ?
            ?php page_template_dropdown_show_it( $template, $post-post_type ); ?
    ?php endif;
}

It's obviously not as simple as a straight swap-out (as it isn't working), but the only thing that I can see that is missing is now there is nothing carrying the id="page_template", whereas before it was included in the below:

select name="page_template" id="page_template"

Topic page-attributes metabox templates Wordpress

Category Web


So, it appears that I was correct that the issue was that the id "page_template" was no longer being passed.

To solve this, all I have done is applied some Javascript (using the admin_enqueue_scripts function) which adds the id "page_template" to the radio button that has been selected.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.