DEV Community

Cover image for Step-by-Step: Creating a Custom Page Template in WordPress🧑‍💻
Chaitanya Rai
Chaitanya Rai

Posted on

Step-by-Step: Creating a Custom Page Template in WordPress🧑‍💻

#webdev #wordpress #php #programming

In WordPress, there are times when you might want a page that looks and functions completely differently from the rest of your site. A common use case is an Accessibility page that demands a specific layout, style, or behavior. This tutorial walks you through creating a custom page template that uses a separate header and footer and unique styling.

🧩 Why Use a Custom Page Template?
Using a custom page template allows you to:

Apply unique styling to a specific page.

Load custom JavaScript and CSS independent of the main theme.

Use different headers and footers, which are useful for accessibility pages or landing pages.

🛠️ Step 1: Create the Custom Page Template
Navigate to your theme directory:

wp-content/themes/your-theme/
Enter fullscreen mode Exit fullscreen mode

Create a new file named:

page-accessibility.php
Enter fullscreen mode Exit fullscreen mode

Add the following code:

<?php /* Template Name: Accessibility Page */ get_header('accessibility'); ?> <div class="accessibility-content"> <h1><?php the_title(); ?></h1> <?php the_content(); ?> </div> <?php get_footer('accessibility'); ?>
Enter fullscreen mode Exit fullscreen mode

🧱 Step 2: Create Custom Header and Footer
Create two new files in your theme directory:

`- header-accessibility.php

  • footer-accessibility.php`

Example: header-accessibility.php

<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>"> <title><?php wp_title(); ?></title> <?php wp_head(); ?> </head> <body> <header class="accessibility-header"> <h1>Accessibility Page</h1> </header>
Enter fullscreen mode Exit fullscreen mode

🧱 Create footer-accessibility.php
Add a matching footer for this layout:

<footer class="accessibility-footer"> <p>&copy; <?php echo date('Y'); ?> My Accessibility Page</p> </footer> <?php wp_footer(); ?> </body> </html>
Enter fullscreen mode Exit fullscreen mode

🎨 Step 3: Enqueue Custom Styles and Scripts
Open your functions.php and add the following:

function accessibility_custom_scripts() { if (is_page_template('page-accessibility.php')) { wp_enqueue_style( 'accessibility-style', get_stylesheet_directory_uri() . '/css/accessibility.css' ); wp_enqueue_script( 'accessibility-script', get_stylesheet_directory_uri() . '/js/accessibility.js', array('jquery'), null, true ); } } add_action('wp_enqueue_scripts', 'accessibility_custom_scripts');
Enter fullscreen mode Exit fullscreen mode

📂 Step 4: Create CSS and JS Files

In your theme directory:

`- Create a css/ folder → Add accessibility.css

  • Create a js/ folder → Add accessibility.js`

Example CSS (css/accessibility.css):

body { background-color: #f4f4f4; font-size: 18px; } .accessibility-header { background-color: #333; color: #fff; padding: 20px; }
Enter fullscreen mode Exit fullscreen mode

Example JS (js/accessibility.js):

document.addEventListener("DOMContentLoaded", function () { alert("Accessibility page loaded!"); });
Enter fullscreen mode Exit fullscreen mode

📝 Step 5: Assign Template in WordPress
Go to your WordPress Dashboard

Navigate to Pages **→ **Add New or edit an existing page

In the right sidebar under Page Attributes → Template, select:

Accessibility Page
Enter fullscreen mode Exit fullscreen mode

Publish the page — and you're done!

✅ Conclusion
By creating a custom page template, you gain full control over the layout, styles, and functionality of specific pages on your site. This is incredibly useful for:

`- Accessibility-specific content

  • Landing pages
  • Unique layout requirements`

It’s a clean, modular approach that keeps your theme organized and maintainable.

Top comments (1)

Collapse
 
davidvpino profile image
DavidVPino •

Very good general explanation for creating an added resource. 👌