How to save a post and custom fields values with ajax in front end in wordpress?

Question

p.s. had placed this simply to share the solution.

I'd like to save a post in front end if we click a button using ajax in js:

var title = $("#portfolioTitle").val();
var customFieldValues = $("#customfieldValue").val();

$("#btnClick").on("click", function() {
  $.ajax({
    url : ajax_url,
    type: 'post',
    dataType: 'json',
    data: { 
      action: 'data_Publish', portfolioTitle: title, fieldValues: customFieldValues 
    },
    success: function(data) {
      if(data == "exists") {
        console.log("Add a different title");         
      } else {
        console.log("post added");
        console.log(data["link"]);
        console.log(data["title"]);
      }   
    }
  });
});

Answer 1

Placing my own answer but wondering if there is there any speed or security improvements?

For example we could add a caching system, or define our own ajax (Maybe a help could be answering: How to implement the code in the link using the case scenario we have on this question?) in order not to have wordpress loading all the files but here we are doing a http request, anyway, if any of you would want to give their 2 cents to make it faster, It'd be great.

Let's say we want to add posts via ajax in frontEnd in wordpress and we want to check if the title is unique in the database otherwise tell the user to add a different title:

We have a button to click:

<button type="button" id="btnClick">Load</button>

We have an input for the title and a custom field:

<input type="text" id="portfolioTitle" name="portfolioTitle" value="" placeholder="Your title...">

<input type="text" id="customfieldValue" name="customfieldValue" value="" placeholder="Your customFieldvalue...">

The JS. Firstly you need to load wordpress ajax (This is the bit that could be improved if anyone fances to):

var ajax_url = '<?php echo admin_url( 'admin-ajax.php' ); ?>';

Then your javaScript:

var title = $("#portfolioTitle").val();
var customFieldValues = $("#customfieldValue").val();

$("#btnClick").on("click", function() {
  $.ajax({
    url : ajax_url,
    type: 'post',
    dataType: 'json',
    data: { 
      action: 'data_Publish', portfolioTitle: title, fieldValues: customFieldValues 
    },
    success: function(data) {
      if(data == "exists") {
        console.log("Add a different title");         
      } else {
        console.log("post added");
        console.log(data["link"]);
        console.log(data["title"]);
      }   
    }
  });
});

Then in function.php:

function data_Publish() {
  $post_title = $_POST['portfolioTitle'];
  $post_custom_field = $_POST['fieldValues'];
  $post = array(
    'post_title'    => $post_title,
    'post_status'   => 'publish',
    'post_type'   => 'page',
    'page_template'  => 'portoflio.php'
  );
  if ( get_page_by_title( $post_title ) === null ) {
    // the title is unique, we can add the new page
    $post_id = wp_insert_post( $post );
    add_post_meta($post_id, 'customField', $post_custom_field], true);
    $link = get_permalink( get_page_by_title( $post_title ) );
    $title = get_the_title($post_id);
    $newPostAttributes[] = array("link"=>$link, "title"=>$title);
    echo json_encode($newPostAttributes);
  } else {
    // that title already exists, tell the user to change it
    echo json_encode("exists");
  }
  wp_die();
}
add_action('wp_ajax_data_Publish', 'data_Publish');

Basically that function is a normal wordpress query. Therefore you could use the same logic to retrieve post values if You'd want to, for example you won't be using $post_id = wp_insert_post( $post ); but maybe to get the tittle back to the user you'd use $postTile = get_the_title();.

Let's break it down:

In ajax we use action: 'data_Publish', portfolioTitle: title where data_Publish is our php function, and portfolioTitle: title is what we are sending.

In function we can see: $post_title = $_POST['portfolioTitle']; that's our title that we have sent via ajax. With 'page_template' => 'portoflio.php' we can add our own template to that page.

Then we need to use if ( get_page_by_title( $_POST['portfolioTitle'] ) === null ) { to check if that title exists or not, if it doesn't exist, we add the posts to the database with $post_id = wp_insert_post( $post );

Once we added it we use the following to add any other values to our custom field in the newly created postadd_post_meta($post_id, 'customField', $_POST['customfieldValue'], where customField is the name of the custom field we want to create in the new post we just added.

So if the posts doesn't exist, we save it and we can send back to ajax its title and its link so that we could shows it to the user as a response if We'd ever want to.

So we define title and link like this and we create a multidimentional array to send the data back to the front end:

$link = get_permalink( get_page_by_title( $post_title ) );
$title = get_the_title($post_id);
$newPostAttributes[] = array("link"=>$link, "title"=>$title);

If the title exists we send back a response echo json_encode("exists");

We need to die the query for safeness wp_die();

If We'd ever want to make ajax available to no logged user, remember wordpress ajax is only available to admin, so we need to add:

add_action('wp_ajax_data_Publish', 'data_Publish');
add_action( 'wp_ajax_nopriv_data_Publish', 'data_Publish' );

Basically in function.php wordpress uses wp_ajax_ +"name of our function" and wordpress has wp_ajax_nopriv_ to make ajax available if not logged.

I hope It helps anyone and if any of You could improve it, It'll be better for all.