How to build a great WordPress page.php file

Being able to build your own WordPress theme is the pinnacle of technical success for any WordPress website developer.  Even if you’re not an expert in writing PHP, simply assembling and customizing those theme PHP files, though intimidating, feels quite rewarding.  It’s always a learning curve, but with the right guidance and blocks of code to work with, you’ll achieve success.  Now, learn how to build a great WordPress page.php file for your own theme.

If you’re ready to take things to the next level and build your own theme, you’re in the right place.  For the complete theme-building guide, How to make a WordPress theme from scratch piece-by-piece provides you with the starting point, the theme template, and the building blocks to build your entire WordPress theme from scratch.  Now, let’s dive into building your WordPress page.php file with surrounding code and theme divs to bring it to life.

Why learn how to build a great WordPress page.php file?

This is an easy question to answer having so many great answers to choose from.  In fact, this applies to both the back end and the front end of your website. To clarify, the back end stores your website and data – the server and database. The final HTML displayed in the browser constitutes the front end – the UI (User Interface).

Although amazing websites are built from scratch without WordPress, there are two things that make WordPress outstanding. First, WordPress boasts the best CMS (Content Management System) in the world. Second, it provides an extensive set of pre-made PHP functions, greatly reducing the amount of coding required.

WordPress page.php file vs Post file layout

WordPress page.php file overview

The first and last function your WordPress page.php file performs is loading your header.php and footer.php files.  By doing that, it renders top content such as your header menu.  Also, it renders your bottom content like your footer contact info.   That allows the info to be rendered consistently on every page.  Between your header and footer lies your primary content rendered by your WordPress page.php file.

Like a post, your page title, excerpt, featured image, and content come from your WordPress database.  That is the job of your WordPress page.php file.  And to make it stand out, display that content in amazing ways – also the job of your WordPress page.php file.  Now, let’s build an amazing WordPress page.php file from scratch.

TECHNICAL RUNDOWN: WordPress page.php REVEALED

Knowing that so many theme files display data from your WordPress Dashboard panel, accessing your WordPress database is inevitable.  Unfortunately, these database accesses take time – they slow down your website, hurting both UX (User Experience) and SEO (Search Engine Optimization).

The solution to limiting the number of database accesses is to only load that data once from your main page file – your WordPress page.php file in this case.  As such, store it in an array variable and pass it to your header and footer files when loading them.  Do this using built-in WordPress functions explained below.

To avoid having to perform a great deal of PHP programming, use built-in WordPress functions provided in an extensive library.  As you’ll learn, these functions perform every task imaginable in WordPress.  Provided in this guide, the surrounding code and theme divs contain WordPress functions that perform the heavy lifting for you.

The first WordPress functions are at the top of your WordPress page.php file.  They retrieve your data from the WordPress database and place it into an array.  Then, use that array throughout your website instead of loading data from your database again and again.  As an example, your page.php file passes that array to your header and footer so they can display it without having to load it from the WordPress database.

Basic theme to use for your custom WordPress dashboard experiments

To download a basic theme containing all of the folders and files needed, click on COMPLETE BASIC THEME zip file.  The WordPress page.php file in that theme already contains the completed WordPress functions shown in the next section.

CSS, HTML, PHP & JAVA symbols for comments

Different symbols are used for comments throughout the code. See the quick symbol reference below:

• // used for PHP comments – everything on the same line after this symbol is a comment
• /* signifies both PHP and CSS comments within /* and */ and can span multiple lines
• <!-- signifies an HTML comment within <!-- and --> and can span multiple lines

Build your WordPress page.php file from the top down

Starting at the top, declare your WordPress page.php as an HTML file using the <!DOCTYPE HTML> tag.  As such, HTML is the default and PHP sessions are opened and closed with <php opening tag and the ?> closing tag throughout the HTML.

Next, an array called $info with information either manually entered or from your WordPress database collects that data.  As mentioned, that data includes your website title, tagline, your site URL, your theme file path, and your phone number and email.

To download a basic theme with all folders and files in your WordPress theme, click on HOW TO BUILD A WORDPRESS THEME.  The WordPress page.php file in that zip file already contains the surrounding PHP code.  Delete its contents before proceeding and walk through the entire process step-by-step.

