Need help designing a page

Hello,

I have a WP site that I hired someone to build for me. I want to add a Production Co. column between the director and availability columns to this page: http://filmsbytheyear.com/chronological-list-of-films/
I created two new fields with the Advanced Custom Fields plugin. The field names are productionco and productionco_link. For some reason there was no box to enter the field labels but I know which ones they are when I’m adding a new entry. So my question is how to make a new column appear on the page referred to above. Here is the code for that page:

<?php
/*
Template Name: Films Index
*/



$postids = array();
$Debug=false;
//$Debug=true;


if ($Debug){
echo "<table>";

    foreach ($_POST as $key => $value) {
        echo "<tr>";
        echo "<td>";
        echo $key;
        echo "</td>";
        echo "<td>";
        echo $value;
        echo "</td>";
        echo "</tr>";
    }

echo "</table>";
}


 if(isset($_GET['movie_index'])){
	 	$alphabet = $_GET['movie_index'];	 	
			$result = $wpdb->get_results( $wpdb->prepare( " SELECT wp_posts.ID, wp_posts.post_title 
							  FROM wp_posts 
							  WHERE 
							  wp_posts.post_type = 'films' AND 
							  wp_posts.post_status = 'publish' 
							  AND wp_posts.post_title LIKE %s 
							  ORDER BY wp_posts.post_title ASC limit  10 ",
							  $wpdb->esc_like($alphabet).'%'),ARRAY_A);
			foreach($result as $ids){
				$postids[] = $ids['ID'];
				}
	 
	 }
else{

		 //default Query

$lmt=500;

 if(isset($_POST['lmtStart'])){


$lmtStart = $_POST['lmtStart']; 

$lmtStart = $lmtStart*1;
$lmtEnd = $lmtStart  + $lmt; 


    if ($lmtStart==-99)
    { $lmtStart = 0;
      $lmtEnd = -99; 
    }
    else if ($lmtStart<=0)
    { $lmtStart = 0;
      $lmtEnd = $lmt; 
    }


}
else

{
$lmtStart = 0;
$lmtEnd = $lmt; 
 
//$msg = "Recently Added Movies";

}

//echo "lmtStart:".$lmtStart ." lmtEnd:".$lmtEnd. "  lmt : ".$lmt." !<br>"; 

				   
$sqlWhere = " where a.post_type='films' AND a.post_status='publish' ";

if($_POST['search-text-now'] == '1'){

	 $meta_key = $_POST['searchparam'];
	 $meta_value = $_POST['search_text'];
	 //$sortingOrder = $_POST['sortingorder'][0];
	 $sortingOrder = 'ASC';

if ($meta_value!='')
  if ($meta_key =='post_title' ) {
echo "<br>reached herer<br>";
	 $sqlWhere = $sqlWhere." and  a.post_title  like '%{$meta_value}%'  	";
  }else{
	 $sqlWhere = " INNER JOIN wp_postmeta as b ON a.ID = b.post_id ". $sqlWhere." and b.meta_key = '{$meta_key}' AND b.meta_value like '%{$meta_value}%'  ";
  }

}

                        $sql = "select count(a.ID) Total from wp_posts a ".$sqlWhere;

                        $lmtAll = $wpdb->get_var($sql );

 if(isset($_POST['lmtAll'])){
         if ($_POST['lmtAll']!=$lmtAll)
{
$lmtStart = 0;
$lmtEnd = $lmt; 

}

}

			$sql = "Select a.ID post_id,
((select meta_value from wp_postmeta b where a.ID = b.post_id and b.meta_key = 'premiere')) premiere,
a.post_title title,
((select meta_value from wp_postmeta b where a.ID = b.post_id and b.meta_key = 'title_link')) title_link,
((select meta_value from wp_postmeta b where a.ID = b.post_id and b.meta_key = 'director')) director,
((select meta_value from wp_postmeta b where a.ID = b.post_id and b.meta_key = 'director_name')) director_name,
((select meta_value from wp_postmeta b where a.ID = b.post_id and b.meta_key = 'director_link')) director_link,
((select meta_value from wp_postmeta b where a.ID = b.post_id and b.meta_key = 'availability')) availability,
((select meta_value from wp_postmeta b where a.ID = b.post_id and b.meta_key = 'availability_link')) availability_link,
0 as CD		  from wp_posts a ".$sqlWhere." ORDER BY 2,a.post_title ASC ".(($lmtEnd==-99)?"":("    limit ".$lmtStart." , ".$lmt))  ;


if ($Debug){
echo $sql;
}		   
			$result = $wpdb->get_results($sql, ARRAY_A);



 if ($lmtAll>$lmt){
    $lmtStart = ($lmtStart<$lmt)?0:($lmtStart);
    $lmtEnd   = $lmtAll <($lmtEnd+ $lmt)  ?$lmtAll :($lmtEnd);
 }


}



