To be compatible with ACF you should first find out how ACF is saving checkboxes values to database. As I now this is serialized array. When we know that we must save our frontend checkboxes in the same way. The good news is you can pass only array to update_post_meta and WordPress will take care of serialization.
The problem with your code is that you probably not passing array of checkbox values. You should investigate this part: esc_attr(strip_tags($_POST['customMetaAppliances[]'])).
Two things which bother me here:
esc_attr and strip_tags functions are expecting string as argument not an array they may return unexpected results- if you want to get array of checkboxes from post request you should use field name without square brackets
customMetaAppliances
I think you can replace saving part with code:
$customMetaAppliances = filter_input( INPUT_POST, 'customMetaAppliances', FILTER_SANITIZE_STRING, FILTER_REQUIRE_ARRAY );
update_field( 'customMetaAppliances', $customMetaAppliances, $post_id );
Personaly when I have installed ACF I use update_field instead of update_post_meta.
I created fully working class which will display form on the frontend after post content and save values to post ACF fields on submit.
class WPSE_287946_Form {
/**
* Class constructor
*/
public function __construct() {
$this->define_hooks();
}
public function save_form() {
if( isset( $_POST['save'] ) ) { // Submit button
$post_id = filter_input( INPUT_POST, 'id', FILTER_SANITIZE_NUMBER_INT );
$name = filter_input( INPUT_POST, 'name', FILTER_SANITIZE_STRING );
$color = filter_input( INPUT_POST, 'color', FILTER_SANITIZE_STRING );
$accessories = filter_input( INPUT_POST, 'accessories', FILTER_SANITIZE_STRING, FILTER_REQUIRE_ARRAY );
update_field( 'name', $name, $post_id );
update_field( 'color', $color, $post_id );
update_field( 'accessories', $accessories, $post_id );
// Redirect user because POST request on single post page will trigger 404 page.
wp_redirect( get_permalink( $post_id ) );
}
}
/**
* Display form
*/
public function display_form( $content ) {
$name = get_field( 'name' );
$color = get_field( 'color' );
$accessories = get_field( 'accessories' );
ob_start();
?>
<form method="post">
<p>
<?php $this->display_text( 'name', 'Name', $name ); ?>
</p>
<p>
<?php $this->display_select( 'color', 'Color', $this->get_available_colors(), $color ); ?>
</p>
<p>
<?php $this->display_checkboxes( 'accessories', 'Accessories', $this->get_available_accessories(), $accessories ); ?>
</p>
<p>
<input type="hidden" name="id" value="<?php esc_attr_e( get_the_ID() ) ?>">
<input type="submit" name="save" value="Submit" />
</p>
</form>
<?php
$output = ob_get_contents();
ob_end_clean();
return $content . $output;
}
/**
* Display text field
*/
private function display_text( $name, $label, $value = '' ) {
?>
<label><?php esc_html_e( $label, 'wpse_287946' ) ?></label>
<input type="text" name="<?php esc_attr_e( $name ) ?>" value="<?php esc_attr_e( $value ); ?>">
<?php
}
/**
* Display select field
*/
private function display_select( $name, $label, $options, $value = '' ) {
?>
<label><?php esc_html_e( $label, 'wpse_287946' ) ?></label>
<select name="<?php esc_attr_e( $name ) ?>">
<?php $this->display_options( $options, $value ); ?>
</select>
<?php
}
/**
* Display options
*/
private function display_options( $options, $value ) {
foreach( $options as $option_value => $option_label ):
$selected = ( $option_value === $value ) ? ' selected' : '';
?>
<option value="<?php esc_attr_e( $option_value ) ?>"<?php esc_attr_e( $selected ) ?>><?php esc_html_e( $option_label, 'wpse_287946' ) ?></option>
<?php
endforeach;
}
/**
* Display checkboxes field
*/
private function display_checkboxes( $name, $label, $options, $values = array() ) {
$name .= '[]';
?>
<label><?php esc_html_e( $label, 'wpse_287946' ) ?></label>
<?php
foreach ( $options as $option_value => $option_label ):
$this->display_checkbox( $name, $option_label, $option_value, $values );
endforeach;
}
/**
* Display single checkbox field
*/
private function display_checkbox( $name, $label, $available_value, $values = array() ) {
$checked = ( in_array($available_value, $values) ) ? ' checked' : '';
?>
<label>
<input type="checkbox" name="<?php esc_attr_e( $name ) ?>" value="<?php esc_attr_e( $available_value ) ?>"<?php esc_attr_e( $checked ) ?>>
<?php esc_html_e( $label, 'wpse_287946' ) ?>
</label>
<?php
}
/**
* Get available colors
*/
private function get_available_colors() {
return array(
'red' => 'Red',
'blue' => 'Blue',
'green' => 'Green',
);
}
/**
* Get available accessories
*/
private function get_available_accessories() {
return array(
'case' => 'Case',
'tempered_glass' => 'Tempered glass',
'headphones' => 'Headphones',
);
}
/**
* Define hooks related to plugin
*/
private function define_hooks() {
/**
* Add action to save form
*/
add_action( 'wp', array( $this, 'save_form' ) );
/**
* Add filter to display form
*/
add_filter( 'the_content', array( $this, 'display_form' ) );
}
}
new WPSE_287946_Form();
