php - make custom image field required - Stack Overflow

admin管理员组

文章数量:1122832

I have created a custom post type called "Blog", which includes three fields: title, a description and cover image fields. Currently the post can be published without description or image, i want to make sure the image and the description are required and show an error massage if it's missing

here is the functions.php:

add_action('init', 'custom_blog_post_type');

function custom_blog_post_type()
{
  $labels = array(
    'name'          => 'Blogs',
    'singular_name' => 'Blog',
    'menu_name'     => 'Blogs',
    'add_new'       => 'Add New Blog',
    'add_new_item'  => 'Add New Blog Post',
    'edit_item'     => 'Edit Blog Post',
    'all_items'     => 'All Blogs',
  );

  $args = array(
    'labels'            => $labels,
    'public'            => true,
    'has_archive'       => true,
    'show_in_rest'      => true,
    'menu_icon'         => 'dashicons-edit',
    'supports'          => array('title', 'editor'),
  );

  register_post_type('blogs', $args);
}

// image field
function add_cover_image_meta_box() {
  add_meta_box(
    'cover_image_meta_box',
    'Cover Image',
    'cover_image_meta_box_callback',
    'blogs',
    'side',
    'high'
  );
}
add_action('add_meta_boxes', 'add_cover_image_meta_box');

function cover_image_meta_box_callback($post) {
  // Retrieve the current value of the image URL
  $image_url = get_post_meta($post->ID, '_cover_image', true);
?>
  <div>
    <label for="cover_image">Upload a cover image:</label>
    <input type="text" name="cover_image" id="cover_image" placeholder="image url" style="margin-top: 3px;" value="<?php echo esc_attr($image_url); ?>" />
    <button type="button" id="upload_button" style="margin-top: 5px;" class="button upload-image-button">Upload Image</button>
  </div>

  <div id="image_preview" style="margin-top: 10px;">
    <?php if ($image_url) : ?>
      <img src="<?php echo esc_url($image_url); ?>" alt="Cover Image" style="max-width: 100%; height: auto;" />
    <?php endif; ?>
  </div>

  <script>
    jQuery(document).ready(function($) {
      $('#upload_button').click(function(e) {
        e.preventDefault();

        var mediaUploader = wp.media({
          title: 'Select Image',
          button: {
            text: 'Use this image'
          },
          multiple: false
        }).open().on('select', function() {
          var uploaded_image = mediaUploader.state().get('selection').first();
          var image_url = uploaded_image.toJSON().url;

          $('#cover_image').val(image_url);
          // Display the preview of the uploaded image
          $('#image_preview').html('<img src="' + image_url + '" alt="Cover Image" style="max-width: 100%; height: auto;" />');
        })
      });
    });
  </script>
<?php
}

function save_cover_image_meta($post_id) {
  // Check if the field is set and save it
  if (isset($_POST['cover_image'])) {
    update_post_meta($post_id, '_cover_image', sanitize_text_field($_POST['cover_image']));
  }
}

add_action('save_post', 'save_cover_image_meta');

I have created a custom post type called "Blog", which includes three fields: title, a description and cover image fields. Currently the post can be published without description or image, i want to make sure the image and the description are required and show an error massage if it's missing

here is the functions.php:

add_action('init', 'custom_blog_post_type');

function custom_blog_post_type()
{
  $labels = array(
    'name'          => 'Blogs',
    'singular_name' => 'Blog',
    'menu_name'     => 'Blogs',
    'add_new'       => 'Add New Blog',
    'add_new_item'  => 'Add New Blog Post',
    'edit_item'     => 'Edit Blog Post',
    'all_items'     => 'All Blogs',
  );

  $args = array(
    'labels'            => $labels,
    'public'            => true,
    'has_archive'       => true,
    'show_in_rest'      => true,
    'menu_icon'         => 'dashicons-edit',
    'supports'          => array('title', 'editor'),
  );

  register_post_type('blogs', $args);
}

// image field
function add_cover_image_meta_box() {
  add_meta_box(
    'cover_image_meta_box',
    'Cover Image',
    'cover_image_meta_box_callback',
    'blogs',
    'side',
    'high'
  );
}
add_action('add_meta_boxes', 'add_cover_image_meta_box');