if ($Debug){
echo "<br>lmtStart:".$lmtStart ." lmtEnd:".$lmtEnd. "  lmt : ".$lmt." !!!<br>"; 


//echo '<pre>';print_r($result);echo '</pre>';
}
			foreach($result as $ids){
				$postids[] = $ids['ID'];
				}	 



?>

<? /* header goes here */ ?>

<!DOCTYPE html> 
<!--[if lt IE 7 ]>				<html class="no-js ie ie6" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7 ]>					<html class="no-js ie ie7" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8 ]>					<html class="no-js ie ie8" <?php language_attributes(); ?>> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->	<html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->

<head <?php do_action( 'add_head_attributes' ); ?>>
	<meta charset="<?php bloginfo('charset'); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title><?php wp_title(''); ?></title>

	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">

	<script>document.documentElement.className = document.documentElement.className.replace("no-js","js");</script>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic|Fjalla+One' rel='stylesheet' type='text/css'>
	
	<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<script src="<?php echo get_template_directory_uri(); ?>/js/ie/selectivizr.js"></script>
	<![endif]-->
	
	<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
	
<?php echo wpb_page_background_image(); ?>

<div class="body-wrapper">
	
	<header id="header">

		<?php if ( wpb_option('header-widget-ads') ): ?>
			<div class="ads-header group">
				<div class="container">
					<div class="grid one-full">
						<ul><?php dynamic_sidebar('widget-ads-header'); ?></ul>
					</div>
				</div>
			</div><!--/.ads-header-->
		<?php endif; ?>
		
		<?php if ( has_nav_menu( 'header' ) ): ?>
			<nav class="nav-container group" id="nav-header">
				<div class="nav-toggle" id="nav-header-toggle"><i class="icon-reorder"></i></div>
				<div class="nav-wrap">
					<?php wp_nav_menu( array('theme_location'=>'header','menu_class'=>'nav container group','container'=>'','menu_id'=>'','fallback_cb'=>FALSE) ); ?>
				</div>
			</nav><!--/#nav-header-->
		<?php endif; ?>


		<div class="container">
			<div class="pad group">		
				<?php echo wpb_site_name(); ?>
				<?php echo wpb_site_desc(); ?>		
				<div style="float: right;width: 210px;margin-top: 20px;margin-left: 20px;" class="group"><?php dynamic_sidebar('air-film-index'); ?></div>
				<?php /*if ( !wpb_option('disable-header-search') ): ?>
					<div id="header-search" class="group"><?php get_search_form(); ?></div>
				<?php endif; */?>
				
				<?php if ( !wpb_option('disable-header-social') ): ?>	
					<?php echo wpb_social_media_links(array('id'=>'header-social','class'=>'social-module')); ?>
				<?php endif; ?>			
			</div>
			
			<?php if ( is_home() || is_single() || is_archive() ) get_template_part('partials/newsflash'); ?>
			
			<?php if ( has_nav_menu( 'subheader' ) ): ?>
				<nav class="nav-container group" id="nav-subheader">
					<div class="nav-toggle" id="nav-subheader-toggle"><i class="icon-reorder"></i></div>
					<div class="nav-wrap">
						<?php wp_nav_menu( array('theme_location'=>'subheader','menu_class'=>'nav container group','container'=>'','menu_id'=>'','fallback_cb'=>FALSE) ); ?>
					</div>
				</nav><!--/#nav-subheader-->
			<?php endif; ?>
				
		</div><!--/.container-->
		
	</header><!--/#header-->

	<div id="page">
		<div class="container">
			<div class="container-inner">
            
<? /* header ends here  */ ?>

<style type="text/css">
	.site::before{
		display:none;
		}
	.ui-dialog{
		width:400px !important;
		}
#example_filter	{margin-top:-45px; width:80%;}
#example_length {margin-top:-45px;}

