2

I browsed WordPress Codex, and I find something like this →

function is_page_template( $template = '' ) {
    $page_template = get_page_template_slug( get_queried_object_id() );


if ( empty( $template ) )
    return (bool) $page_template;

if ( $template == $page_template )
    return true;

if ( is_array( $template ) ) {
    if ( ( in_array( 'default', $template, true ) && ! $page_template )
        || in_array( $page_template, $template, true )
    ) {
        return true;
    }
}

return ( 'default' === $template && ! $page_template );
}

I think If we paste the above in our functions.php then we will have posts template options, Right?

but what if we want template selection of post type with images like this → enter image description here This is an image from genesis post page backend.

Does WordPress provide such arrangements? I am a beginner so could not understand How can I accomplish this?

Although the logic is clear to me →

Step 1: Create Meta in the backend that will have some selection options like this → enter image description hereenter image description hereenter image description here

** Step 2 **→ we have to connect our option selected in this meta somehow to print a class. For example, let u assume the images are in order then if second selected (second image) then echo "sidebar-wrap2", which is a class.

Currently, this is the HTML →

<aside class="main-sidebar col">
    <?php dynamic_sidebar( 'sidebar1' ); ?>
</aside>





<aside class="main-sidebar col <?php If certain condition true {echo "sidebar-wrap2"} ?> ">
    <?php dynamic_sidebar( 'sidebar1' ); ?>
</aside>

Although I do not know what this certain condition will be, and how to write that.

I am a novice in coding so please do forgive meIf I am unable to present my question correctly. Thanks!

1

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
    }
  • I was thinking the image options in terms of boolean. – The WP Novice May 23 '17 at 19:23
  • 1
    A boolean is 0 or 1 meaning false or true if you wanted to use this on more than one option then you would need to code a lot more than using a radio button options panel to make sure that not all options was set as active at the same time if someone clicked on the various options. – Sam May 23 '17 at 19:29
  • 1
    Check out the update as I have done most of the base of the plugin you need. – Sam May 23 '17 at 20:32
  • 1
    @TheWPNovice fully working code all you have to do is pull the required information where needed and add your dynamic_sidebar( 'sidebar1' ); options. – Sam May 23 '17 at 20:53
  • I put the code in functions.php, and the styles in css/style.css, but it is not taking the styles. Does admin styles are to be saved somewhere else? – The WP Novice May 24 '17 at 7:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.