Front End Post Submit Form

1 comment

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();
     

     }

   Log in to Reply