h3 {
font-size:6px;
text-align:center;
}
</style>


	<?php while ( have_posts() ): the_post(); ?>

	<div class="main group">

		<div class="content">
			<div class="pad">
				<article id="entry-<?php the_ID(); ?>" <?php post_class('entry group'); ?>>

					<?php //get_template_part('partials/page-image'); ?>
					<?php //get_template_part('partials/page-title'); ?>

					<div class="text">
						<h2 style="width:100%; text-align:center; margin-left:auto; margin-right:auto;">Chronological List of Films</h2><h3><?=$msg;?></h3><br>

					<?php /*?><a href="#" id="searchfilter">Select Search Filter</a><?php */?>
				<div id="dialog" title="Sorting Options" style="display:none;">
					<form action="<?php echo get_permalink(get_the_ID())?>" method="post" style="padding:25px;text-align:center;">                            	
					<div style="width:50%;display:inline-block;float:left;">

						<input type="radio" name="sortparam[]" id="" value="premiere" checked="checked" /> Premiere <br />
					   <?php /*?> <input type="radio" name="sortparam[]" id=""  value="post_title" /> Title <br /><?php */?>
					    <input type="radio" name="sortparam[]" id=""  value="director" /> Director <br />
					    <input type="radio" name="sortparam[]" id="" value="availability" /> Availability <br />
					</div>
					<div style="width:50%;display:inline-block;float:left;">
						<input type="radio" name="sortingorder[]" value="ASC" id="" checked="checked" /> ASC <br />
					    <input type="radio" name="sortingorder[]" value="DESC" id="" /> DESC <br />
					</div>
					<div style="width:100%;clear:both;padding-top:15px;">
							<input type="hidden" name="searchnow" value="1" />	
							<input type="submit" value="Sort Now" />
					</div>
					</form>
				</div><br>

				<div id="search-dialog" title="Search Options" class="controls" style="display:block;">
					<form action="<?php echo get_permalink(get_the_ID())?>" method="post" style="padding:25px;text-align:center;">
	<label class="radio"> <input type="radio" name="searchparam" id="" value="premiere"   <?php echo ($meta_key=='premiere'?'checked="checked"':''); ?>   > Premiere</label>
	<label class="radio"> <input type="radio" name="searchparam" id="" value="post_title" <?php echo ($meta_key=='post_title'?'checked="checked"':''); ?>> Title</label>
	<label class="radio"> <input type="radio" name="searchparam" id="" value="director" <?php echo ($meta_key=='director'?'checked="checked"':''); ?> > Director</label>
	<label class="radio"> <input type="radio" name="searchparam" id="" value="availability" <?php echo ($meta_key=='availability'?'checked="checked"':''); ?> > Availability</label>
	<label class="radio" for=""><input type="text" name="search_text" id="search_text" value="<?=$meta_value?>" /> </label>
	<label class="radio" for=""><input type="submit" value="Search Now" /></label>
							<input type="hidden" name="search-text-now" value="1" />

	<!-- JRLimits   -->
<br><div style="padding-top:5px">
	<label class="radio" for="" ><input type='submit' class='lmt' name='lmtPrev' value='Previous <?=$lmt;?>' 
onclick='lmtStart.value=(<?=($lmtStart-$lmt);?>);' style='display:<?=(($lmtStart==0)?"none":"block");?>' /></label> &nbsp;&nbsp;&nbsp;


	<label class="radio" for=""><input type='submit' class='lmt' name='lmtNext' style='display:<?=($lmtAll<=($lmtStart+$lmt)?"none":"block");?>' 
            value='Next <?=$lmt;?>' onclick='lmtStart.value=(<?=($lmtStart+$lmt);?>);'/></label>

