Dynamically Create new table items in a CUSTOM field

You can certainly add a random number of rows per posts, but then you need to keep track of which rows go with each post. I think it’s better to store the values of each column in an array and store the arrays in a single row per post. That way a single column in the table is sufficient to tie the row to the post.

So let’s say a condo has 3 units to showcase in a post. The first column in the table would be the post ID. The Area column value for this condo would be array(65, 80, 93,); for the square meters of each unit. The Bedroom column value would be array(0, 1, 2) corresponding to the same units in order.

When the row is retrieved to display a listing, the template code for the first unit might look something like this:
echo "Location: $condo->location[0], $condo->bedrooms[0] bedrooms , $condo->area[0] m^2 for only $condo->price[0] Euros";

Which would look like this in a browser:
Location: Arr. 5, 0 bedrooms, 65 m^2 for only 185.000 Euros

The next unit’s listing would use index 1 in place of the zeros and so on for every unit.

Even though you’ve switched to storing data in post_meta, my suggested array concept still applies. When you get post meta as an array, use a foreach(){} looping structure to output rows of input fields. It’d probably be a good idea to place the inputs in a table structure, so output the <tr> and <td> tags as well. There might be issues if the column data you are using to drive the loop has missing data that is present in other fields of the same row. You may want to select one column where some data is always required, and use javascript to enforce it.

To add additional rows, place a button or link some where in the meta box for the user to click on. You will need some javascript (or jQuery) that runs on the onclick event which appends another row of cells and inputs to the existing table. Use some care in generating the field names, it effects how easy it is to collect each column of values into an array before storing it as a meta value.

I’ve little experience with input grids like this, more investigation could pay off. For example, can a column of inputs have the same name? If so, what does the $_POST data look like? I seem to recall using empty square brackets in the name (as in “field_name[]”) will collect the data into an array for you. That’d be sweet! And if you don’t, you only get the last value. The thing is, I’m not sure this applies to this situation or not, but it’s worth investigating.

Be sure to investigate what happens when empty fields are present. An empty field in one column but not others could cause the remaining data to be out of synch with the other columns if not properly dealt with.

The alternative, using unique names like “name1”, “name2”, etc. will work, but is a little more work to implement. If you do go this route, do not hardcode all the field names! Use a looping structure to generate the names. Seems obvious right? I’ve recently inherited some code where someone had hardcoded all the attributes of each row!! What PITA!

I do have a sample, though it’s not my work. It’s actually part of that awful project where all of the attributes were hardcoded. If you ignore that part (unless you need a laugh 🙂 ), the jQuery part that actually adds rows works fine. It doesn’t have to be jQuery, it could be translated for straight javascript.

The other bad thing this code does is how it loads the jQuery library. Do not do it this way! The best way is to place your jQuery script on an external file and use wp_enqueue_script() in your PHP to cause it to load along with WP’s own jQuery library. All this jQuery code is doing is when a button is clicked, the table is located by ID and the complete row HTML is added to the table element’s value. The button at the end of the row serves to remove that particular row.

I don’t think the owner will mind my sharing. He didn’t write it either, but he did post it in a public forum so it’s presumably free to use, not that anyone would want to use most of it. Here’s the link, the jQuery code starts at line 874:
http://pastebin.com/7epgb5dz

I suggest you first learn to simply load a hello world javascript into a WP page using Codex examples under wp_enqueue_script(). Only once you have a basic script working properly in WP should you attempt something more complex like appending HTML to an element.

The array structure I had in mind was more like this:

$unit_type = array('Park Place','Boardwalk','Pacific Ave',);
$size_msq = array('65','75','90',);
//etc....

Mainly so the column data is kept together which works with your example code better. There’s nothing wrong with doing it by row like you are suggesting though. If you do go by row, you probably should just keep everything for the entire property in one giant two dimensional array. One reason is you don’t know how many rows any one property will use, and you don’t want to hardcode each row variable. By using a two dimensional array you can add as many rows as you need and reference them all with one variable.

The reason my column idea works is you always know how many columns you have, so there is no problem hardcoding them. Any number of elements can be added for each row. It’s easier to keep track of things if they have names instead of index numbers. You can actually have named columns in the one giant array concept as well, so there’s no big advantage either way, go with whatever makes sense to you.

IMO. there’s no better way to learn coding than by having a real project to work on. You do need lots of extra time to fumble about, and there will be times where learning is very frustrating, but once it’s finally done it’s tremendously gratifying. And you will have learned exactly what you needed to learn and little of what you didn’t so it’s fairly efficient on your learning capacity.

You’re most welcome. I suspect that awful code was also created under a tight deadline 🙂 With a deadline looming you need to go with what you know and just make it work. I hope you will be able to find the time in the future to advance far enough to produce some elegant code. Best of luck to you.

Instead of running individual loops for each column, you want a single loop where each iteration only outputs a single element from each column. As I mentioned earlier, you need to pick a column that reliably has data for each row. Columns with missing data can cause the data to be misaligned with the associated unit. I’m guessing the unit name is as good as any, my example will use that to drive the loop.

You must also initialize a counter so that the proper array element can be easily referenced to output any particular row. I’m assuming the data in each column is in an indexed array (as in my previous example), not an associative array like this:

array( 'keyname'=>'Park Place',
        'key2'   =>'Boardwalk',);

The code after the table headers are output should be organized similar to this:

$unit_types=get_post_meta($post->ID,'wpcf-unit-type');
$num_beds=get_post_meta($post->ID,'wpcf-number-of-beds');
$size_sq_mtrs=get_post_meta($post->ID,'wpcf-size-square-meters');
$prices_from=get_post_meta($post->ID,'wpcf-price-from');
$prices_to=get_post_meta($post->ID,'wpcf-price-to');
$i = 0; //initialize counter
foreach ( $unit_types as $unit_type) {
   echo "<tr><\n";
   echo "  <td>$unit_type</td>\n";
   echo "  <td>$num_beds[$i]</td>\n";
   echo "  <td>$size_sq_mtrs[$i]</td>\n";
   echo "  <td>$prices_from[$i]</td>\n";
   echo "  <td>$prices_to[$i]</td>\n";
   echo "</tr>\n";
   $i++;
}
echo '</table>';

This is untested, there may be some stupid typo errors, but the basic structure is valid.

It’s good to hear this is all starting to make sense. While you still need to copy code snippets to get functional code, you will increasingly be able to alter snippets so they do exactly what you need. Soon enough you will be writing your own simple code lines. After a while, you will have seen enough code like the above that illustrate how to do certain tasks that you will be able to write your own versions from memory. You’ve become a full fledged coder!