Фронтальная форма отправки сообщения

Я знаю, что это старый вопрос…
но! есть хорошее количество просмотров, а это значит, что людям это все еще нужно.
Возможно, это также поможет вам закрыть этот вопрос;)

Вот ajax-версия

• Сама страница
• JS-код
• Приемник PHP Ajax и код публикации.

Внутри вашего шаблона страницы
— это пример — настройте структуру вашей темы

<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>

Код jQuery Ajax
— я бы создал файл submit-article.js в какой-то папке

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([]);   
            }   


        });
    });
});

Ajax-код PHP

• я бы создал файл submit-article.php в какой-нибудь папке

• Убедитесь, что URL-адрес в первой строке указывает на файл JS.

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

  }