<label class="radio" for="">	
<input type='submit' class='lmt' name='Reset'  value='Reset ' onclick='lmtStart.value=0; search_text.value=""  ;' /></label>

	<label class="radio" for=""><input type='submit' class='lmt' name='lmtTotal'  value='Show All <?=$lmtAll;?> Records' onclick='lmtStart.value=-99;'/></label>
   </div>

	<input type='hidden' name='lmtStart' value='<?=$lmtStart;?>' />
	<input type='hidden' name='lmtAll' value='<?=$lmtAll;?>' />
	<!-- JRLimits   -->

					</form>

			 <style>
	.controls {
	border:1px solid;
	}
			 .controls label {
				     display: inline-block;
				     width: 100px;
				     height: 10px;
				     text-align: center;
				 }
				 .controls input {
				}
	</style>
				</div><br/><br/>
			    <style type="text/css">
				ul.movie_index{
								display:table;
								margin:0 auto;							
								margin-bottom:15px;
								}
							ul.movie_index li{
								display:inline-block;
								float:left;
								margin-right:5px;
								}
							ul.movie_index li a{
								display:block;
								padding:5px 8px;
								background-color:#41A62A;
								color:#fff;
								text-decoration:none;
								}
							ul.movie_index li a.selected{
								background-color:#fff;
								color:#000;
								border:solid 1px #000;
								}			
			    </style>
			    <?php /*?><p style="text-align:center;">Filter Movies:</p><?php */?>
			    <?php $glosary = array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");?>
			    <?php 
								/*echo '<ul class="movie_index">';
								foreach($glosary as $word):
									$selectedindex = '';
									$selectedindex = $_GET['movie_index'];
									if($selectedindex == strtolower($word)){
										$selected = 'class="selected"';
										}else{
											$selected = '';
											}

									echo '<li><a '.$selected.' href="'.add_query_arg(array('movie_index'=> strtolower($word)), get_permalink(get_the_ID())).'">'.$word.'</a></li>';
								endforeach;
								echo '</ul>';*/
						?>    
						<?php
								/*echo '<pre>';
										print_r($args);
									echo '</pre>';

								$film= new WP_Query( $args );
								echo '<pre>';
										print_r($film);
									echo '</pre>';*/

								echo '<table data-page-length="100" id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
									<thead>
									    <tr>
										<th>Premiere</th>
												<th style="width:30%">Title</th>
										<th style="width:30%">Director</th>							                
										<th style="width:30%">Availability</th>
										<!--<th>Last Viewing</th>-->

									    </tr>
									</thead>

									<tfoot>
									    <tr>
										<th>Premiere</th>
												<th>Title</th>			                
										<th>Director</th>							                
										<th>Availability</th>
												<!--<th>Last Viewing</th>-->

									    </tr>
									</tfoot>

									<tbody>';

				 if ($result ){
				foreach($result as $row ){
									echo '<tr><td>'.$row['premiere'].'</td>';
									echo '<td><a target="_blank" href="'.$row['title_link'].'">' .$row['title']. '</a></td>';
									echo '<td><a target="_blank" href="'.$row['director_link'].'">'.($row['director_name']==''|| $row['director_name']=='Unknown'?$row['director']:$row['director_name']).'</a></td>';
									echo '<td><a target="_blank" href="'.$row['availability_link'].'">'.$row['availability'].'</a></td></tr>';
								}
								}
								echo '</tbody>
								    </table>';
					 ?>


						<div class="clear"></div>
					</div>			
				</article>

				<?php comments_template(); ?>

			</div><!--/pad-->
		</div><!--/content-->

	</div><!--/main-->

	<?php endwhile;?>
<script type="text/javascript">
	$(document).ready(function() {
		
		
		
		
/*
		$('#example tfoot th').each( function () {
        		var title = $('#example thead th').eq( $(this).index() ).text();
        			$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    			} );		
*/
		
	    var table = $('#example').DataTable({			
        	"lengthMenu": [[100,500, 1000, 2000, 3000], [100,500, 1000, 2000, 3000]],
			"aaSorting": [],

"oLanguage": {
"sSearch": "Filter "
}

			
    	});
		
		
		table.columns().every( function () {
	        var that = this;
	 
	        $( 'input', this.footer() ).on( 'keyup change', function () {
	            if ( that.search() !== this.value ) {
	                that
	                    .search( this.value )
	                    .draw();
	            }
	        } );
	    } );
		
			$("#searchclear").on('click',function(e) {
				table.search("").draw();
				
				table.columns().every( function () {
					var that = this;
			 		that
					  .search( '' )
					  .draw();
					
				} );
					
			});
		
		
		
		function ClearSearch(){
			$this.val(""); 
//var x = document.getElementById("search_text");
 x.value ="";
		}
		
	} );

</script>

<?php  get_footer();
 ?>``

Hey nerves,

This seems like a detailed task. You would be better suited to hiring a freelancer on upwork.com or freelancer.com to help you with this.

Thanks,

John

Thanks John. Can you recommend anyone? My experiences with upwork haven’t been too good.

Do you already have the data entered into the database?
If so, just add the table header

Production Co. and adjust the width’s as they are set at 1/3 or 30%…
Then, add in the data display data just like the $row[“director_name”] is done with the director-link.

But, if you are using WP, you can add fields in the control-panel for the site. Really depends on how the other programmer handled inputs and displays. You can hire one of the helpers here in our hire-a-programmer section.

Thanks Ernie. So far I’ve added the new data to one entry. I’ll try your suggestion.

Sponsor our Newsletter | Privacy Policy | Terms of Service