function cover_image_meta_box_callback($post) {
  // Retrieve the current value of the image URL
  $image_url = get_post_meta($post->ID, '_cover_image', true);
?>
  <div>
    <label for="cover_image">Upload a cover image:</label>
    <input type="text" name="cover_image" id="cover_image" placeholder="image url" style="margin-top: 3px;" value="<?php echo esc_attr($image_url); ?>" />
    <button type="button" id="upload_button" style="margin-top: 5px;" class="button upload-image-button">Upload Image</button>
  </div>

  <div id="image_preview" style="margin-top: 10px;">
    <?php if ($image_url) : ?>
      <img src="<?php echo esc_url($image_url); ?>" alt="Cover Image" style="max-width: 100%; height: auto;" />
    <?php endif; ?>
  </div>

  <script>
    jQuery(document).ready(function($) {
      $('#upload_button').click(function(e) {
        e.preventDefault();

        var mediaUploader = wp.media({
          title: 'Select Image',
          button: {
            text: 'Use this image'
          },
          multiple: false
        }).open().on('select', function() {
          var uploaded_image = mediaUploader.state().get('selection').first();
          var image_url = uploaded_image.toJSON().url;

          $('#cover_image').val(image_url);
          // Display the preview of the uploaded image
          $('#image_preview').html('<img src="' + image_url + '" alt="Cover Image" style="max-width: 100%; height: auto;" />');
        })
      });
    });
  </script>
<?php
}

function save_cover_image_meta($post_id) {
  // Check if the field is set and save it
  if (isset($_POST['cover_image'])) {
    update_post_meta($post_id, '_cover_image', sanitize_text_field($_POST['cover_image']));
  }
}

add_action('save_post', 'save_cover_image_meta');

• php
• html
• wordpress

Share Improve this question Follow asked Nov 22, 2024 at 13:42 emademad 1133 bronze badges 2

• 1 Not directly related to your problem, but WordPress ships with a native blog entity type. When we say "CPT" we're literally saying we're making a custom variant of this native post/blog type. WordPress even has special filters and functions optimized for this native type that behave differently sometimes than other CPTs. So I just want to make sure you aren't over-engineering something new, when you could possibly use the existing solution with a couple of minor tweaks. – Chris Haas Commented Nov 22, 2024 at 13:59
• To your question, do you want to force users to have these fields, and make it so that a blog post cannot be published if they are not entered? Or do you want to just allow publishing but show some errors, which are effectively warnings? – Chris Haas Commented Nov 22, 2024 at 14:16

Add a comment  | 

1 Answer 1

Sorted by: Reset to default -1

Step 1: Prevent Saving Post Without Required Fields

   function save_cover_image_meta($post_id) {

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) 
        return;

    // Check user permissions.
    if (isset($_POST['post_type']) && 'blogs' == $_POST['post_type']) {
        if (!current_user_can('edit_post', $post_id)) 
            return;
    }

    // Check if the cover image is set.
    if (empty($_POST['cover_image'])) {
        // Set a custom session flag to indicate missing cover image.
        set_transient("missing_cover_image_$post_id", true, 60);
    } else {
        // Save or update the cover image URL in post meta.
        update_post_meta($post_id, '_cover_image', sanitize_text_field($_POST['cover_image']));
    }

    // Check if the description is empty (assuming the description is stored in the post content).
    $post_content = isset($_POST['content']) ? $_POST['content'] : '';
    if (empty(trim($post_content))) {
        // Set a custom session flag to indicate missing description.
        set_transient("missing_description_$post_id", true, 60);
    }
}
add_action('save_post', 'save_cover_image_meta');

Step 2: Display Admin Notices for Missing Fields

function show_required_fields_admin_notice() {
    global $post;

    if ($post && get_transient("missing_cover_image_{$post->ID}")) {
        echo '<div class="notice notice-error"><p>Please add a cover image before publishing this blog post.</p></div>';
        delete_transient("missing_cover_image_{$post->ID}");
    }

    if ($post && get_transient("missing_description_{$post->ID}")) {
        echo '<div class="notice notice-error"><p>Please add a description before publishing this blog post.</p></div>';
        delete_transient("missing_description_{$post->ID}");
    }
}
add_action('admin_notices', 'show_required_fields_admin_notice');

本文标签： phpmake custom image field requiredStack Overflow