Need help designing a page


#1

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();
 ?>``

#2

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


#3

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


#4

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.


#5

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