5

I would like to require a featured image on a site I am developing.

I tried the code here: Make featured image required and nothing happened - the JS showed up in the site header, but I could still save the post without a featured image, and never got an error message.

There are several plugins that do this, such as Mandatory Field and WyPiekacz, but I need to do something more complicated... I have a custom meta box with radio buttons. I need to require a featured image only if a certain radio button is checked. I'm already requiring some other fields (category and some custom taxonomies) if certain radio buttons are checked, using jQuery validation.

So I guess I can boil this down to two questions:

  1. What's a good way to require a featured image?

  2. How can I integrate that into some existing validation and require a featured image only if a radio button is selected?

Question 1 is probably much easier to answer, and if someone can answer #1, then I can probably figure out #2 on my own.

2 Answers 2

2

I would do this by hooking into the save_post action, not by javascript.

The main idea is to check if both values are there (Your Radiobutton is selected AND the post_thumbnail is present), and set the post to draft if they are not, as well as displaying an Information if the user does not fulfill the requirements.

First, hook into the save_post action, and check if the Radiobutton has your Value, as well as the Post Thumbnail is selected. If everything is okay, you do not need to do anything else, but in your special case you have to prevent the post from being published, as well as display an Error message to inform the user.

<?php
// this function checks if the checkbox and the thumbnail are present
add_action('save_post', 'f711_option_thumbnail');

function f711_option_thumbnail($post_id) {
    // get the value that is selected for your select, don't know the specifics here
    // you may need to check this value from the submitted $_POST data.
    $checkoptionvalue = get_post_meta( $post_id, "yourmetaname", true );
    if ( !has_post_thumbnail( $post_id ) && $checkoptionvalue == "yourvalue" ) {
        // set a transient to show the users an admin message
        set_transient( "post_not_ok", "not_ok" );
        // unhook this function so it doesn't loop infinitely
        remove_action('save_post', 'f711_option_thumbnail');
        // update the post set it to draft
        wp_update_post(array('ID' => $post_id, 'post_status' => 'draft'));
        // re-hook this function
        add_action('save_post', 'f711_option_thumbnail');
    } else {
        delete_transient( "post_not_ok" );
    }
}

// add a admin message to inform the user the post has been saved as draft.

function showAdminMessages()
{
            // check if the transient is set, and display the error message
    if ( get_transient( "post_not_ok" ) == "not_ok" ) {
        // Shows as an error message. You could add a link to the right page if you wanted.
        showMessage("You need to select a Post Thumbnail if you choose this Option. Your Post was not published.", true);
                // delete the transient to make sure it gets shown only once.
        delete_transient( "post_not_ok" );
    }

}   
add_action('admin_notices', 'showAdminMessages');       
// function to display the errormessage
function showMessage($message, $errormsg = false)
{
    if ($errormsg) {
        echo '<div id="message" class="error">';
    }
    else {
        echo '<div id="message" class="updated fade">';
    }

    echo "<p><strong>$message</strong></p></div>";

}   


?>
1
  • Thanks, fischi! This looks like an excellent solution - one of the best I've seen. I've seen other solutions that use the pre_post_update action (like stackoverflow.com/questions/12410402/… ), and the problem with those is that you lose everything you just entered into the post if you don't have the featured image. Normally I would prefer to do it your way instead of with JS, but in this case, I'm relying on a lot of JS for validation, so I found a JS solution. I'll post it here.
    – Morgan Kay
    Feb 5, 2013 at 17:51
0

Here's what I ended up doing:

      jQuery('#post').submit(function() {
            if (jQuery('.force').is(':checked')) {
              if (jQuery("#set-post-thumbnail").find('img').size() > 0) {
                jQuery('#ajax-loading').hide();
                jQuery('#publish').removeClass('button-primary-disabled');
                return true;
              }else{
                alert("Please set a Featured Image!");
                jQuery('#ajax-loading').hide();
                jQuery('#publish').addClass('button-primary-disabled');
                return false;
              }
            }else{
              return true;
            }
            return false;
            });

Like I said in my comment to fischi, I would generally prefer to use a PHP method like his, but in this case, my site relies on a lot of jQuery validation anyway, so it made sense to just stick with a JavaScript method. This is working just fine for me.

2
  • Fine solution as well! A little problem I see with your solution (but didn't try it) - if you add the Class button-primary-disabled, can you submit the Form? Or do you have other listeners as well, removing the Class again?
    – fischi
    Feb 5, 2013 at 18:10
  • You can't submit the form, and that's precisely the point - as soon as you add a featured image, it removes the class, and then you can submit the form.
    – Morgan Kay
    Feb 5, 2013 at 21:59

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.