Example of Anatomy of a WordPress Theme

<?php
/**
 * Template Name: Custom Page Template
 *
 * This is a custom template file for a specific page in WordPress.
 * You can use this template by assigning it to a page in the WordPress admin.
 */

// Retrieve the header
get_header();
?>

<div id="content" class="site-content">
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

            <?php
            // Start the loop
            while (have_posts()) :
                the_post();

                // Display the page content
                the_content();

            endwhile;
            ?>

        </main><!-- #main -->
    </div><!-- #primary -->
</div><!-- #content -->

<?php
// Retrieve the footer
get_footer();
?>

Here’s an explanation of each part:

/**
 * Template Name: Custom Page Template
 *
 * This is a custom template file for a specific page in WordPress.
 * You can use this template by assigning it to a page in the WordPress admin.
 */

This section is a comment block that provides information about the template. It specifies the template’s name as “Custom Page Template” and explains its purpose. It also instructs how to assign this template to a specific page in the WordPress admin area.

// Retrieve the header
get_header();

This line calls the get_header() function, which retrieves the header template of your WordPress theme and includes it in the current page. It typically contains the HTML markup for the header section.

<div id="content" class="site-content">
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

These lines define the main content area of the page using HTML <div> elements with specific IDs and classes. It creates a container for the content and assigns the role attribute for accessibility purposes.

<?php
// Start the loop
while (have_posts()) :
    the_post();

    // Display the page content
    the_content();

endwhile;
?>

This section starts a loop that iterates through the posts. In this case, since it’s a custom page template, there should be only one post. The while loop checks if there are more posts, and if so, it calls the the_post() function to set up the post data.

Inside the loop, the the_content() function is used to display the content of the page. This includes any text, images, or other elements added to the page editor in the WordPress admin.

</main><!-- #main -->
    </div><!-- #primary -->
</div><!-- #content -->

These lines close the main content area <div> tags that were opened earlier, ensuring proper HTML structure.

<?php
// Retrieve the footer
get_footer();
?>

Finally, this code calls the get_footer() function, which retrieves the footer template of your WordPress theme and includes it in the current page. It typically contains the HTML markup for the footer section.