Front End Post Submit Form

I’m working on a site that is going to be community powered. It’s going to have the form for registered users to submit draft posts, which will then be approved or deleted by the site’s editors. The way I’m trying to implement it is with a custom page template, which includes a form that will allow people to submit draft posts for review.

I was wondering if anyone could point me to some code that does this and that works. I have tried searching, but so far the code I’m finding isn’t working.

I’m using wordpress 3.1

Thanks 🙂

1 Answer
1

I know that this is an old question…
but! there is a nice view count which means that people still need this.
Maybe it would also help you close this question 😉

Here is an ajax version

  • The page itself
  • the JS code
  • The PHP Ajax receiver and publishing code.

Inside your Page Template
– this is an example – customize to your theme structure

<div id="submit-post">
    <?php
        $content=""; 
        $editorSettings     = array(
            'wpautop'           => true,
            'media_buttons'     => false,
            'textarea_name'     => 'articleEditor',
            'editor_class'      => 'articleEditor',
            'theme'             => 'advanced',
            'textarea_rows'     => get_option('default_post_edit_rows', 12),
            'tinymce'           => array(
                'theme_advanced_buttons1' => 'bold,italic,strikethrough,|,bullist,numlist,blockquote,|,justifyleft,justifycenter,justifyright,|,link,unlink,wp_more,|,spellchecker,fullscreen,wp_adv',
                'theme_advanced_buttons2' => 'formatselect,underline,justifyfull,forecolor,backcolor,|,pastetext,pasteword,removeformat,|,media,charmap,|,outdent,indent,|,undo,redo,wp_help',
                'theme_advanced_buttons3' => '',
                'theme_advanced_buttons4' => ''
            ),
            'quicktags'         => array(
            'buttons'           => 'b,i,ul,ol,li,link,close'
            )
        );

        // BUILD CATEGORY SELECT
        $client_select="";
        $categories     = get_categories('hide_empty=0');
        $optionname     = "articlecat";
        $emptyvalue     = "";

        // SELECT DROP DOWN TERMS
        $client_select  .= '<select name="'.$optionname.'" class="form-control input-normal" id="'.$optionname.'"><option selected="'.$selected.'" value="'.$emptyvalue.'">'.__('Choose a category', THEME_NAME).'</option>';
        foreach($categories as $category){
            if($currentCatId == $category->term_id) {$selected = 'selected="selected"';} else {$selected = '';}
            $client_select  .= '<option name="'.$category->term_id.'" value="'.$category->term_id.'" '.$selected.'>'.$category->name.'</option>';
        }
        $client_select  .= '</select>';

    ?>


    <div class="post-title"><input type="text" id="title" class="" placeholder="<?php _e('Article Title', THEME_NAME); ?>" /></div>
    <div class="post-category"><?php echo $client_select; ?></div>
    <div class="post-body">
        <label for="description"><?php _e('Article Body: ', THEME_NAME); ?></label> <br />
        <?php wp_editor($content, 'articlebody', $editorSettings); ?>
    </div>
    <div class="submit-post"><button type="button" id="submitPost"><?php _e('Submit Post', THEME_NAME); ?></button></div>

</div>

The jQuery Ajax Code
– i would create a submit-article.js file in some folder

jQuery(function($){

    //*********************************************
    //  INSERT NEW ARTICLE
    //*********************************************
    $('.insert_article_btn').click(function () {

        $('.topAjaxLoader').fadeIn();

        var parentbox   =   $('#submit-post');
        var title       =   $(parentbox).find('input#title').val();
        var body        =   $(parentbox).find('#articlebody').val();
        var body_ifr    =   $('#articlebody_ifr').contents().find('body').html();
        var category    =   $(parentbox).find('#articlecat option:selected').val();

        $.post(ajax_object.ajaxurl, {
            action: 'insert_article',
            title: title,
            body: body,
            body_ifr: body_ifr,
            category: category,
        }, function(data) {


            var $response   = $(data);
            var postid      = $response.filter('div#postID').html();
            var success     = $response.filter('div#success').html();
            var error       = $response.filter('div#error').html();

            if(error) {
                // DO SOMETHING WITH ERROR MESSAGE
            }

            if(success) {
                // DO SOMETHING WITH SUCCESS

                $(parentbox).find('input#title').val('');
                $(parentbox).find('#articlebody').val('');
                $("#articlebody_ifr").contents().find("body").html('');
                $(parentbox).find("#articlecat").val([]);   
            }   


        });
    });
});

The PHP Ajax Code

  • i would create a submit-article.php file in some folder
  • Make sure the url in the first line points to JS file

        wp_enqueue_script('ajax-insert-article', get_stylesheet_directory_uri().'/ajax/submit-article.js', array('jquery'), 1.0 );
    wp_localize_script('ajax-insert-article', 'ajax_object', array( 'ajaxurl' => admin_url('admin-ajax.php')));
    
    add_action('wp_ajax_insert_article', 'insert_article');
    function insert_article() {
    
    $title      =   sanitize_text_field( $_POST['title'] );
    $body       =   sanitize_text_field( $_POST['body'] );
    $body_ifr   =   sanitize_text_field( $_POST['body_ifr'] );
    $category   =   intval( $_POST['category'] );
    
    
    // SET WHICH ARTICLE BODY
    if(!$body) {$body = $body_ifr;}
    
    
    // VERIFY ALL FIELDS EXISTS
    if(!$title) {echo '<div id="error">'.__('You forgot the', THEME_NAME).' '.__('Title', THEME_NAME).'</div>';}
    elseif(!$body) {echo '<div id="error">'.__('You forgot the', THEME_NAME).' '.__('article body', THEME_NAME).'</div>';}
    elseif(!$category) {echo '<div id="error">'.__('You forgot the', THEME_NAME).' '.__('article category', THEME_NAME).'</div>';}
    else{
    
        // INSERT POST
        $post = array(
            'post_title'    => $title,
            'post_content'  => stripslashes($body),
            'post_status'   => 'publish',
            'post_type'     => 'post',
            'post_category' => array($category)
        );
        $postid =   wp_insert_post($post, 10, 1);
        do_action('wp_insert_post', 'wp_insert_post', 10, 1); 
    
        echo '<div id="success">Article Published!</div>';
    
    }
    
    wp_die();
    

    }

Leave a Comment