Building a custom WordPress theme from scratch can feel overwhelming, especially when you want clean code, flexible templates, responsive layouts, SEO-friendly structure, accessibility, and long-term maintainability. Many developers start with a blank folder and quickly realize they need to set up multiple core files before they can even begin designing the actual website.

That is where the WordPress Underscores theme, also known as _s, becomes useful.

Underscores is a lightweight starter theme that gives developers a clean foundation for building custom WordPress themes. Instead of beginning with a fully designed theme and removing unnecessary features, you start with a minimal codebase and build only what your project needs.

The official Underscores website describes _s as a starter theme “meant for hacking” and clearly says not to use it as a parent theme. In other words, Underscores is not something you install and keep updating like a normal WordPress theme. It is a starting point that you rename, customize, and transform into your own custom theme.

In this detailed guide, we will cover what Underscores is, why developers still use it, how its file structure works, how to customize it, how WordPress template hierarchy applies to it, and how to follow best practices for performance, SEO, accessibility, and modern WordPress development.

What Is the WordPress Underscores Theme?

The WordPress Underscores theme is a minimal starter theme created to help developers build custom WordPress themes faster. It includes essential theme files, template structure, basic HTML markup, WordPress functions, navigation support, comments structure, widget areas, and starter CSS.

Unlike a multipurpose theme, Underscores does not come with heavy design options, page builder layouts, dozens of templates, or unnecessary visual effects. It is intentionally simple. That makes it ideal for developers who want full control over design, code, and functionality.

Think of Underscores as a clean blueprint. It gives you the foundation, but you decide how the final building looks.

With Underscores, you can create:

  • Custom business websites
  • Blog themes
  • Portfolio themes
  • Agency websites
  • WooCommerce-compatible themes
  • Lightweight landing page themes
  • Niche WordPress themes
  • Client-specific custom themes
  • Developer-friendly classic themes

The main benefit is flexibility. You are not fighting against a pre-built design. You are starting with a clean structure and building your theme intentionally.

Subscribe to our Newsletter

Stay updated with our latest news and offers.
Thanks for signing up!

Is Underscores Still Relevant in 2026?

Yes, Underscores is still useful in 2026, but it is important to understand where it fits in modern WordPress development.

WordPress now supports both block themes and classic themes. According to the WordPress Theme Handbook, block themes are mainly built with HTML and a theme configuration file and allow users to edit all parts of the site through the Site Editor. Classic themes, on the other hand, primarily use PHP, JavaScript, CSS, hooks, and filters.

Underscores is mainly useful for building classic WordPress themes. That means it is still a strong choice when you want full PHP-based template control, custom theme architecture, custom loops, custom fields, advanced layouts, and developer-managed design.

However, if your project requires Full Site Editing, block templates, global style controls, template editing from the WordPress dashboard, and deep block-based customization, then a block theme may be a better option.

Use Underscores when you want:

  • Full control over PHP templates
  • A clean classic theme foundation
  • Lightweight custom development
  • A theme built around custom design requirements
  • Better control over markup and performance
  • A developer-first workflow

Consider a block theme when you want:

  • Full Site Editing support
  • Site Editor customization
  • Block-based templates
  • Global styles through theme.json
  • More control for non-technical users inside WordPress

So, Underscores is not outdated. It is simply best suited for classic custom WordPress theme development.

Why Use Underscores for WordPress Theme Development?

Underscores is popular because it gives developers a practical head start without forcing a design system or heavy framework. Instead of building every file from scratch, you get a clean starting structure that already follows many WordPress theme conventions.

1. It Saves Development Time

Creating a custom theme manually requires setting up files like style.css, functions.php, index.php, header.php, footer.php, single.php, page.php, archive.php, and more.

Underscores provides these starter files, so you can focus faster on design, layout, functionality, and project-specific requirements.

2. It Gives You Full Control

Pre-built WordPress themes often include unnecessary scripts, styles, layout systems, page builder dependencies, and theme options. These can slow down the site and make customization harder.

With Underscores, you control everything. You decide which CSS to write, which JavaScript to load, which templates to create, and which features to support.

3. It Is Lightweight

Because Underscores is intentionally minimal, it does not include bloated design features. This gives you a cleaner performance foundation compared to many multipurpose themes.

A lightweight theme can improve loading speed, user experience, and technical SEO when optimized properly.

4. It Helps You Learn WordPress Theme Development

For beginners and intermediate developers, Underscores is a great way to understand how WordPress themes actually work. You can study the file structure, template parts, hooks, functions, navigation, comments, widgets, and theme setup process.

Instead of relying only on visual builders, you learn the foundation of WordPress theme development.

5. It Works Well for Custom Client Projects

