Create a Panel Page with WordPress

As you surf the web, you get a sense of the design that you like. A popular style of web page design is one where a long page is divided into sections, each with it’s own flavor. These are called “single page apps”, or “single page sites”. There are a couple of ways you can do this.

Pure Templates

As a developer, the easiest way to develop is in templates. In this method, all the content and in written as a large block of HTML in PHP template files. This lets you manage the HTML in version control. The problem with this, is that you now have content in the code, and taken control out of the user’s hands.

As a Single Page

In this process, you would login to WordPress, and create a single page. In the editor, you would need to add HTML to delimit the sections. This can work, but it has the opposite problem of the ‘pure templates’ solution above – You’d be adding code to the content. That can get weird – especially if the your tags get “cleaned up” by WordPress upon rendering the page. Sometimes WordPress can be “too helpful”.

Using Multiple Sub-Pages

In this solution you get the best of both worlds. The developer can control the HTML, while the author can easily update the content. The Author will create multiple pages in the dashboard. The first page to create, is the page where the content will be viewed. Let’s call it Projects. You might provide some summary text that describes the overall page.

Create a template in your theme called page-projects.php and add the standard WordPress loop as a starting point. It should look something like the following.

<?php 
/* 
Template Name: Projects Single Page 
*/ 

/**  
* Single Page App template  
*  
* This template displays sub-pages e.g. panels, for a given page.  
*  
* @package AndrewWoods\Tutorial  
*/ get_header(); 
?>

<?php
if ( have_posts() ) :
	while ( have_posts() ) :
		the_post();
	endwhile;
else:
	//Sorry! No Results
endif;
?>

<?php get_footer(); ?>

Back in the WordPress Dashboard, you’ll create a number of sub pages – each will be represented by a panel. Each Panel you want to create will follow the same steps:

• Create a new page
• give it a title like “Panel: {title of panel}”
• add your content
• Set the parent page to ‘Projects’

That’s just part of the solution. The other part is the template file in your theme. We have our content is created, and have a basic template. Now, lets add the magic to our template.

Let’s start by adding the following line above the loop.

<?php $parent_id = 0; ?>

Inside the loop, add the following line:

<?php $parent_id = get_the_ID(); ?>

This code is pretty straightforward. The setting of the variable sets you up for what comes next. To display the panels for our page content, we need a second loop. It’s not just another standard loop. We need to setup a few parameters to change the default loop, to find the panels we made.

<?php

$panel_args = array();
$panel_args[ 'post_parent' ] = $parent_id;
$panel_args[ 'post_type' ]   = 'page';
$panel_args[ 'orderby' ]     = 'menu_order';
$panel_args[ 'order' ]       = 'ASC';

$panels = new WP_Query( $panel_args );

In this code above, we’re creating an empty array, and adding our query parameters to it. The first parameter ‘post_parent’ represents the ID of the current page. This is telling WordPress that we want all the pages that have this parent. In other words all of our panels.

The other important parameter in the $panel_args array is ‘orderby’. The value of ‘menu_order’ lets the author determine of order of the menu by arranging them in the WordPress admin.

Just under the constructor, add the following lines:

	
if ( $panels->have_posts() ) :
	while ( $panels->have_posts() ) :
		$panels->the_post();
		the_content();
	endwhile;
else:
	// Sorry! No Results
endif;
?>

At this point, this will work. However, instead of just a simple call to the_content(), I’d suggest you create a template fragment with some custom HTML, and call it from within the loop using get_template_part(). I’m going to leave learning about get_template_part as an exercise for you.

Download the complete example