WordPress: Insert Post with Featured Image from Front End Programmatically Using Ajax

/

Adding posts with featured images from the front end programmatically in WordPress can be a valuable functionality, especially for custom applications or user-generated content scenarios. In this tutorial, we will guide you through the process of creating a custom form, handling the submission via Ajax, and programmatically inserting a post with a featured image. Let’s get started.

Table Of Contents
show

Prerequisites

  1. Basic understanding of HTML, PHP, and JavaScript.
  2. WordPress installed and configured on your server.
  3. Access to your theme’s directory and the ability to modify theme files.

Step 1: Create the HTML Form

In your theme directory, create a new file named custom-post-form.php. This file will contain the HTML form.

<form id="custom-post-form">
    <label for="post_title">Post Title:</label>
    <input type="text" id="post_title" name="post_title" required>

    <label for="post_content">Post Content:</label>
    <textarea id="post_content" name="post_content" required></textarea>

    <label for="featured_image">Featured Image:</label>
    <input type="file" id="featured_image" name="featured_image" accept="image/*" required>

    <input type="submit" value="Submit Post">
</form>

This simple form includes fields for post title, post content, and a file input for the featured image.

Step 2: Enqueue Ajax Script

In your theme’s functions.php file, enqueue the JavaScript file that will handle the Ajax submission. Create a new file named custom-post-script.js in your theme directory.

// custom-post-script.js

jQuery(document).ready(function($) {
    $('#custom-post-form').submit(function() {
        var formData = new FormData($(this)[0]);

        $.ajax({
            type: 'POST',
            url: ajaxurl,
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                console.log(response);
                // Add your success message or redirection logic here
            }
        });

        return false;
    });
});

Enqueue this script in your functions.php file.

// functions.php

function enqueue_custom_scripts() {
    wp_enqueue_script('custom-post-script', get_template_directory_uri() . '/custom-post-script.js', array('jquery'), '1.0', true);
    wp_localize_script('custom-post-script', 'ajaxurl', admin_url('admin-ajax.php'));
}

add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

Step 3: Handle Ajax Submission and Post Insertion

Now, handle the Ajax submission and post insertion in your theme’s functions.php file.

// functions.php

function handle_custom_post_submission() {
    $post_title = $_POST['post_title'];
    $post_content = $_POST['post_content'];

    // Create a new post
    $post_id = wp_insert_post(array(
        'post_title'   => $post_title,
        'post_content' => $post_content,
        'post_status'  => 'publish',
        'post_type'    => 'post',
    ));

    // Handle featured image
    if ($_FILES['featured_image']) {
        require_once(ABSPATH . 'wp-admin/includes/image.php');
        require_once(ABSPATH . 'wp-admin/includes/file.php');
        require_once(ABSPATH . 'wp-admin/includes/media.php');

        $attachment_id = media_handle_upload('featured_image', $post_id);

        if (is_wp_error($attachment_id)) {
            // Handle error
            echo json_encode(array('status' => 'error', 'message' => $attachment_id->get_error_message()));
            die();
        } else {
            set_post_thumbnail($post_id, $attachment_id);
        }
    }

    echo json_encode(array('status' => 'success', 'message' => 'Post added successfully!'));
    die();
}

add_action('wp_ajax_handle_custom_post_submission', 'handle_custom_post_submission');
add_action('wp_ajax_nopriv_handle_custom_post_submission', 'handle_custom_post_submission');

This code defines the handle_custom_post_submission function, which inserts a new post and sets the featured image. It’s hooked into both authenticated and non-authenticated Ajax requests.

Step 4: Display the Form

Now, include the form in a page or template where you want users to submit posts.

// Your page template or wherever you want to display the form

get_header();

// Display any additional content

get_template_part('custom-post-form');

get_footer();

Conclusion

You’ve now created a WordPress tutorial on programmatically inserting a post with a featured image from the front end using Ajax. Users can submit posts through the custom form, and the backend will handle post insertion along with the featured image. Customize this example further based on your specific requirements and enhance the user experience on your WordPress site.