If you build WordPress websites for clients, Underscores gives you a flexible base that can be adapted for different industries and design needs. You can build a completely custom theme without unnecessary features that the client will never use.

Important: Underscores Is Not a Parent Theme

One of the biggest mistakes developers make is treating Underscores like a parent theme.

A parent theme is a complete theme that can be extended through a child theme. For example, if you customize a third-party theme, using a child theme helps preserve your changes when the parent theme updates.

Underscores is different.

Underscores is a starter theme. You download it, rename it, customize the code directly, and turn it into your own theme. The official Underscores site clearly says it is not meant to be used as a parent theme.

So the correct workflow is:

  1. Generate or download Underscores.
  2. Rename it with your theme name.
  3. Customize the files directly.
  4. Build your own design and functionality.
  5. Maintain it as your own custom theme.

Do not install Underscores as a parent theme and then create a child theme for it. That approach defeats the purpose of using a starter theme.

Underscores vs Regular WordPress Themes

A regular WordPress theme usually comes with a finished design. You install it, customize colors, upload a logo, adjust typography, and add content.

Underscores is different because it is not designed to be beautiful out of the box. It is designed to be customized by developers.

FeatureRegular WordPress ThemeUnderscores Starter Theme
DesignPre-designedMinimal and unstyled
Best forNon-technical usersDevelopers
CustomizationTheme options, customizer, page builderDirect code customization
PerformanceDepends on theme qualityLightweight starting point
FlexibilityLimited by theme structureHighly flexible
Learning valueLow to mediumHigh
Use caseQuick website setupCustom theme development

Use a regular theme if you need a fast website with minimal coding. Use Underscores if you want to build a custom WordPress theme with complete control.

Underscores vs Block Themes

Modern WordPress development includes both classic themes and block themes. Since Underscores is a classic starter theme, it is helpful to understand the difference.

FeatureUnderscores / Classic ThemeBlock Theme
Main filesPHP templatesHTML block templates
StylingCSS, functions.php, optional theme.jsontheme.json and block styles
Editing experienceCustomizer, widgets, theme options, codeSite Editor and global styles
Best forDeveloper-controlled custom themesUser-editable full-site design
Template systemPHP template hierarchyBlock template hierarchy
FlexibilityVery high for developersVery high for block-based editing
Learning curveRequires PHP knowledgeRequires block/theme.json knowledge

Underscores is a better choice when the developer needs full control over PHP templates, custom loops, and advanced theme logic. A block theme is better when the site owner needs to edit headers, footers, templates, and global styles visually.

How to Download and Set Up Underscores

The basic setup process is simple.

Step 1: Generate Your Theme

Go to the Underscores website and enter your theme details, including:

  • Theme name
  • Theme slug
  • Author name
  • Author URI
  • Theme description
  • WooCommerce boilerplate option
  • Sass option

Then download the generated theme package.

Step 2: Rename the Theme Properly

Use a clean theme name and slug. For example:

  • Theme Name: CodeCanel Custom Theme
  • Theme Slug: codecanel-custom-theme
  • Text Domain: codecanel-custom-theme

Your text domain should match your theme slug. This is important for translation-ready development.

Step 3: Install the Theme in WordPress

You can install it like any other theme:

  1. Log in to your WordPress dashboard.
  2. Go to Appearance > Themes.
  3. Click Add New.
  4. Click Upload Theme.
  5. Upload the Underscores ZIP file.
  6. Activate the theme.

For local development, you can also place the theme folder directly inside:

wp-content/themes/your-theme-name/

Step 4: Set Up a Local Development Environment

For professional WordPress theme development, avoid editing directly on a live website. Use a local environment or staging site.

Common tools include:

  • Local
  • XAMPP
  • MAMP
  • Docker
  • DevKinsta
  • Laragon

A local setup lets you test changes safely before pushing them to production.

WordPress Underscores Theme File Structure Explained

After downloading Underscores, you will see several important theme files and folders. Understanding these files is one of the most important parts of WordPress Underscores theme development.

A typical Underscores structure looks like this:

your-theme/
│
├── 404.php
├── archive.php
├── comments.php
├── footer.php
├── functions.php
├── header.php
├── index.php
├── page.php
├── search.php
├── sidebar.php
├── single.php
├── style.css
│
├── inc/
│   ├── custom-header.php
│   ├── template-functions.php
│   └── template-tags.php
│
├── js/
│   ├── navigation.js
│   └── skip-link-focus-fix.js
│
├── languages/
│
├── layouts/
│
└── template-parts/
    ├── content.php
    ├── content-none.php
    ├── content-page.php
    └── content-search.php

Let’s break down the most important files.

style.css

The style.css file is the main stylesheet of your WordPress theme. It also contains the theme header comment that tells WordPress important information about the theme.

Example:

