Hi,
I want to create a custom field in WordPress that will allow me to create a table with an undefined number of rows. The number of columns will always be five. Example:
<table>
<tr>
<th>Unit Name</th>
<th>Number of Beds</th>
<th>Size M²</th>
<th>Price from</th>
<th>Price to</th>
</tr>
<tr>
<td>dynamic content</td>
<td>dynamic content</td>
<td>dynamic content</td>
<td>dynamic content</td>
<td>dynamic content</td>
</tr>
</table>
The requirements are:
1) Must be able to add new rows dynamically in backend by clicking a "+" button.
2) Must be able to save data in rows
3) Must output to the front end in the proper styling.
I have created custom fields similar to this one, but they had fixed amounts of data. I know how to the basics but I don't know what to do to create these dynamic tables. My PHP is limited, I'm quite a newbie, but I understand blocks of code when I see them, just don't write them from scratch very well.
Here is the code I wrote to output one static table row.
<?php
/********************************************************************/
/* UNITS CUSTOM FIELDS */
/*********************************************************************/
add_action( 'admin_init', 'unit_type_admin' );
function unit_type_admin() {
add_meta_box(
'unit_type_meta_box',
'Unit Type',
'display_unit_type_meta_box',
'post',
'normal',
'high'
);
}
function display_unit_type_meta_box( $unit_type ) {
$unit_name = esc_html( get_post_meta( $unit_type->ID, 'unit_name', true) );
$num_beds = esc_html( get_post_meta( $unit_type->ID, 'num_beds', true) );
$size = esc_html( get_post_meta( $unit_type->ID, 'size', true) );
$price_from = esc_html( get_post_meta( $unit_type->ID, 'price_from', true) );
$price_to = esc_html( get_post_meta( $unit_type->ID, 'price_to', true) );
?>
<label for="unit_name_text">Unit Name: </label>
<input type="text" id="unit_name_text" name="unit_name_text" value="<?php echo $unit_name; ?>" /><br />
<label for="num_beds_text">Number of Beds: </label>
<input type="text" id="num_beds_text" name="num_beds_text" value="<?php echo $num_beds; ?>" /><br />
<label for="size_text">Size M²: </label>
<input type="text" id="size_text" name="size_text" value="<?php echo $size; ?>" /><br />
<label for="price_from_text">Price From (THB): </label>
<input type="text" id="price_from_text" name="price_from_text" value="<?php echo $price_from; ?>" /><br />
<label for="price_to_text">Price To (THB): </label>
<input type="text" id="price_to_text" name="price_to_text" value="<?php echo $price_to; ?>" /><br />
<hr />
<?php
}
add_action( 'save_post', 'unit_type_fields', 10, 2 );
function unit_type_fields( $unit_type_id, $unit_type) {
if ( $unit_type->post_type == 'post') {
if ( isset( $_POST['unit_name_text'] ) && $_POST['unit_name_text'] != '' ) {
update_post_meta( $unit_type_id, 'unit_name', $_POST['unit_name_text'] );
}
if ( isset( $_POST['num_beds_text'] ) && $_POST['num_beds_text'] != '' ) {
update_post_meta( $unit_type_id, 'num_beds', $_POST['num_beds_text'] );
}
if ( isset( $_POST['size_text'] ) && $_POST['size_text'] != '' ) {
update_post_meta( $unit_type_id, 'size', $_POST['size_text'] );
}
if ( isset( $_POST['price_from_text'] ) && $_POST['price_from_text'] != '' ) {
update_post_meta( $unit_type_id, 'price_from', $_POST['price_from_text'] );
}
if ( isset( $_POST['price_to_text'] ) && $_POST['price_to_text'] != '' ) {
update_post_meta( $unit_type_id, 'price_to', $_POST['price_to_text'] );
}
}
}
function display_unit_type() {
global $post;
$unit_name = get_post_meta( $post->ID, 'unit_name', true );
$num_beds = get_post_meta( $post->ID, 'num_beds', true );
$size = get_post_meta( $post->ID, 'size', true );
$price_from = get_post_meta( $post->ID, 'price_from', true );
$price_to = get_post_meta( $post->ID, 'price_to', true );
$allowed_html = array(
'a' => array(
'href' => array(),
'title' => array()
),
'em' => array(),
'strong' => array()
);
$_unit_name_output = wp_kses( $unit_name, $allowed_html );
$_num_beds_output = wp_kses( $num_beds, $allowed_html );
$_size_output = wp_kses( $size, $allowed_html );
$_price_from_output = wp_kses( $price_from, $allowed_html );
$_price_to_output = wp_kses( $price_to, $allowed_html );
$output = '<div class="col-md-12">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<tr>
<th>Unit Name</th>
<th>Number of Beds</th>
<th>Size M²</th>
<th>Price from THB</th>
<th>Price up to THB</th>
</tr>
<tr>
<td>'.$_unit_name_output.'</td>
<td>'.$_num_beds_output.'</td>
<td>'.$_size_output.'</td>
<td>'.$_price_from_output.'</td>
<td>'.$_price_to_output.'</td>
</tr>
</table>
</div>
</div>';
if($_unit_name_output != '') {
return $output;
}
}
add_shortcode( 'project-info-box', 'display_unit_type' );
?>
How could I add to or change this to allow dynamic rows. I am looking into arrays and I think that seems to hold some promise, but I don't know how to implement it.
Any help greatly appreciated!