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/

Create a new file named:

page-accessibility.php

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'); ?>

🧱 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>

🧱 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>

🎨 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');

📂 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;
}

Example JS (js/accessibility.js):

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

📝 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

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