/*
Theme Name: CodeCanel Custom Theme
Theme URI: https://example.com/
Author: CodeCanel
Author URI: https://example.com/
Description: A custom WordPress theme built with Underscores.
Version: 1.0.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: codecanel-custom-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

This header is required because WordPress uses it to identify your theme in the dashboard.

You can also write your main CSS in this file, although many developers prefer to organize styles into separate files or use Sass.

functions.php

The functions.php file is one of the most important files in your theme. It is used to register theme features, enqueue scripts and styles, add menus, enable thumbnails, register widgets, and add custom functionality.

Common tasks inside functions.php include:

  • Adding theme support
  • Registering navigation menus
  • Loading stylesheets
  • Loading JavaScript files
  • Registering widget areas
  • Adding custom image sizes
  • Setting content width
  • Loading translation files

Example theme setup function:

function codecanel_theme_setup() {
    load_theme_textdomain( 'codecanel-custom-theme', get_template_directory() . '/languages' );

    add_theme_support( 'automatic-feed-links' );
    add_theme_support( 'title-tag' );
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'custom-logo' );

    add_theme_support(
        'html5',
        array(
            'search-form',
            'comment-form',
            'comment-list',
            'gallery',
            'caption',
            'style',
            'script',
        )
    );

    register_nav_menus(
        array(
            'primary' => esc_html__( 'Primary Menu', 'codecanel-custom-theme' ),
            'footer'  => esc_html__( 'Footer Menu', 'codecanel-custom-theme' ),
        )
    );
}
add_action( 'after_setup_theme', 'codecanel_theme_setup' );

This code enables important WordPress theme features and registers menu locations.

header.php

The header.php file contains the opening HTML structure of your theme. It usually includes the doctype, opening <html> tag, <head> section, wp_head() function, opening <body> tag, site branding, and navigation.

A basic structure may look like this:

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php
        if ( has_custom_logo() ) {
            the_custom_logo();
        } else {
            ?>
            <p class="site-title">
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                    <?php bloginfo( 'name' ); ?>
                </a>
            </p>
            <?php
        }
        ?>
    </div>

    <nav id="site-navigation" class="main-navigation">
        <?php
        wp_nav_menu(
            array(
                'theme_location' => 'primary',
                'menu_id'        => 'primary-menu',
            )
        );
        ?>
    </nav>
</header>

Always keep wp_head() before the closing </head> tag because WordPress and plugins use it to load scripts, styles, meta tags, and other important elements.

footer.php

The footer.php file closes your page structure. It usually includes footer widgets, footer navigation, copyright text, wp_footer(), and closing body/html tags.

Example:

<footer id="colophon" class="site-footer">
    <div class="site-info">
        <p>
            &copy; <?php echo esc_html( date( 'Y' ) ); ?>
            <?php bloginfo( 'name' ); ?>. All rights reserved.
        </p>
    </div>
</footer>

<?php wp_footer(); ?>
</body>
</html>

Always include wp_footer() before the closing </body> tag. Many plugins and WordPress features depend on it.

index.php

The index.php file is the fallback template in WordPress. If WordPress cannot find a more specific template, it uses index.php.

In an Underscores theme, index.php usually contains the main loop for displaying posts.

Example:

<?php get_header(); ?>

<main id="primary" class="site-main">

    <?php
    if ( have_posts() ) :

        while ( have_posts() ) :
            the_post();

            get_template_part( 'template-parts/content', get_post_type() );

        endwhile;

        the_posts_navigation();

    else :

        get_template_part( 'template-parts/content', 'none' );

    endif;
    ?>

</main>

<?php
get_sidebar();
get_footer();

This file is important because it acts as the safety net for your theme.

single.php

The single.php file displays individual blog posts. If someone clicks on a single post, WordPress will usually load single.php.

You can customize this file to control:

  • Post title
  • Featured image
  • Author box
  • Post meta
  • Categories and tags
  • Related posts
  • Comments
  • Previous/next post navigation

page.php

The page.php file displays individual pages such as About, Contact, Services, or Privacy Policy pages.

Pages often need different layouts than blog posts, so keeping page.php separate from single.php is useful.

archive.php

The archive.php file displays archive pages, including:

  • Category archives
  • Tag archives
  • Author archives
  • Date archives
  • Custom taxonomy archives

You can create more specific archive templates if needed. For example:

category.php
tag.php
author.php
taxonomy-service-category.php
archive-project.php

search.php

The search.php file controls the search results page. You can customize it to improve user experience by showing post excerpts, highlighted keywords, filters, or no-result suggestions.

404.php

The 404.php file appears when visitors land on a page that does not exist. A good 404 page should help users continue browsing instead of leaving the website.

Add helpful elements like:

  • Search form
  • Popular posts
  • Homepage link
  • Category links
  • Contact link

template-parts Folder

The template-parts folder helps keep your theme organized. Instead of repeating the same code in multiple files, you can store reusable template sections.

For example:

template-parts/content.php
template-parts/content-page.php
template-parts/content-search.php
template-parts/content-none.php

Then you can load them with:

get_template_part( 'template-parts/content', get_post_type() );

This keeps your theme cleaner and easier to maintain.

inc Folder

The inc folder usually contains extra PHP files that support your theme. In Underscores, it may include:

  • custom-header.php
  • template-tags.php
  • template-functions.php
  • Customizer-related files

This folder is helpful because you should avoid putting every function directly inside functions.php. For larger themes, separating code into smaller files makes maintenance easier.

How WordPress Template Hierarchy Works in Underscores

Template hierarchy is one of the most important concepts in WordPress theme development. It controls which template file WordPress uses for different types of pages.

The official WordPress documentation explains that WordPress uses the request information from the URL to decide which template should load. It searches through the template hierarchy until it finds a matching template file.

For classic themes like Underscores, the template files use .php instead of .html.

Here is a simplified classic theme hierarchy:

Homepage

front-page.php
home.php
index.php

Use front-page.php when you want a custom homepage design. Use home.php when you want a custom blog posts index.

Single Blog Post

single-post-slug.php
single.php
singular.php
index.php

For most blogs, single.php controls individual post pages.

Page

page-about.php
page-123.php
page.php
index.php

If you want a special design for the About page, you can create page-about.php.

Category Archive

category-news.php
category-5.php
category.php
archive.php
index.php

If you want one category to have a different layout, create a specific category template.

Custom Post Type Archive

archive-project.php
archive.php
index.php

If you create a custom post type called project, you can create archive-project.php.

404 Page

404.php
index.php

If 404.php exists, WordPress will use it for not-found pages.

Understanding template hierarchy helps you customize your Underscores theme properly. Instead of editing the wrong file, you can create the correct template for the exact page type you want to control.

How to Customize an Underscores Theme Step by Step

Now let’s walk through the practical customization process.

Step 1: Rename the Theme

After downloading Underscores, rename the theme folder, update the theme name in style.css, and make sure the text domain matches your theme slug.

Example:

Theme folder: codecanel-custom-theme
Text domain: codecanel-custom-theme
Theme name: CodeCanel Custom Theme

Search the theme files for the original text domain and replace it carefully with your own.

Step 2: Add Theme Support

Open functions.php and confirm your theme supports essential WordPress features.

Example:

function codecanel_theme_setup() {
    add_theme_support( 'title-tag' );
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'responsive-embeds' );
    add_theme_support( 'align-wide' );

    register_nav_menus(
        array(
            'primary' => esc_html__( 'Primary Menu', 'codecanel-custom-theme' ),
        )
    );
}
add_action( 'after_setup_theme', 'codecanel_theme_setup' );

This gives your theme support for dynamic titles, featured images, custom logos, responsive embeds, wide alignment, and menus.

Step 3: Enqueue CSS and JavaScript Properly

Do not hardcode CSS and JavaScript files inside header.php or footer.php. Use wp_enqueue_style() and wp_enqueue_script() inside functions.php.

Example:

function codecanel_theme_scripts() {
    wp_enqueue_style(
        'codecanel-style',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get( 'Version' )
    );

    wp_enqueue_script(
        'codecanel-navigation',
        get_template_directory_uri() . '/js/navigation.js',
        array(),
        wp_get_theme()->get( 'Version' ),
        true
    );
}
add_action( 'wp_enqueue_scripts', 'codecanel_theme_scripts' );

This is the correct WordPress way to load assets because it helps prevent conflicts and allows WordPress to manage dependencies.

Step 4: Customize the Header

The header is one of the most important parts of your theme. You can customize the logo, navigation, mobile menu, search bar, CTA button, or sticky header.

Common header elements include:

  • Site logo
  • Primary navigation
  • Mobile menu button
  • Search icon
  • CTA button
  • Social links
  • Header contact information

For SEO and accessibility, make sure your navigation is clean, crawlable, and keyboard-friendly.

Step 5: Customize the Footer

Your footer should not be an afterthought. A strong footer improves navigation, internal linking, trust, and conversion.

Add sections like:

  • Footer logo
  • Short brand description
  • Important pages
  • Services
  • Blog categories
  • Contact information
  • Newsletter signup
  • Copyright text
  • Privacy policy and terms links

For a business website, the footer is a useful place to add internal links to important service pages.

Step 6: Create a Custom Homepage

To create a custom homepage, add a front-page.php file in your theme root.

Example:

<?php get_header(); ?>

<main id="primary" class="site-main">

    <section class="hero-section">
        <div class="container">
            <h1><?php bloginfo( 'name' ); ?></h1>
            <p><?php bloginfo( 'description' ); ?></p>
            <a href="/contact" class="button">Get Started</a>
        </div>
    </section>

    <section class="latest-posts">
        <div class="container">
            <h2>Latest Articles</h2>

            <?php
            $latest_posts = new WP_Query(
                array(
                    'posts_per_page' => 3,
                )
            );

            if ( $latest_posts->have_posts() ) :
                while ( $latest_posts->have_posts() ) :
                    $latest_posts->the_post();
                    get_template_part( 'template-parts/content', get_post_type() );
                endwhile;
                wp_reset_postdata();
            endif;
            ?>
        </div>
    </section>

</main>

<?php get_footer(); ?>

This allows you to build a custom homepage layout without relying on a page builder.

Step 7: Add Widget Areas

Widget areas are useful for sidebars, footer columns, and custom content blocks.

Example:

function codecanel_widgets_init() {
    register_sidebar(
        array(
            'name'          => esc_html__( 'Sidebar', 'codecanel-custom-theme' ),
            'id'            => 'sidebar-1',
            'description'   => esc_html__( 'Add widgets here.', 'codecanel-custom-theme' ),
            'before_widget' => '<section id="%1$s" class="widget %2$s">',
            'after_widget'  => '</section>',
            'before_title'  => '<h2 class="widget-title">',
            'after_title'   => '</h2>',
        )
    );

    register_sidebar(
        array(
            'name'          => esc_html__( 'Footer One', 'codecanel-custom-theme' ),
            'id'            => 'footer-1',
            'description'   => esc_html__( 'Add footer widgets here.', 'codecanel-custom-theme' ),
            'before_widget' => '<div id="%1$s" class="footer-widget %2$s">',
            'after_widget'  => '</div>',
            'before_title'  => '<h3 class="footer-widget-title">',
            'after_title'   => '</h3>',
        )
    );
}
add_action( 'widgets_init', 'codecanel_widgets_init' );

Then display the sidebar with:

<?php dynamic_sidebar( 'sidebar-1' ); ?>

Step 8: Customize the Blog Layout

Underscores gives you a simple blog structure, but you can improve it with a better layout.

Consider adding:

  • Featured image
  • Post category
  • Author name
  • Publish date
  • Reading time
  • Excerpt
  • “Read More” button
  • Pagination
  • Related posts

A clean blog layout improves readability and helps users explore more content.

Step 9: Add Custom Post Types Carefully

If your website needs portfolios, testimonials, case studies, services, or projects, you may need custom post types.

For example, a portfolio website might use a project post type.

However, avoid adding major content types directly into the theme if the content should remain after switching themes. In many cases, custom post types belong in a plugin instead of the theme.

Use theme-based custom post types only when the content is tightly connected to that specific theme.

Step 10: Style the Theme with CSS

Underscores includes starter CSS, but you will need to create your own design system.

Start with global styles:

:root {
    --color-primary: #1d4ed8;
    --color-dark: #111827;
    --color-light: #f9fafb;
    --color-text: #374151;
    --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
    margin: 0;
    font-family: var(--font-main);
    color: var(--color-text);
    background: #ffffff;
    line-height: 1.6;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: underline;
}

.container {
    width: min(1120px, 92%);
    margin-inline: auto;
}

Then style major theme sections:

  • Header
  • Navigation
  • Hero section
  • Blog cards
  • Sidebar
  • Footer
  • Buttons
  • Forms
  • Comments
  • Archive pages
  • Responsive layouts

Keep your CSS organized and avoid writing random styles without a structure.

How to Add Block Editor Support to an Underscores Theme

Even though Underscores is a classic theme starter, you can still add support for block editor features.

For example:

function codecanel_block_editor_support() {
    add_theme_support( 'align-wide' );
    add_theme_support( 'responsive-embeds' );
    add_theme_support( 'editor-styles' );

    add_editor_style( 'editor-style.css' );
}
add_action( 'after_setup_theme', 'codecanel_block_editor_support' );

Then create an editor-style.css file to make the block editor look closer to the front-end design.

Example:

.editor-styles-wrapper {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #374151;
    line-height: 1.6;
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3 {
    color: #111827;
}

This improves the editing experience because content creators can see a more accurate preview while writing posts and pages.

Should You Use theme.json with Underscores?

theme.json is mainly associated with modern block theme development, but classic themes can also use some theme.json features depending on the project.

The WordPress Theme Handbook describes theme.json as a foundational part of block theming and useful for configuring colors, typography, settings, and front-end styles.

For an Underscores-based classic theme, you may use theme.json to define:

  • Color palette
  • Typography presets
  • Spacing settings
  • Layout width
  • Block support settings
  • Editor styling consistency

Example basic theme.json:

{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                {
                    "slug": "primary",
                    "color": "#1d4ed8",
                    "name": "Primary"
                },
                {
                    "slug": "dark",
                    "color": "#111827",
                    "name": "Dark"
                },
                {
                    "slug": "light",
                    "color": "#f9fafb",
                    "name": "Light"
                }
            ]
        },
        "layout": {
            "contentSize": "760px",
            "wideSize": "1120px"
        },
        "typography": {
            "fluid": true
        }
    }
}

You do not need to turn your Underscores theme into a full block theme, but adding selective block editor support can make the theme more future-friendly.

How to Make an Underscores Theme Responsive

Responsive design is essential for every modern WordPress theme. Your theme should work well on desktop, tablet, and mobile devices.

Start with a mobile-first approach:

.site-header {
    padding: 1rem 0;
}

.main-navigation ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .main-navigation ul {
        flex-direction: row;
        align-items: center;
    }
}

Responsive areas to test include:

  • Header navigation
  • Mobile menu
  • Hero section
  • Blog grid
  • Sidebar
  • Footer columns
  • Forms
  • Images
  • Tables
  • Embedded videos
  • WooCommerce pages, if used

Use flexible units like %, rem, em, clamp(), min(), and max() instead of relying only on fixed pixel widths.

How to Improve Accessibility in an Underscores Theme

Accessibility means your website can be used by more people, including users who rely on keyboards, screen readers, or assistive technology.

Underscores already includes some accessibility-friendly structure, but you should improve and test it.

Important accessibility practices include:

  • Use semantic HTML elements like <header>, <nav>, <main>, <article>, and <footer>.
  • Keep heading order logical.
  • Add visible focus states for links and buttons.
  • Make navigation keyboard-friendly.
  • Add alt text for meaningful images.
  • Use sufficient color contrast.
  • Add labels for form fields.
  • Avoid using links as buttons without proper meaning.
  • Include skip links for keyboard users.

Example focus style:

a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #1d4ed8;
    outline-offset: 3px;
}

Accessibility is not only a technical improvement. It also improves usability and trust.

How to Optimize an Underscores Theme for SEO

Underscores gives you a clean foundation, but SEO depends on how you build the theme and structure the content.

1. Use Proper Heading Structure

Each page should usually have one main <h1>, followed by logical <h2> and <h3> headings.

2. Keep Markup Clean

Use semantic HTML and avoid unnecessary wrapper elements.

3. Add Schema Where Needed

Depending on the website, you may add schema for:

  • Article
  • BreadcrumbList
  • FAQPage
  • LocalBusiness
  • Product
  • Review
  • HowTo

Make sure schema matches visible page content.

4. Optimize Images

Use compressed images, descriptive filenames, and useful alt text.

Example:

wordpress-underscores-theme-file-structure.png

Alt text:

WordPress Underscores theme file structure for custom theme development

5. Improve Internal Linking

A custom theme should support clean navigation, breadcrumbs, related posts, and contextual internal links.

For example, if you are writing about theme development, link to related articles using descriptive anchor text such as:

6. Improve Core Web Vitals

Avoid unnecessary scripts, optimize CSS, lazy-load images, and reduce layout shifts.

How to Optimize Performance in an Underscores Theme

A lightweight starter theme gives you a good beginning, but performance depends on your implementation.

Follow these practices:

Load Only What You Need

Do not enqueue large CSS frameworks or JavaScript libraries unless the project actually requires them.

Minimize CSS and JavaScript

Use a build tool or optimization plugin to minify assets on production.

Use Proper Image Sizes

Register custom image sizes when needed:

function codecanel_custom_image_sizes() {
    add_image_size( 'blog-card', 640, 420, true );
    add_image_size( 'hero-large', 1440, 700, true );
}
add_action( 'after_setup_theme', 'codecanel_custom_image_sizes' );

Then use the correct image size in templates:

the_post_thumbnail( 'blog-card' );

Avoid Loading Scripts Everywhere

Load scripts only when needed. For example, do not load a slider script on every page if the slider only appears on the homepage.

Use Caching

Use page caching, browser caching, object caching, or CDN support depending on the site size and hosting environment.

Test Before Launch

Use tools like PageSpeed Insights, Lighthouse, GTmetrix, or WebPageTest to check performance issues.

Common Mistakes in WordPress Underscores Theme Development

Avoid these common mistakes when working with Underscores.

Mistake 1: Using Underscores as a Parent Theme

Underscores is a starter theme, not a parent theme. Customize it directly and maintain it as your own theme.

Mistake 2: Editing Without a Local or Staging Site

Never test major theme changes directly on a live website. Use local development or staging first.

Mistake 3: Hardcoding Scripts and Styles

Use WordPress enqueue functions instead of placing scripts directly in template files.

Mistake 4: Ignoring Template Hierarchy

If you do not understand template hierarchy, you may edit the wrong file or create unnecessary code.

Mistake 5: Putting Plugin Functionality Inside the Theme

Content-related features like custom post types, shortcodes, or major business logic often belong in plugins. This keeps content portable if the theme changes later.

Mistake 6: Forgetting Accessibility

A theme may look good visually but still be difficult to use with a keyboard or screen reader. Test accessibility from the beginning.

Mistake 7: Not Escaping Output

Always escape dynamic output to improve security.

Examples:

echo esc_html( get_the_title() );
echo esc_url( get_permalink() );
echo esc_attr( get_the_date() );

Mistake 8: Not Testing with Real Content

Test your theme with long titles, short titles, missing featured images, nested menus, long comments, galleries, tables, and different post formats.

Best Practices for WordPress Underscores Theme Development

Follow these best practices to build a clean, scalable, and professional theme.

1. Follow WordPress Coding Standards

Use clean, readable, and consistent code. Follow WordPress standards for PHP, HTML, CSS, and JavaScript.

Good formatting makes your theme easier to maintain and easier for other developers to understand.

2. Use a Clear File Structure

Do not place everything inside functions.php. Organize larger features into separate files inside the inc folder.

Example:

inc/
├── enqueue.php
├── setup.php
├── widgets.php
├── customizer.php
└── template-functions.php

Then include them in functions.php:

require get_template_directory() . '/inc/setup.php';
require get_template_directory() . '/inc/enqueue.php';
require get_template_directory() . '/inc/widgets.php';

3. Keep the Theme Lightweight

Avoid unnecessary dependencies. Only add frameworks, libraries, and scripts when they provide real value.

4. Make the Design Scalable

Use reusable CSS classes, design variables, and consistent spacing. This makes future changes easier.

5. Build with SEO in Mind

Your theme should support:

  • Proper headings
  • Clean HTML
  • Fast loading
  • Breadcrumbs
  • Schema-ready structure
  • Optimized images
  • Mobile-friendly layouts
  • Internal linking areas

6. Build with Accessibility in Mind

Accessibility should not be added at the end. Include it during the design and development process.

7. Test Across Devices and Browsers

Test your theme on:

  • Chrome
  • Firefox
  • Safari
  • Edge
  • iPhone
  • Android
  • Tablet
  • Desktop
  • Different screen sizes

8. Use Version Control

Use Git to track changes. This makes it easier to manage updates, collaborate with other developers, and roll back if something breaks.

9. Document Your Theme

Add comments and documentation for custom features. If a client or another developer works on the theme later, documentation will save time.

10. Keep Security in Mind

Use escaping, sanitization, nonces, and WordPress APIs properly.

Examples:

esc_html()
esc_url()
esc_attr()
wp_kses_post()
sanitize_text_field()
check_admin_referer()

Security should be part of every theme development workflow.

Underscores vs Other WordPress Starter Themes

Underscores is not the only starter theme available. Depending on your workflow, another starter theme may be a better fit.

Starter ThemeBest ForMain Benefit
Underscores (_s)Classic custom WordPress themesLightweight and flexible
SageAdvanced developersModern build workflow
UnderstrapBootstrap-based themesCombines starter theme structure with Bootstrap
WP RigPerformance-focused themesBuild-process-oriented workflow
Block theme starterFull Site Editing projectsBetter for block-first WordPress websites

Choose Underscores if you want a simple and flexible classic theme starter. Choose Sage or other advanced starters if you want a modern development stack. Choose a block theme starter if the project is focused on Full Site Editing.

When Should You Use Underscores?

Use Underscores when:

  • You are building a custom WordPress theme.
  • You want clean PHP-based templates.
  • You want full control over design and code.
  • You do not want a heavy multipurpose theme.
  • You are comfortable editing PHP, CSS, and JavaScript.
  • You want a lightweight foundation.
  • You are building a custom client website.
  • You want to learn WordPress theme development properly.

Do not use Underscores if:

  • You want a finished theme immediately.
  • You do not want to write code.
  • You need drag-and-drop full-site editing.
  • You want a theme with built-in design options.
  • You prefer page builder-based development.
  • You need a fully block-based theme from the beginning.

WordPress Underscores Theme Development Checklist

Before launching your Underscores-based theme, review this checklist.

Basic Setup

  • Theme name updated
  • Theme slug updated
  • Text domain updated
  • Theme screenshot added
  • Theme description updated
  • Theme version added
  • License information included

Theme Features

  • Title tag support added
  • Featured image support added
  • Custom logo support added
  • Navigation menus registered
  • Widget areas registered
  • HTML5 support added
  • Responsive embeds enabled
  • Translation files prepared

Template Files

  • index.php tested
  • single.php tested
  • page.php tested
  • archive.php tested
  • search.php tested
  • 404.php tested
  • comments.php tested
  • Template parts organized

SEO

  • Proper heading structure used
  • Clean semantic HTML added
  • Images optimized
  • Alt text added
  • Breadcrumb support considered
  • Schema support considered
  • Internal linking areas added

Performance

  • CSS optimized
  • JavaScript optimized
  • Images compressed
  • Scripts loaded only when needed
  • Caching tested
  • Core Web Vitals checked

Accessibility

Security

  • Output escaped
  • User input sanitized
  • Nonces used where needed
  • No unnecessary theme options exposed
  • WordPress APIs used properly

Final Testing

  • Tested on mobile
  • Tested on tablet
  • Tested on desktop
  • Tested across browsers
  • Tested with real content
  • Tested with long menus
  • Tested with missing images
  • Tested with comments enabled
  • Tested with plugins active

Conclusion

WordPress Underscores theme development is one of the best ways to build a custom classic WordPress theme with full control over design, code, performance, and structure. Instead of starting from zero, Underscores gives you a clean foundation with essential files, template parts, theme functions, navigation support, starter CSS, and organized structure.

The most important thing to remember is that Underscores is a starter theme, not a parent theme. You should rename it, customize it directly, and turn it into your own custom WordPress theme.

If you want a lightweight, flexible, developer-friendly foundation for custom WordPress theme development, Underscores is still a strong choice in 2026. It works especially well for developers who want to understand WordPress theme structure, control template files, optimize performance, and build client-specific websites without unnecessary bloat.

Whether you are building a business website, portfolio, blog, agency website, or custom client project, Underscores gives you a practical starting point. With the right setup, clean code, responsive design, SEO optimization, accessibility improvements, and proper testing, you can turn the _s starter theme into a professional WordPress theme that is fast, scalable, and easy to maintain.

FAQs

What is the Underscores theme in WordPress?

Underscores, also called _s, is a starter theme for WordPress. It provides a clean and minimal foundation for building custom WordPress themes. Developers use it to create fully customized themes without starting from an empty folder.

Is Underscores a parent theme?

No. Underscores is not meant to be used as a parent theme. It is a starter theme that you customize directly and turn into your own theme.

Is Underscores still relevant in 2026?

Yes. Underscores is still useful for classic WordPress theme development, especially when developers want PHP-based templates, full code control, and a lightweight custom theme foundation.

Can beginners use Underscores?

Yes, beginners can use Underscores, but basic knowledge of HTML, CSS, PHP, and WordPress theme structure is helpful. It is especially useful for learning how WordPress themes work behind the scenes.

What files are included in an Underscores theme?

Underscores includes core theme files such as style.css, functions.php, index.php, header.php, footer.php, single.php, page.php, archive.php, search.php, 404.php, and folders like inc, js, languages, and template-parts.

How do I customize an Underscores theme?

You customize an Underscores theme by editing its PHP templates, updating functions.php, writing custom CSS, adding JavaScript, registering menus and widget areas, and creating new template files based on WordPress template hierarchy.

Does Underscores support WooCommerce?

Underscores can be used for WooCommerce projects, especially if you generate it with WooCommerce boilerplate support. However, you may still need to customize WooCommerce templates and styles based on your store design.

What is the difference between Underscores and a block theme?

Underscores is mainly used for classic WordPress themes built with PHP templates, CSS, and JavaScript. A block theme uses block templates, theme.json, and the WordPress Site Editor for full-site customization.

Can I use theme.json with Underscores?

Yes, you can use some theme.json features in a classic theme to define editor settings, colors, typography, spacing, and block-related styles. However, Underscores does not become a full block theme just because you add theme.json.

Is Underscores good for SEO?

Underscores gives you a clean foundation, but SEO depends on how you build the final theme. To make an Underscores theme SEO-friendly, use semantic HTML, proper heading structure, optimized images, schema markup, fast-loading assets, mobile-friendly layouts, and clean internal linking.

Is Underscores better than a pre-built WordPress theme?

It depends on your goal. Underscores is better if you want a fully custom theme and have development skills. A pre-built theme is better if you want a quick website without coding.

How do I make an Underscores theme responsive?

Use mobile-first CSS, flexible layouts, responsive images, media queries, and proper testing across devices. Also test navigation, sidebars, forms, images, and footer sections on different screen sizes.

How do I add CSS and JavaScript in Underscores?

Use wp_enqueue_style() and wp_enqueue_script() in functions.php. This is the proper WordPress method for loading theme assets.

What are the best alternatives to Underscores?

Popular alternatives include Sage, Understrap, WP Rig, and block theme starters. The best choice depends on your development workflow and project requirements.

This page was last edited on 30 June 2026, at 4:08 pm