Custom page templates in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a custom page template in WordPress.

Wordpress

<?php
/*
Template Name: [1]
*/
?>

Drag options to blanks, or click blank then click option'

ATemplate Page

BPage Template

CMy Custom Template

DCustom Template

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the exact comment format with /* and */

Using incorrect or missing 'Template Name:' label

The Template Name comment defines the name of the custom page template shown in WordPress admin.

2fill in blank

medium

Complete the code to load the header in a custom page template.

Wordpress

<?php
get_[1]();
?>

Drag options to blanks, or click blank then click option'

Afooter

Bcontent

Csidebar

Dheader

Attempts:

3 left

💡 Hint

Common Mistakes

Using get_footer() instead of get_header()

Misspelling the function name

The get_header() function loads the header.php template part.

3fill in blank

hard

Fix the error in the loop to display page content in a custom template.

Wordpress

<?php
if ( have_posts() ) :
  while ( [1]() ) : the_post();
    the_content();
  endwhile;
endif;
?>

Drag options to blanks, or click blank then click option'

Athe_post

Bhave_posts

Cget_post

Dpost_content

Attempts:

3 left

💡 Hint

Common Mistakes

Using the_post() in the loop condition instead of have_posts()

Using get_post() which returns a post object, not a boolean

The have_posts() function checks if there are posts to loop through.

4fill in blank

hard

Fill both blanks to correctly enqueue a stylesheet in a custom page template.

Wordpress

<?php
function custom_template_styles() {
  wp_enqueue_style( '[1]', get_template_directory_uri() . '/css/[2].css' );
}
add_action( 'wp_enqueue_scripts', 'custom_template_styles' );

Drag options to blanks, or click blank then click option'

Acustom-style

Bstyle

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same string for both handle and file name incorrectly

Forgetting to hook the function to 'wp_enqueue_scripts'

The first blank is the handle name for the stylesheet, and the second is the CSS file name without extension.

5fill in blank

hard

Fill all three blanks to create a custom page template that loads header, footer, and displays the page title.

Wordpress

<?php
/* Template Name: Custom Page */
get_[1]();
if ( have_posts() ) : while ( have_posts() ) : the_post();
  echo '<h1>' . get_[2]() . '</h1>';
endwhile; endif;
get_[3]();
?>

Drag options to blanks, or click blank then click option'

Aheader

Bthe_title

Cfooter

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Using the_title() instead of get_the_title() inside echo

Forgetting to close the loop properly

This template loads the header, shows the page title, and then loads the footer.