Now it’s time to the page.php file and single.php. According to WordPress Hierarchy, The posts need a single.php and the pages uses page.php. I created page.php file to show the two pages I want to be a external part of my portfolio. All the other pages is a part of index.php, and the codes pulls specific page using the loop with filter. As for the single.php file, I use it to show the projects (and my writings).

• Page.php and single.php need a title and subtitle. They is easy added using the default loop:
  
  1 2 3 4 5 6 7 8 9 10 11

  <!-- Portolio title -->     <div class="row">       <div class="span12">         <div class="title-page">         <?php while(have_posts()) : the_post();?>           <h2 class="title"><?php the_title(); ?></h2>           <h3 class="title-description"><?php the_subtitle(); ?></h3>         </div>       </div>     </div>     <!-- End title -->

• As to all external pages and posts, I wanted to have a header image as visual support. It’s added using the thumbnail for the page or post. But to some of the posts I have a video, I wanted to place in the site to show my project. To accomplish it, I created a if-else php statement to check if the video exist, and if it exists, then use it. Otherwise it should place the thumbnail image.
  
  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

  <?php         // Pull the custom fields from the post         $pid = get_the_ID();         $vimeo_url = 0;         $post_metas = get_post_meta($pid);           // Creates a loop and checking if we have a         // custom field with the title "vimeo_url"         foreach($post_metas as $title => $post_meta) {             if ( $title == 'vimeo_url') {             $vimeo_url = $post_meta[0];           }           }         // Check if $vimeo_url is true         if($vimeo_url) {           // Then post the video           ?>     <div class="row">       <div class="span8 offset2">         <div class="flex-video widescreen vimeo">         <iframe src="http://player.vimeo.com/video/<?php echo substr($vimeo_url, -8); ?>" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>       </div>       </div>     </div>       <?php      // Otherwise, show the thumbnail picture in the size 'full'   } elseif (has_post_thumbnail()) { ?>         <!-- Image section -->     <div class="row">       <div class="span8 offset2 fameimg">         <?php the_post_thumbnail('full'); ?>       </div>     </div>     <!-- End image -->     <?php } ?>

  
  The vimeo_url should look like this: “https://vimeo.com/77412869” – and I only need the last 8 digit to make a embedded video link as such: “http://player.vimeo.com/video/77412869”. Therefore I use the  substr();  code to only select the last 8 digit and reuse it.
• To the content, I need to evaluate about the post or page has some custom fields, I want to add. It is to provide some extra information as which programming code or which CMS I am using to the specific project. To make it, I must make a $post_metas loop very same as this in the video_url:
  
  1 2 3 4 5 6 7 8 9 10 11 12

  <?php       // Check about has content in custom post \\         $sample = 0;         $pid = get_the_ID();         $post_metas = get_post_meta($pid);         foreach($post_metas as $title => $post_meta) {             // Filter away some WP's own field, subtitle and vimeo url             if ( '_' == $title{0} || $title == 'wps_subtitle' || $title == 'vimeo_url')             continue;             // If have some, then make $sample true             $sample = 1;           }

  
  Then I want to make a if-else statement to either show the content WITH meta information (spilt the content in 2 columns) or the content WITHOUT meta information (one single column).
  
  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

  if($sample) { ?>           <div class="span8">         <?php           // If $sample is true, show the content           the_content(); ?>       </div>       <div class="span4">         <?php         // And the custom fields         $pid = get_the_ID();         $post_metas = get_post_meta($pid);             foreach($post_metas as $title => $post_meta) {             if ( '_' == $title{0} || $title == 'wps_subtitle' || $title == 'vimeo_url')             continue;             echo "<h3>" . $title . "</h3>";             echo "<p>" . $post_meta[0] . "</p>";           }                 ?>       </div>       <?php         }         else { ?>           <div class="span12">         <?php            // Or if $sample is false, only show the content            the_content(); ?>         </div>         <?php           }         ?>