WordPress.org

Ready to get started?Download WordPress

Forums

Dynamic Table CUSTOM FIELD WP back & front end (1 post)

  1. raybeam
    Member
    Posted 3 months ago #

    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!

Reply

You must log in to post.

About this Topic