So I have a Wordpress site I built that has custom post types and references to those post types inside others.


  • Custom Post Type 1
  • Custom Post Type 2 - References Type 1 on two fields
  • Custom Post Type 3 - References Type 2 on multiple fields

I have the front end all displaying and working fine. The problem is I need an easier way for my client to be able to edit the references. I built links for creating new posts or editing the selected ones in new tabs, but my client wants it all displayed on one screen to help him manage the numerous fields on the post type. My thought is to build an ajax page to return the form in a lightbox when the link is clicked. Then once submitted from the lightbox, get the id for new posts, and change the currently selected item to the new one (if creating a new post to reference).

I normally build in Drupal and this would be a no brainer of drupal_get_form() and then do what I want with it, but I cannot find any documentation on how to do this in Wordpress. (Yes I know this is not Wordpress' forte, but I need it done in Wordpress.) I looked into just rebuilding the post-new.php file but I get an update database screen that says there is no updates to my database and that is a very hackie way of doing things, so I would prefer not to have to do it if possible.

I found this post was close to what I need: AJAX post into pop-up div

The problem with it, is that it is not creating a new post when the ajax form is submitted. I am guessing it is because I need to run the submission through Wordpress' ajax call, but even that seems to be failing and returning a 0 response.

JavaScript: The #new-post form is the one loaded in the lightbox:

$('#new-post').submit(function (e) {
    var data = $(this).serializeArray();
    data['action'] = 'post_form_ajax'
    jQuery.post(ajaxurl, data, function(response) {
        alert('Got this from the server: ' + response);

Wordpress Plugin:

add_action( 'wp_ajax_post_form_ajax', 'MYPLUGIN_post_form_ajax' );

function MYPLUGIN_post_form_ajax () {
    echo 'work';

Any help is greatly appreciated thanks.


Got the form to submit AJAX. I needed the data in a different form (as an object) and I was missing a semicolon after the data['action'] line.

To reformat the data I used this function (@see https://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery)

$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
    return o;

Then the adjusted submit function:

$('#new-post').submit(function (e) {
    var data = $(this).serializeObject();
    data['action'] = 'post_form_ajax';
    jQuery.post(ajaxurl, data, function(response) {
        alert('Got this from the server: ' + response);

The final step is to figure out how to save or update the custom post data dynamically from my ajax function MYPLUGIN_post_form_ajax(). Thanks again.

  • If you solved your own question you should create an answer and accept it!
    – Larzan
    Commented Apr 17, 2017 at 10:54
  • Thanks, I did, but it wasn't pretty. I will have to post it at a later time as I am too busy to dig back through that code currently. If you need the answer let me know, and I can send you the plugin.
    – Coyote6
    Commented Apr 18, 2017 at 13:43

1 Answer 1


Have you considered using the ACF plugin?

With that great plugin (no connection, i just can't imagine WP without it) you have the function acf_form to render any content form on the frontend, all with ajax updates and saving (works also in a popup via IFrame)

Even though the sidebar elements such as tags and categories are missing, you could easily replace them with custom ACF fields.

The following example is taken from their page and worked perfectly for me:

<?php acf_form_head(); ?>
<?php get_header(); ?>

    <div id="primary">
        <div id="content" role="main">

            <?php /* The loop */ ?>
            <?php while ( have_posts() ) : the_post(); ?>

                <h1><?php the_title(); ?></h1>

                <?php the_content(); ?>

                <?php acf_form(); ?>

            <?php endwhile; ?>

        </div><!-- #content -->
    </div><!-- #primary -->

<?php get_footer(); ?>

Make sure to read the documentation to see how to activate editing of the standard title and text fields and not only your custom fields, this example will just let you edit the ACF fields

  • I was using that plugin, but because of the nature of the project I was using it in conjunction with Toolset views and their fields (which works very similar to ACF). Because of that I could not use actual php code as you have shown above because they only allowed the use of shortcode as the content that was rendered out was actually a view that was sorted by date and my client wanted everything on the backend inside the admin pages.
    – Coyote6
    Commented Apr 18, 2017 at 18:47
  • I assume you tried to create your own shortcode and put the php code in there? But i guess it would not render correctly then, correct?
    – Larzan
    Commented Apr 19, 2017 at 12:37
  • Correct. I used my own shortcodes, but things got messy trying to combine those two plugins in the manner I was using them. I seriously doubt I did it the best way possible due to me working in Drupal far more than Wordpress. I am not a fan of the way Wordpress runs its database and only use it when clients insist.
    – Coyote6
    Commented Apr 20, 2017 at 14:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.