Enhancing Your WordPress Site: Frontend Post Submission with Bricks Builder

Do you want to allow users to submit posts directly from the frontend of your WordPress site? With the Bricks Builder theme, this is not only possible but also straightforward. In this tutorial, we’ll show you how to create a form that lets users submit posts from the frontend, complete with a custom action to handle the form submission and publish the posts.

Prerequisites

Before diving in, ensure you have the Bricks Builder theme installed and activated on your WordPress site. This theme provides the tools and flexibility needed to create and manage your forms and custom actions effectively.

Step-by-Step Guide

  1. Create Your Form Start by creating a form in Bricks Builder. Ensure your form has fields for the post title, category, and content. Here are the form field IDs we will use:
    • Title (field ID: form-field-152603)
    • Category (field ID: form-field-495c45)
    • Content (field ID: form-field-45d299)

    Remember, you should change these field IDs to match your form’s configuration.

  2. Add Custom Action to Handle Form Submission Add the following code to your theme’s functions.php file. This code will handle the form submission, create a new post, and publish it:
function my_form_custom_action( $form ) {
    $fields = $form->get_fields();
    $settings = $form->get_settings();
    $post_data = array();
    $custom_meta = array();
    $required_fields = array(
        'form-field-152603' => 'post_title',
        'form-field-45d299' => 'post_content',
        'form-field-495c45' => 'post_category'
    );

    // Validation and Sanitization
    foreach ($required_fields as $field_id => $field_name) {
        if (isset($fields[$field_id])) {
            switch ($field_name) {
                case 'post_title':
                case 'post_category':
                    $post_data[$field_name] = sanitize_text_field($fields[$field_id]);
                    break;
                case 'post_content':
                    $post_data[$field_name] = sanitize_textarea_field($fields[$field_id]);
                    break;
                default:
                    $custom_meta[$field_name] = sanitize_text_field($fields[$field_id]);
            }
        } else {
            // Handle missing required fields
            $form->set_result([
                'action' => 'my_custom_action',
                'type'   => 'danger',
                'message' => esc_html__("Missing required field: $field_name", 'bricks'),
            ]);
            return;
        }
    }

    // Handle category
    $category_name = $post_data['post_category'];
    $category_id = get_cat_ID($category_name);
    if ($category_id == 0) {
        $category_id = wp_create_category($category_name);
    }
    $post_data['post_category'] = array($category_id);

    // Default post status
    $post_data['post_status'] = 'publish';

    // Insert the post into the database
    $post_id = wp_insert_post($post_data);

    if (is_wp_error($post_id)) {
        $form->set_result([
            'action' => 'my_custom_action',
            'type'   => 'danger',
            'message' => esc_html__('Oh my custom action failed', 'bricks'),
        ]);
    } else {
        // Add custom post meta
        foreach ($custom_meta as $meta_key => $meta_value) {
            update_post_meta($post_id, $meta_key, $meta_value);
        }

        $form->set_result([
            'action' => 'my_custom_action',
            'type'   => 'success',
            'message' => esc_html__('Post created successfully!', 'bricks'),
        ]);
    }
}
add_action('bricks/form/custom_action', 'my_form_custom_action', 10, 1);

Explanation

  • Form Field IDs: Update the form field IDs (form-field-152603, form-field-495c45, form-field-45d299) to match your form’s configuration.
  • Category Handling: The code retrieves the category ID by name and creates a new category if it doesn’t exist.
  • Post Creation: The wp_insert_post function inserts a new post with the provided title, content, and category, publishing it immediately.
  • Error Handling: The code checks for errors and sets the appropriate result message, providing specific feedback on missing required fields or other issues.
  • Custom Post Meta: Additional fields can be stored as custom post meta, allowing for easy extension of the form with more fields.

Adding More Fields

To add more fields, simply update the $required_fields array with the new form field IDs and their corresponding post field names or custom meta keys. For example:

$required_fields = array(
    'form-field-152603' => 'post_title',
    'form-field-45d299' => 'post_content',
    'form-field-495c45' => 'post_category',
    'form-field-123456' => 'custom_meta_key_1',
    'form-field-789012' => 'custom_meta_key_2'
);

By following this approach, you can easily scale the form and handle additional fields efficiently.

Conclusion

By following this tutorial, you can empower your users to submit posts directly from the frontend of your WordPress site using the Bricks Builder theme. This functionality is particularly useful for guest blogging, user-generated content, or community-driven websites. Ensure to change the form field IDs to match your setup, and enjoy the enhanced interactivity and user engagement on your site! Happy building!

Leave the first comment