Hello There!

Lorem ipsum dolor sit amet, consectetur adipiscing elit,

Follow Us

WordPress

Examples of creating custom template files in WordPress theming

admin
21 June, 2023
[wp_reading_time] mins
  • page-custom.php
    • Usage: Create a file named page-custom.php in your theme’s directory.
    • Description: This custom template file can be assigned to specific pages in the WordPress admin. It allows you to create a unique layout or design for those specific pages, different from the default page template.
<?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();
?>
  • single-customposttype.php
    • Usage: Create a file named single-customposttype.php in your theme’s directory.
    • Description: This custom template file is used to display single posts of a specific custom post type. For example, if you have a custom post type named “portfolio,” you can create this template file to have a dedicated layout for displaying individual portfolio entries.
<?php
/**
 * Template Name: Custom Single Template
 *
 * This is a custom template file for displaying single posts of a specific custom post type.
 * You can use this template by assigning it to the desired custom post type 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 post title
                the_title('<h1>', '</h1>');

                // Display the post content
                the_content();

            endwhile;
            ?>

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

<?php
// Retrieve the footer
get_footer();
?>
  • archive-customposttype.php
    • Usage: Create a file named archive-customposttype.php in your theme’s directory.
    • Description: This custom template file is used to display the archive page of a specific custom post type. It allows you to create a distinct layout for the archive page of a particular post type, such as a portfolio archive or a news archive.
<?php
/**
 * Template Name: Custom Archive Template
 *
 * This is a custom template file for displaying the archive page of a specific custom post type.
 * You can use this template by assigning it to the desired custom post type 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
            // Display the archive title
            the_archive_title('<h1 class="page-title">', '</h1>');

            // Start the loop
            while (have_posts()) :
                the_post();

                // Display the post title and excerpt
                the_title('<h2>', '</h2>');
                the_excerpt();

            endwhile;
            ?>

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

<?php
// Retrieve the footer
get_footer();
?>
  • taxonomy-customtaxonomy.php
    • Usage: Create a file named taxonomy-customtaxonomy.php in your theme’s directory.
    • Description: This custom template file is used to display the archive page for a specific custom taxonomy. For instance, if you have a custom taxonomy named “genre,” you can create this template file to style the archive page for different genres on your website.
<?php
/**
 * Template Name: Custom Taxonomy Template
 *
 * This is a custom template file for displaying the archive page of a specific custom taxonomy.
 * You can use this template by assigning it to the desired custom taxonomy 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
            // Display the taxonomy title
            the_archive_title('<h1 class="page-title">', '</h1>');

            // Start the loop
            while (have_posts()) :
                the_post();

                // Display the post title and content
                the_title('<h2>', '</h2>');
                the_content();

            endwhile;
            ?>

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

<?php
// Retrieve the footer
get_footer();
?>
  • 404.php
    • Usage: Create a file named 404.php in your theme’s directory.
    • Description: This custom template file is used to display a custom layout for 404 error pages. It allows you to provide a unique design and content for when a user encounters a page that does not exist.
<?php
/**
 * Template Name: 404 Template
 *
 * This is a custom template file for displaying a 404 error page.
 * It will be automatically used when a page is not found.
 */

// 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">

            <h1 class="page-title">404 - Page Not Found</h1>
            <p>Sorry, but the page you are looking for could not be found.</p>

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

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

Related posts

07. Jul. 2023
WordPress

Action hook

23. Jun. 2023
WordPress

What is WordPress?