Add a Custom Article Submission Form to WordPress with Code

Many WordPress websites offer user submission functionality, which is highly practical not only for article submissions but also for scenarios like link submissions, URL submissions, and other form-based interactions.

For example, this site's directory page includes a URL submission form, which is essentially a submission feature where the content is a URL rather than an article.

Implementing an article submission feature is not particularly complex. Below is a proven custom submission solution using pure code.

Implementation Steps

Step 1: Create the Template File

In your current theme directory, create a new PHP file named submit.php.

Step 2: Add Core Functionality Code

Copy the following code into submit.php. This code defines the template name and handles form submission logic, including data validation and saving the data as a post.

<?php
/* Template Name: URL Submission */
get_header();
$bloginfo = get_bloginfo('url');
if( isset($_POST['tougao_form']) && $_POST['tougao_form'] == 'send') {
    global $wpdb;
    $current_url = $bloginfo.'/site'; // Note: Change this to your actual page URL
    $last_post = $wpdb->get_var("SELECT `post_date` FROM `$wpdb->posts` ORDER BY `post_date` DESC LIMIT 1");

    // Initialize and sanitize form variables
    $title =  isset( $_POST['tougao_title'] ) ? trim(htmlspecialchars($_POST['tougao_title'], ENT_QUOTES)) : '';
    $url = isset( $_POST['tougao_url'] ) ? esc_url_raw($_POST['tougao_url']) : '';
    $description =  isset( $_POST['tougao_description'] ) ? trim(htmlspecialchars($_POST['tougao_description'], ENT_QUOTES)) : '';
    $icon = isset( $_POST['tougao_icon'] ) ? esc_url_raw($_POST['tougao_icon']) : '';

    // Validation: Site Title
    if ( empty($title) || mb_strlen($title) < 1 ) {
        wp_die('Site title cannot be empty!');
    }
    // Validation: Site URL
    if ( empty($url) || mb_strlen($url) < 1 ) {
        wp_die('Site URL cannot be empty!');
    }
    // Validation: Site Description
    if ( empty($description) || mb_strlen($description) < 5 ) {
        wp_die('Site description cannot be empty and must be at least 5 characters!');
    }
    // Validation: Site Icon
    if ( empty($icon) || mb_strlen($icon) < 1 ) {
        wp_die('Site icon URL cannot be empty!');
    }

    // Compose post content
    $post_content = 'Site Title: '.$title.'<br />Site URL: '.$url.'<br />Site Description: '.$description.'<br />Site Icon:'.$icon;
    $tougao = array(
        'post_title' => $title,
        'post_content' => $post_content,
        'post_status' => 'pending', // Set to 'pending' for review
        // 'post_type' => 'site' // Uncomment for custom post type
    );

    // Insert post into database
    $status = wp_insert_post( $tougao );

    if ($status != 0) {
        wp_die('Submission successful! Please wait for review.');
    } else {
        wp_die('Submission failed. Please try again.');
    }
}
?>

Step 3: Add Front-End Form

After the core code, add this HTML form to display the submission interface.

<form method='post' action='<?php echo esc_url($_SERVER['REQUEST_URI']); ?>'>
    <input type='text' id='tougao_title' name='tougao_title' placeholder='Site Title' required />
    <input type='url' id='tougao_url' name='tougao_url' placeholder='Site URL (include http:// or https://)' required />
    <input type='text' id='tougao_category' name='tougao_category' placeholder='Site Category' />
    <textarea id='tougao_description' name='tougao_description' placeholder='Site Description (min. 5 characters)' rows='4' required></textarea>
    <input type='url' id='tougao_icon' name='tougao_icon' placeholder='Site Icon URL' required />
    <div class='t'>
        <input type='hidden' value='send' name='tougao_form' />
        <button class='button' type='submit'>Submit</button>
        <button class='button' type='reset'>Clear</button>
    </div>
</form>

Notes & Improvements:

• Corrected duplicate field names and added a category field.
• Changed description from <input> to <textarea>.
• Added required attribute for basic front-end validation.
• Used esc_url() for the form action to enhance security.

Step 4: Add Page Content Container

After the form, add this code to output any existing page content.

<div>
<?php while(have_posts()) : the_post(); ?>
    <?php the_content(); ?>
<?php endwhile; ?>
</div>

Step 5: Include Footer

At the end of the file, include the theme footer.

<?php get_footer(); ?>

Step 6: Create the Submission Page

In the WordPress admin, create a new page. Under 'Page Attributes', select the 'URL Submission' template from the dropdown, then publish the page.

Extensions & Security Recommendations

• Custom Post Types: To save submissions to a custom post type (e.g., 'site'), uncomment the 'post_type' => 'site' line and replace 'site' with your CPT name.
• Status Management: New posts are set to pending for admin review, which is safer than immediate publication.
• Security Enhancements: For production, add Nonce verification (wp_nonce_field) to prevent CSRF attacks and implement submission rate limiting.
• Email Notifications: Integrate wp_mail() to notify administrators of new submissions.

Conclusion

Following these steps creates a basic WordPress submission feature. You can adapt the form fields and post-saving logic to your needs. This solution offers clear, flexible code and serves as a practical exercise in handling forms and data within WordPress theme development.