0

I have created one dummy post type to check the values, if it's getting saved or not. However it's saving values for 'text input and text area' but remaining values (checkbox, select, images) are not getting saved :(

my codes are:

function add_your_fields_meta_box()
{
    add_meta_box('your_fields_meta_box', // $id
    'Your Fields', // $title
    'show_your_fields_meta_box', // $callback
    'your_post', // $screen
    'normal', // $context
    'high'
    // $priority
    );
}
add_action('add_meta_boxes', 'add_your_fields_meta_box');

function show_your_fields_meta_box()
{
    global $post;

    $meta = get_post_meta($post->ID, 'your_fields', true); ?>

  <input type="hidden" name="your_meta_box_nonce" value="<?php echo wp_create_nonce(basename(__FILE__)); ?>">

  <p>
    <label for="your_fields[text]">Input Text</label>
    <br>
    <input type="text" name="your_fields[text]" id="your_fields[text]" class="regular-text" value="<?php if (is_array($meta) && isset($meta['text']))
    {
        echo $meta['text'];
    } ?>">
  </p>
  <p>
    <label for="your_fields[textarea]">Textarea</label>
    <br>
    <textarea name="your_fields[textarea]" id="your_fields[textarea]" rows="5" cols="30" style="width:500px;"><?php if (is_array($meta) && isset($meta['textarea']))
    {
        echo $meta['textarea'];
    } ?></textarea>
  </p>
  <p>
    <label for="your_fields[checkbox]">Checkbox
            <input type="checkbox" name="your_fields[checkbox]" value="checkbox" <?php if (is_array($meta) ['checkbox'] === 'checkbox') echo 'checked'; ?>>
        </label>
  </p>
  <p>
    <label for="your_fields[select]">Select Menu</label>
    <br>
    <select name="your_fields[select]" id="your_fields[select]">
                <option value="option-one" <?php selected(is_array($meta) ['select'], 'option-one'); ?>>Option One</option>
                <option value="option-two" <?php selected(is_array($meta) ['select'], 'option-two'); ?>>Option Two</option>
        </select>
  </p>
  <p>
    <label for="your_fields[image]">Image Upload</label><br>
    <input type="text" name="your_fields[image]" id="your_fields[image]" class="meta-image regular-text" value="<?php echo is_array($meta) ['image']; ?>">
    <input type="button" class="button image-upload" value="Browse">
  </p>
  <div class="image-preview"><img src="<?php echo is_array($meta) ['image']; ?>" style="max-width: 250px;"></div>


  <script>
    jQuery(document).ready(function ($) {
      // Instantiates the variable that holds the media library frame.
      var meta_image_frame;
      // Runs when the image button is clicked.
      $('.image-upload').click(function (e) {
        // Get preview pane
        var meta_image_preview = $(this).parent().parent().children('.image-preview');
        // Prevents the default action from occuring.
        e.preventDefault();
        var meta_image = $(this).parent().children('.meta-image');
        // If the frame already exists, re-open it.
        if (meta_image_frame) {
          meta_image_frame.open();
          return;
        }
        // Sets up the media library frame
        meta_image_frame = wp.media.frames.meta_image_frame = wp.media({
          title: meta_image.title,
          button: {
            text: meta_image.button
          }
        });
        // Runs when an image is selected.
        meta_image_frame.on('select', function () {
          // Grabs the attachment selection and creates a JSON representation of the model.
          var media_attachment = meta_image_frame.state().get('selection').first().toJSON();
          // Sends the attachment URL to our custom image input field.
          meta_image.val(media_attachment.url);
          meta_image_preview.children('img').attr('src', media_attachment.url);
        });
        // Opens the media library frame.
        meta_image_frame.open();
      });
    });
  </script>

  <?php
}
function save_your_fields_meta($post_id)
{
    // verify nonce
    if (isset($_POST['your_meta_box_nonce']) && !wp_verify_nonce($_POST['your_meta_box_nonce'], basename(__FILE__)))
    {
        return $post_id;
    }
    // check autosave
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
    {
        return $post_id;
    }
    // check permissions
    if (isset($_POST['post_type']))
    { //Fix 2
        if ('page' === $_POST['post_type'])
        {
            if (!current_user_can('edit_page', $post_id))
            {
                return $post_id;
            }
            elseif (!current_user_can('edit_post', $post_id))
            {
                return $post_id;
            }
        }
    }

    $old = get_post_meta($post_id, 'your_fields', true);
    if (isset($_POST['your_fields']))
    { //Fix 3
        $new = $_POST['your_fields'];
        if ($new && $new !== $old)
        {
            update_post_meta($post_id, 'your_fields', $new);
        }
        elseif ('' === $new && $old)
        {
            delete_post_meta($post_id, 'your_fields', $old);
        }
    }
}

add_action('save_post', 'save_your_fields_meta');
5
  • Did my answer help? Or have you solved the issue? How, if yes?
    – Sally CJ
    Commented Sep 22, 2021 at 9:29
  • 1
    yes, it's working Thanks :)
    – Ricky
    Commented Sep 22, 2021 at 9:38
  • Can you look into this wordpress.stackexchange.com/questions/395975/…
    – Ricky
    Commented Sep 22, 2021 at 9:39
  • I can, but not within this hour. Thanks for accepting my answer :)
    – Sally CJ
    Commented Sep 22, 2021 at 10:02
  • 1
    thanks a lot for the help :)
    – Ricky
    Commented Sep 22, 2021 at 13:11

1 Answer 1

1

but remaining values (checkbox, select, images) are not getting saved

I believe those fields are also getting saved, but you are just not displaying them correctly. And you should always escape input/textarea values, e.g. use esc_attr() for single-line inputs and esc_textarea() for textareas (multi-line inputs).

So to make your code work correctly, try these:

  • First off, you can define default values for your your_fields meta like so, which uses wp_parse_args():

    $meta = get_post_meta($post->ID, 'your_fields', true);
    
    // Merge with default values, ensuring all keys are set.
    $meta = wp_parse_args( $meta, array(
        'text'     => '',
        'textarea' => '',
        'checkbox' => '',
        'select'   => '',
        'image'    => '',
    ) );
    
  • Then use the following to display your form fields: (just replace the corresponding field in your existing code)

    <input type="text" name="your_fields[text]" id="your_fields[text]" class="regular-text"
        value="<?php echo esc_attr( $meta['text'] ); ?>">
    
    <textarea name="your_fields[textarea]" id="your_fields[textarea]" rows="5" cols="30"
        style="width:500px;"><?php echo esc_textarea( $meta['textarea'] ); ?></textarea>
    
    <input type="checkbox" name="your_fields[checkbox]" value="checkbox"
        <?php checked( $meta['checkbox'], 'checkbox' ); ?>>
    
    <select name="your_fields[select]" id="your_fields[select]">
        <option value="">Select..</option>
        <option value="option-one"<?php selected( $meta['select'], 'option-one' ); ?>>Option One</option>
        <option value="option-two"<?php selected( $meta['select'], 'option-two' ); ?>>Option Two</option>
    </select>
    
    <input type="text" name="your_fields[image]" id="your_fields[image]"
        class="meta-image regular-text" value="<?php echo esc_attr( $meta['image'] ); ?>">
    

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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