What is a good technique (in 2016) to allow dynamic population of a Wordpress page?

Basically I have to dynamically load a DIV in the webpage depending on selection of a combo box.

BTW, are there any pitfalls to avoid in a Wordpress environment?


  • You have 3 options, to use the built-in wp-ajax.php functionality, to make your own ajax.php and to load wp-load.php file in the beginning of your page, but among the 3 of them, I think using your own ajax source is the best practice.. Anything beyond that is standard in wordpress IMO. – knif3r Jul 8 '16 at 15:11
  • I'd love to answer this but it's a little vague. Are you looking for an example? I've done this a couple of ways. Are you loading local (wp) content or remote content ? The pitfalls I've found relate mostly to content origin. – dg4220 Jul 8 '16 at 15:37
  • Local content. Basically the page will have a combo box that will allow users in the front end to load selected/filtered posts (in a list). I am aware about dozens plugins/widgets that will do this, but my request is for a particularly customized scenario, hence the combobox that will trigger filtered post-list loading – Riccardo Jul 8 '16 at 15:56
  • Who knows maybe @dg4220 may post an Answer on this? – Riccardo Jul 13 '16 at 7:30

Without knowing how you're populating your combo box, here's how I would do it: Use jQuery to capture the form selection:

jQuery('#formElementID').change(function () {//this captures dropdown menu change event
  //call js function and pass form value - in my case a post id

Use function to call ajax function to get post info

function fetchTenantWoContactInfo(unitID) {

            type: 'POST',
            url: 'http://apexpropertymanagement-me.com/wp-admin/admin-ajax.php',
            data: { fgpsnunitID: unitID, action: 'getOccupantsTemplate' },
            dataType: 'html',
            success: function(data){
                jQuery('.current-wo-contact-info').replaceWith('<div class="current-wo-contact-info">' + data + '</div>');



In your functions file add the below php function and return the result. I'm returning mostly post_meta data here but the point is to assemble and echo your content string. Then in the 'success' area of your ajax call replace the designated div area in your template. In my case <div class="current-wo-contact-info"></div>

function getOccupantsTemplate_fn() {

   global $wpdb;
   $occ_ids = get_post_meta( $_POST['fgpsnunitID'], 'fgpsn_property_unit_occupant_id', true );
    //echo substr($occ_ids, 0, (strlen($occ_ids)-1) );
    if ( isset($occ_ids) && !is_null($occ_ids) && !empty($occ_ids) ) {
        if (is_array($occ_ids)) {
          $cur_occupants = '';

            $i = 0;
            foreach($occ_ids as $k=>$v) {
              if ($v != '') {

                $cur_occupants .=  get_post_meta( $occ_ids[$i], 'fgpsn_contact_last_name', true ) . ',
                 ' . get_post_meta( $occ_ids[$i], 'fgpsn_contact_first_name', true ) . '<br>
                <b>Phone: </b>' . get_post_meta( $occ_ids[$i], 'fgpsn_contact_phone', true ) . '<br>
                <b>Email: </b>' . get_post_meta( $occ_ids[$i], 'fgpsn_contact_email', true ) . '<br>
                <b>Cell: </b>' . get_post_meta( $occ_ids[$i], 'fgpsn_contact_cell_phone', true ) . '<br>';

        } else {

                $cur_occupants .=  get_post_meta( $occ_ids, 'fgpsn_contact_last_name', true ) . ',
                 ' . get_post_meta( $occ_ids, 'fgpsn_contact_first_name', true ) . '<br>
                <b>Phone: </b>' . get_post_meta( $occ_ids, 'fgpsn_contact_phone', true ) . '<br>
                <b>Email: </b>' . get_post_meta( $occ_ids, 'fgpsn_contact_email', true ) . '<br>
                <b>Cell: </b>' . get_post_meta( $occ_ids, 'fgpsn_contact_cell_phone', true ) . '<br>';

  $cur_occupants = substr( $cur_occupants, 0, (strlen($cur_occupants)-1) );
  echo $contacts . $cur_occupants;
  //return or print text? html since i dont need to have an array or mehu
  //echo $cur_occupants;

Finally, you need to give ajax access to your php function.:

add_action('wp_ajax_getOccupantsTemplate', 'getOccupantsTemplate_fn');
add_action('wp_ajax_nopriv_getOccupantsTemplate', 'getOccupantsTemplate_fn');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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