Paste the following code at the top of your WordPress page.php file:

<!DOCTYPE HTML> <!-- PAGE -->

<?php /* Gather all data from the WordPress Dashboard */
$info = array(
  'name'  => get_bloginfo('name'),
  'desc'  => get_bloginfo('description'),
  'uri'   => get_template_directory_uri(),
  'url'   => site_url(),
  'email' => "your-name@yourwebsite.com",
  'phn'   => "your phone number"
);

get_header('',$info); ?>

<!-- Put page content theme divs here -->

<?php get_footer('',$info); ?>

Walk through each WordPress page.php function:

• get_bloginfo() retrieves site info from the database
• get_template_directory_uri() retrieves your theme template directory URI
• site_url() retrieves the URL for the current site
• get_option() gets an option value based on its name in the database
• get_header() loads header.php and allows data to be passed
• get_footer() loads footer.php also allowing data to be passed

How WordPress page.php fills the array

As you can see within the PHP above, the $info array with key => value pairs resides inside the array() PHP construct. It takes any number of comma-separated key => value pairs as arguments. To explain, each value connects to a key within the array as you see in the structure below:

array(
key  => value,
key2 => value2,
key3 => value3,
...Add as many 'key => value' pairs as you wish
)

The first key => value pair in the $info array is: “name” => get_bloginfo(‘name’). Once defined like this, $info[‘name’] contains the website title. It retrieves the title using the get_bloginfo() WordPress function, which does the work for you. Additionally, ‘desc’ => get_bloginfo(‘description’) loads the tagline. Enter these values in your WordPress Dashboard Settings > General panel.

Next, the $info array pulls in two web address values. First, $info[‘uri’] loads your template URI, which is your WordPress theme directory URI. It does this using the get_template_directory_uri() WordPress function. Then, $info[‘url’] loads your website URL, yourwebsite.com, using the site_url() WordPress function. Use these for links within your HTML and content as needed.

Finally, add two values manually into your WordPress page.php file between the quotes. In the future, create custom fields for your WordPress Dashboard to contain these values and more. Click on admin.php file to see how this is done. But for this article, we’ll keep it simple and manually add those values.

WordPress page.php loads your Header and footer

Your WordPress page.php theme divs, those blocks of code that give life your your file, get pasted between the get_header() and get_footer() WordPress functions.  As you can see in the parentheses of each of these two functions in the code above, the $info array is passed to your header and footer.  As mentioned, this prevents additional WordPress database accesses by those two files.

Add featured image sizes to your functions.php file

Before adding theme divs to your WordPress page.php file, it’s important to configure both a small and normal page featured image size within your functions.php file.  The theme divs that follow use those for two things: rendering the featured image and the background.

To explain the small image version of your featured image used in the background, the CSS stretches, blurrs, and fades it. This prevents pixelization and distraction – it’s not a focal point of the page.  This provides an interesting and unique effect.  Once in place, this blurred background provides a consistent look regarding colors and shapes that works quite well.

This blurred version of your featured image is first taken from a very small version of your featured image – 180 pixels by 120 pixels.  Since it is so small, it will load fast and not affect page-loading performance.

Paste the following code into your functions.php file:

add_image_size('small-entry-image',180,120,true);
add_image_size('large-entry-image',900,600,true);

The WordPress function add_image_size() registers a new image size used by your theme.  The first instance of this sets the small image size to 180 pixels by 120 pixels.  Then, the second instance sets the large image size.  This standard page featured image size is 900 pixels by 600 pixels.

Paste theme divs to render page content

Finally, let’s bring your page file to life!  Now that the surrounding PHP code is in place, let’s paste in the theme div that renders your title, featured image, and content.  Then, we’ll modify it for multiple layout options.  Paste the following theme div in place of or below the <!-- Put page content theme divs here --> comment:

