Displaying multiple pages on one

Every so often I come across a theme or an implementation I like and wonder how it is being done. I like to dig behind the scenes on themes and see how they do things. Taking things apart to see how they work is a great way to learn.

One neat little tidbit I learned was how to create a page template that can use content from other pages and append it.

The steps

  1. Write code
  2. ???
  3. Have a celebratory drink

Step 1: Write Code

Yes, we will be writing quite a bit of it. Okay just enough to get the ball rolling and demonstrate the concept. One of the first things we need to do is figure out how many pages we want to show on our page template. I’ll use a smaller number like one to get started. You can add more if you want but because this is for demonstrational purposes we’ll keep it nice and simple.

So first, we will create our setting in the customizer:

$wp_customize->add_section( 'my_theme_page_sections', array(
	'title'    => __( 'The first page', 'text-domain' ),
	'priority' => 130,
) );
$wp_customize->add_setting( 'my_theme_page_1', array(
	'default'           => '',
	'sanitize_callback' => 'my_theme_sanitize_dropdown_pages',
) );
$wp_customize->add_control( 'my_theme_page_1', array(
	'label'             => __( 'Page 1 content', 'text-domain' ),
	'section'           => 'my_theme_page_sections',
	'priority'          => 30,
	'type'              => 'dropdown-pages',
) );
// the sanitize callback
function my_theme_sanitize_dropdown_pages( $input ) {
	if ( is_numeric( $input ) ) {
		return intval( $input );
	}
}

Next, we can create our actual page template.

/**
 * Template Name: Multiple pages
 *
 */
get_header(); 
	while( have_posts() ) : the_post(); // beginning of the loop
		// The page content of the selected page.
		// something basic can work like 
		the_content();
		wp_link_pages();
	endwhile; // end of the loop
	// Here is where the fun part is!
	rewind_posts();
	my_theme_selected_pages();
get_footer();

Yes, I’ve left out a lot of the markup but that’s only because the styling will be different for everyone. As you can see the part that creates the extra content is the function my_theme_selected_pages. That means we have to create this function somewhere. It can look something like:

$page_1 = intval( get_theme_mod( 'my_theme_page_1', '0' ) );

if ( 0 == $page_1 ){
	return;
}

for ( $number = 1; $number <= 2; $number++ ):
	if ( 0 != ${'page_' . $number} ) :
		$selected = new WP_Query( array( 'page_id' => ${'page_' . $number ) );
		// Our newly created loop with our selected page(s)
		while( $selected->have_posts() ): $selected->the_post();
			the_content();
			wp_link_pages();
		endwhile;
		wp_reset_postdata();
	endif;
endfor;

As you can see I have made it super simplistic. You can add more pages if you want. The key is making sure that $number<=2 matches the right amount of pages you want to add. So if you wanted to add five you would change the 2 to a 5. Yes, I left it at two because I forgot to change it.

Step 3: Celebrate!

Okay, maybe style it up if you want but I’m going to celebrate with some coke zero.

Validating your theme’s settings and options

You’ve made a theme and it has all the options you want to include. The next step is making sure that user input is the right information or at least what you are looking to use.

Why?

Security is a big thing and I mean a big thing. If you think it’s not I will kindly ask you to read something else. Who is to say that a user accidentally puts in a random letter when you are expecting a number. It’s like playing rock/paper/scissors and somebody uses magma. I mean there are only three things to choose from so how can magma be a valid option?

That is where validation comes into play when it comes to your theme options. Read more Validating your theme’s settings and options