Submitting Custom Post Types with custom fields from Front-end form

Question

I'm trying to have a custom type post with 2 custom fields. Now I have the working custom post types and working form at the front-end via a template page. The problem is I can not get the custom field working, that means the custom field can not be saved via front-end form nor show that custom field's value in single.php page. Now i can submit posts from front-end with title and content only.

Here is the custom post types and form that i have in functions.php

function ty_post_type_init() {
  $labels = array(
    'name' => _x('Betting Tips', 'the custom posts', 'your_text_domain'),
    'singular_name' => _x('Betting Tips', 'the custom post', 'your_text_domain'),
    'add_new' => _x('Add New', 'custom_posts', 'your_text_domain'),
    'add_new_item' => __('Add New Betting Tips', 'your_text_domain'),
    'edit_item' => __('Edit Betting Tips', 'your_text_domain'),
    'new_item' => __('New Betting Tips', 'your_text_domain'),
    'all_items' => __('All Betting Tips', 'your_text_domain'),
    'view_item' => __('View Betting Tips', 'your_text_domain'),
    'search_items' => __('Search Betting Tips', 'your_text_domain'),
    'not_found' =>  __('No betting tips found', 'your_text_domain'),
    'not_found_in_trash' => __('No betting tips found in Trash', 'your_text_domain'), 
    'parent_item_colon' => '',
    'menu_name' => __('Betting Tips', 'your_text_domain')
  );

  $args = array(
    'labels' => $labels,
    'public' => true,
    'publicly_queryable' => true,
    'show_ui' => true, 
    'show_in_menu' => true, 
    'query_var' => true,
    'rewrite' => array( 'slug' => _x( 'custom_posts', 'URL slug', 'your_text_domain' ) ),
    'capability_type' => 'post',
    'has_archive' => true, 
    'hierarchical' => false,
    'menu_position' => null,
    'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments' )
  );

  register_post_type('custom_posts', $args);
  flush_rewrite_rules();
}
add_action( 'init', 'ty_post_type_init' );

function ty_front_end_form() { ?>
    <form id="custom-post-type" name="custom-post-type" method="post" action="">
        <p>
            <label for="title">Post Title</label><br />
            <input type="text" id="title" value="" tabindex="1" size="20" name="title" />
        </p>

        <p>
            <label for="custom_field_one">Custom Field</label>
            <input type="text" value="" id="custom_field_one" size="60" tabindex="20" name="custom_field_one">
        <p>

        <p>
            <label for="description">Post Description</label><br />
            <textarea id="description" tabindex="3" name="description" cols="50" rows="6"></textarea>
        </p>

        <p>
            <?php wp_dropdown_categories( 'show_option_none=Category&tab_index=4&taxonomy=category' ); ?>
        </p>

        <p>
            <label for="post_tags">Post Tags</label>
            <input type="text" value="" tabindex="5" size="16" name="post-tags" id="post-tags" />
        </p>

        <p align="right">
            <input type="submit" value="Publish" tabindex="6" id="submit" name="submit" />
        </p>

        <input type="hidden" name="post-type" id="post-type" value="custom_posts" />

        <input type="hidden" name="action" value="custom_posts" />

        <?php wp_nonce_field( 'name_of_my_action','name_of_nonce_field' ); ?>

    </form>
    <?php

    if( $_POST ){
        ty_save_post_data();
    }
}
add_shortcode('custom_posts','ty_front_end_form');

function ty_save_post_data() {

    if ( empty($_POST) || !wp_verify_nonce($_POST['name_of_nonce_field'],'name_of_my_action') ) {
       print 'Sorry, your nonce did not verify.';
       exit;
    } else { 

        if (isset ($_POST['title'])) {
            $title =  $_POST['title'];
        } else {
            echo 'Please enter a title';
            exit;
        }

        if (isset ($_POST['description'])) {
            $description = $_POST['description'];
        } else {
            echo 'Please enter the content';
            exit;
        }

        if (isset($_POST['post_tags'])){
            $tags = $_POST['post_tags'];
        } else {
            $tags = "";
        }

       $custom_field_one = $_POST['custom_field_one'];

        $post = array(
            'post_title' => wp_strip_all_tags( $title ),
            'post_content' => $description,
            'post_category' => $_POST['cat'], 
            'custom_field_one' => $custom_field_one, // 
            'tags_input' => $tags,
            'post_status' => 'publish', 
            'post_type' => custom_posts  
        );
        wp_insert_post($post);

        $location = home_url(); 

        echo "<meta http-equiv='refresh' content='0;url=$location' />";
        exit;
    } // end IF

}

and then I have created a page template custom-form.php

<?php
    /**
     * Template Name: My Custom Form
     */
    get_header();

    ty_front_end_form();

    get_footer();
?>

And, this is my single.php page:

<h1 class="single-post-title"><?php esc_html(the_title()); ?></h1>
<div class="my-single-content">
    <?php esc_html(the_content()); ?>
</div>
<div class="custom-field-one">
    <?php echo get_post_meta($post->ID, "custom_field_one", true); ?>
</div>

Please help me with getting the value of a custom field in single.php through the frontend form.

Many Thanks!

Answer 1

I don't understand why you registered a shortcode if you aren't using it. Your custom-form.php's code can be:

<?php
    /**
     * Template Name: My Custom Form
     */
    get_header();

    echo do_shortcode('[custom_posts]');

    get_footer();
?>

Now, back to your question, how to save and/or get the custom field value. Well, your method of saving the custom field (meta) value is totally incorrect. I wonder what you got in SERPs when you searched for a related query, or did you even search?

To save post_meta value, first get ID of the newly created post and the save the custom field value. To make the answer shorter, I'll include the relevant code only

$post = array(
    'post_title' => wp_strip_all_tags( $title ),
    'post_content' => $description,
    'post_category' => $_POST['cat'],
    'tags_input' => $tags,
    'post_status' => 'publish', 
    'post_type' => 'custom_posts'
);
$post_id = wp_insert_post($post);

add_post_meta( $post_id, 'custom_field_one', $custom_field_one, false );

You can also do this

$post = array(
    'post_title' => wp_strip_all_tags( $title ),
    'post_content' => $description,
    'post_category' => $_POST['cat'],
    'tags_input' => $tags,
    'post_status' => 'publish', 
    'post_type' => 'custom_posts',
    'meta_input' => array(
        'custom_field_one' => $custom_field_one
    )
);
$post_id = wp_insert_post($post);

Disclaimer: I am not sure about the rest of the code but only assisted with what was asked.