WordPress Change Post Templates,but not drop down, but Image selection

This is a in-depth feature you are trying to achieve but I have listed some information below that will help you on your way to work on adding this feature.

  1. Build a custom meta_box with your options for post type create a meta box is a good starting point you will be able to google more for other samples
  2. Creating an image radio buttonRadio button images
  3. You would need to pull this option in your post display area and check what option was saved to display the correct layout you desire

You will need to include some sort of code like below where your returning your post/s if in single.php so on but I would add this page as a child theme if your not the theme author for future updates.

// Get our option for post ID from the options meta box change "$field_name" to your option name you use in the meta box
$post_id = get_post_meta(get_the_ID(),$field_name,true);

// Check our option and change the display to what option is set

if($post_id == 'sidebar1'){
  dynamic_sidebar( 'sidebar1' );
}
if($post_id == 'sidebar2'){
  dynamic_sidebar( 'sidebar2' );
}
else{
 // Added for when an option is not set
}

enter image description here

UPDATE 2:

Here is a plugin code that will create the meta box and add the image radio button set and save the data it also set the border red on the selected option if there is one fully working. You will also want to do some of the below for using this on a live site.

  1. Save the code in a php file and add into a folder ready for uploading to a site
  2. Edit the plugin details and also default code such as custom_meta_box_markup
  3. Enque the css into a separate file and also use image folder and then link to your own images

The code:

<?php
    /**
    * Plugin Name: Post options panel
    * Plugin URI: url to plugin
    * Description: Adds posts options layout
    * Version: 1.0
    * Author: My name
    * Author URI: My url
    * License: A "Slug" license name e.g. GPL12
    */

    // Dont call me direct!
    if ( ! defined( 'ABSPATH' ) ) exit;




    // Create content
    function custom_meta_box_markup($object)
    {
        wp_nonce_field(basename(__FILE__), "meta-box-nonce");

        ?>

    <style>
    label > input{ /* HIDE RADIO */
      visibility: hidden; /* Makes input not-clickable */
      position: absolute; /* Remove input from document flow */
    }
    label > input + img{ /* IMAGE STYLES */
      cursor:pointer;
      border:2px solid transparent;
    }
    label > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
      border:2px solid #f00;
    }
    </style>



            <div>

                <h4>Radio options</h4>
                <?php
                    // U need to use this to set the checked="checked"
                    $checkbox_value = get_post_meta($object->ID, "meta-box-radio", true);
                ?>
                           <label>
                           <input type="radio" name="meta-box-radio" value="sidebar1"<?php if($checkbox_value == 'sidebar1'){echo 'checked =\"checked\"';} ?> /><img src="http://3.bp.blogspot.com/-J7zDitJOPZs/VhysC9I9n7I/AAAAAAAAERk/fAMHsC2fiGI/s1600/grey_new_seo-18-512.png" style="height: 20px; width: 20px;"></label>
                           <label>
                           <input type="radio" name="meta-box-radio" value="sidebar2" <?php if($checkbox_value == 'sidebar2'){echo 'checked =\"checked\"';} ?>/><img src="http://3.bp.blogspot.com/-J7zDitJOPZs/VhysC9I9n7I/AAAAAAAAERk/fAMHsC2fiGI/s1600/grey_new_seo-18-512.png" style="height: 20px; width: 20px;"></label>
                           <label>
                           <input type="radio" name="meta-box-radio" value="sidebar3" <?php if($checkbox_value == 'sidebar3'){echo 'checked =\"checked\"';} ?>/><img src="http://3.bp.blogspot.com/-J7zDitJOPZs/VhysC9I9n7I/AAAAAAAAERk/fAMHsC2fiGI/s1600/grey_new_seo-18-512.png" style="height: 20px; width: 20px;"></label>

            </div>
    <?
    }


    // Saving data
    function save_custom_meta_box($post_id, $post, $update)
    {
        if (!isset($_POST["meta-box-nonce"]) || !wp_verify_nonce($_POST["meta-box-nonce"], basename(__FILE__)))
            return $post_id;

        if(!current_user_can("edit_post", $post_id))
            return $post_id;

        if(defined("DOING_AUTOSAVE") && DOING_AUTOSAVE)
            return $post_id;

        $slug = "post";
        if($slug != $post->post_type)
            return $post_id;



        if(isset($_POST["meta-box-radio"]))
        {
            $meta_box_value = $_POST["meta-box-radio"];
        }
        update_post_meta($post_id, "meta-box-radio", $meta_box_value);

    }

    add_action("save_post", "save_custom_meta_box", 10, 3);


    function add_custom_meta_box()
    {
        add_meta_box("demo-meta-box", "Custom Meta Box", "custom_meta_box_markup", "post", "normal", "high", null);
    }

    add_action("add_meta_boxes", "add_custom_meta_box");

Here is the code that you can use to get the option saved

// Get our option for post ID from the options meta box change "$field_name" to your option name you use in the meta box
$post_option = get_post_meta(get_the_ID(),"meta-box-radio",true);

// Check our option and change the display to what option is set

    if($post_option == 'sidebar1'){
      dynamic_sidebar( 'sidebar1' );
    }
    if($post_option == 'sidebar2'){
      dynamic_sidebar( 'sidebar2' );
    }
    else{
     // Added for when an option is not set
    }

Leave a Comment