<article class="page-wrap" id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <!-- Set's the page id baed on id# given by WordPress -->
  <?php while(have_posts()){ the_post(); ?> <!-- Check to see if the page exists and open session and ierate the post indes in the WordPress loop -->
    <div class="page-bg-img">
      <?php the_post_thumbnail('small-entry-image');?>
    </div>
    <div class="page-thumbnail-title-wrap">
      <div class="page-thumbnail"><?php the_post_thumbnail('large-entry-image'); ?></div> <!-- Put the featured image on the page -->
      <div class="page-title"><h1><?php single_post_title(); ?></h1></div> <!-- Put the featured image on the page -->
    </div>
    <?php 
    add_filter('the_content','wrap_heading_with_div'); // Wrap all headings in a div for formatting within the content
    function wrap_heading_with_div($content) {
      $heading = '/<h\d.*?>(.*?)<\/h\d>/ims';
      $wrapper = '<div class="h-tag">$0</div>';
      $content = preg_replace($heading,$wrapper,$content);
      return $content;
    }
    the_content();
  } ?>
  <style>
    .page-bg-img {
      position: fixed;
      background:#444;
      top:70px;left:0;
      z-index:-1;
    }
    .page-bg-img img {
      height:1020px;width:100%;
      opacity:.5;
      filter:blur(10px);
      object-fit:cover;
    }
    .page-wrap {width:900px;margin:0 auto;padding-top:140px;}
    .page-thumbnail-title-wrap {
      display:flex;
      align-items:center;
    }
    .page-thumbnail {height:600px;}
    .page-title, .page-wrap .h-tag {
      position:absolute;
      width:620px;
      color:white;
      background:rgba(0,0,0,.6);
      padding:40px;
      margin-left:-100px;
    }
    .page-title h1 {
      margin:0;
      padding-top:20px;
      padding-left:20px;
      padding-bottom:20px;
      border-top:6px solid;
      border-left:6px solid;
      border-bottom:6px solid;
    }
    .page-wrap h2 {
      margin:0;
      padding-left:36px;
      padding-top:20px;
      border-left:4px solid;
      border-top:4px solid;
    }
    .page-wrap h3 {
      margin:0;
      padding-left:40px;
    }
    .page-wrap p {
      position:relative;
      background:white;
      margin:0;
      padding:0 40px 40px;
      z-index:2;
    }
    .page-wrap p:first-of-type {padding-top:40px;}
    .page-wrap div+p {padding-top:40px;}
    .page-wrap .h-tag {
      position:relative;
      margin:40px 0 -60px -40px;
      padding-bottom:100px;
    }
  </style>
</article>

For a quick walkthrough, the <article></article> element displays the page content using PHP WordPress functions. By using these functions like the_post and the_content, there’s no need for coding to access the WordPress database. Each function within the <article></article> element has a comment revealing what it does.

Your WordPress page.php file renders the your page created in WordPress.  So if the page exists detected by the function: while(have_posts(), it pulls the thumbnail, title, and content and renders it.

As mentioned, a unique background for each page is created from the small version of the featured image.  First, it is stretched to completely cover the background.  Then, CSS blurrs and fades the small image to eliminate pixelization.  Also, the blurring and fading prevents destraction – the main featured image is the focus, not the background.  This is done using the WordPress function: the_post_thumbnail('small-entry-image')

Next, WordPress functions the_post_thumbnail() and single_post_title() pull the large featured image and title from the WordPress Page.  Then, the theme div overlaps them beautifully using CSS.

The unique page layout explained

After that, the magic happens when modifying the content from the WordPress page.  To elaborate, the WordPress function the_content(); pulls the content after being modified by a filter and its function.  The function adds a <div> element around every heading within the content.  Then, the CSS does the rest to make the page design come alive.

If you would also love to build a great WordPress front-page.php file, check out Make an amazing WordPress front-page.php file.  Walk through this guide to see a beautiful homepage design come to life all while learning exactly how it’s done.

Test functionality and continue learning

Now that you’ve completed your WordPress front-page.php file, be sure to fully test everything on your WordPress page.php file.  From your header down to your footer, everything should render correctly and function properly.  In fact, be sure to test every link by clicking on each one.

Once it all works, congratulations!  You now know how to use theme divs to build a web page.  Uncover more theme divs by clicking on Guides in the menu.