Wordpress Multisite, Injecting Dynamic Content into New Site Registration Form in 'site-new.php'

Question

I have found a solution here by dennisg and edited by Hans Helge . The part I am working with is the injection of extra form fields using an IIFE and jQuery in an external file.

(function($) {
    $(document).ready(function() {
        $('<tr class="form-field form-required"></tr>').append(
            $('<th scope="row">New field</th>')
        ).append(
            $('<td></td>').append(
                $('<input class="regular-text" type="text" title="New Field" name="blog[new_field]">')
            ).append(
                $('<p>Explanation about your new field</p>')
            )
        ).insertAfter('#wpbody-content table tr:eq(2)');
    });
})(jQuery);

Thus far, I have successfully squeezed PHP into the above js. The following seems to work ok, when I suffix the file name with .php instead of .js

<?php
$user_def_cats = array('Subject', 'Person', 'Client');
?>
(function($) {
    $(document).ready(function() {
        $('<tr class="form-field form-required"></tr>').append(
            $('<th scope="row">Site Category</th>')
        ).append(
            $('<td></td>').append(
                $('<select name="blog[blog_cats]" ><?php
foreach ($user_def_cats as $key => $val) {
    echo "<option value=\"" . ($key + 1) . "\" >" . $val . "</option>";

}
?></select>')
            ).append(
                $('<p>Blog Category (Allows creation of different blog listings.)</p>')
            )
        ).insertAfter('#wpbody-content table tr:eq(2)');
    });
})(jQuery);

So, this works with sample data:

$user_def_cats = array('Subject', 'Person', 'Client');

Next, I try to access the dynamic content ('Subject','Person' ... etc ) using PHP by requiring once the main plugin file, so I can call a method to retrieve the dynamic form data using get_site_option().

require_once WP_PLUGIN_DIR . '/' . plugin_basename(__FILE__);

With the inclusion of this one line above, I get an error:

Uncaught SyntaxError: Unexpected token < http://wpmu.net/wp-content/plugins/list-all-blogs-i3/js/add_site_cat_frm_elem.php?ver=4.4.3 line 1

This might be because the plugin file I am calling is echoing out stuff, which is outside of any legitimate js code. Eg echo "Hi"; causes same error.

Reading around the web I see that perhaps, a better solution would be to save all my dynamic content into a data.json file (as opposed to wp_sitemeta using update_site_option() ), and then AJAX/ get_json to access the data. This would avoid the somewhat awkward cross over of PHP and JS.

Maybe there is a better way to add form fields with dyn content into admin site-new.php page?

Any light on this matter would be gratefully appreciated.

Answer 1

OK. In my plugin file, I now have this script, which uses wp_localize_script(), to pull in the IIFE with server side data injected into it:

wp_register_script('add_site_cat_frm_elem',
plugins_url('js/add_site_cat_frm_elem.js', __FILE__));

// Only way I can see to easily inject dynamic data into js file.
wp_localize_script('add_site_cat_frm_elem', 'user_def_cats', $this->user_def_cats);

wp_enqueue_script('add_site_cat_frm_elem');

In this instance $this->user_def_cat s holds data extracted from wp_sitemeta using get_site_option().

And then finally, my js file looks like this, where the said data is used to build options for a select form element:

(function($) {
    $(document).ready(function() {

       var  myOptions = '';

        user_def_cats.forEach(function(val,i,user_def_cats){
                myOptions += '<option value="'+ i  +'">' + val + '</option>';
        });

        $('<tr class="form-field form-required"></tr>').append(
            $('<th scope="row">Site Category</th>')
        ).append(
            $('<td></td>').append(
                $('<select name="blog[blog_cats]" >' + myOptions + '</select>')
            ).append(
                $('<p>Blog Category (Allows creation of different blog listings.)</p>')
            )
        ).insertAfter('#wpbody-content table tr:eq(2)');
    });
})(jQuery);