Step by Step Guide: WordPress Theme Creation

WordPress‘s popularity stems from its flexibility and extensibility. With thousands of free themes and plugins available, users can shape their websites according to their specific needs. 

The platform has evolved significantly with the introduction of block themes that let users design entire sites visually, without touching code. Classic themes, the traditional code-based approach, remain widely used and fully supported.

In this guide, we’ll walk you through both approaches, starting with block theme creation as the default route in modern WordPress, and then exploring classic theme development for those who prefer a more traditional, code-based method.

An introduction to WordPress theme development

Custom WordPress themes transform ordinary websites into unique digital experiences. When existing themes can’t meet your specific requirements, developing your own gives you complete control over both design and functionality.

WordPress now supports two distinct approaches to theme development:

Block themes (the modern default since WordPress 5.9)

Block themes work seamlessly with Full Site Editing (FSE), allowing you to design entire websites visually through WordPress’s Site Editor. They use HTML template files, a theme.json configuration file, and visual editing without requiring PHP knowledge.

Classic themes (traditional PHP-based approach)

Classic themes follow the traditional template system, offering granular control for advanced developers. They use PHP template files like header.php, footer.php, and index.php with the traditional template hierarchy system.

When to choose which?

What basic skills and prerequisites are needed to create a WordPress theme? 

The skills you need depend on your chosen approach. Block theme development requires primarily HTML and CSS knowledge, making it accessible to designers and non-developers. Classic theme development demands stronger PHP skills for advanced customization.

Essential coding languages:

Each coding language serves a specific purpose in WordPress theme development:

• HTML (HyperText Markup Language): forms the backbone of your theme’s structure. It creates the framework that holds your content, defining elements like headings, paragraphs, links, and images.
• CSS (Cascading Style Sheets): Controls colors, typography, spacing, animations, and responsive layouts.
• PHP (Hypertext Preprocessor): Powers WordPress and connects your theme to the WordPress core, retrieving content from the database and creating dynamic elements.
• JavaScript: Adds interactivity through features like dropdown menus, image sliders, and form validation.

Here are some articles that you can refer to for more information:

• The Four Languages You Must Know to Understand WordPress
• How to Edit WordPress Code – HTML, CSS, PHP

Setting up your development environment

Creating a WordPress theme requires a safe playground for experimentation. Setting up WordPress locally gives you a private workspace where you can build, break, and fix things without affecting any live websites.

Pick a local development tool:

• Local: Free and perfect for beginners with its clean interface and one-click installation.
• XAMPP: A reliable cross-platform solution that works on any operating system.
• MAMP: A Mac-friendly option with an intuitive setup process.
• Docker: An advanced but powerful option that isolates projects completely and matches production environments closely.

Create your WordPress site:

1. Download WordPress from wordpress.org (unless your tool does this automatically) and start the installation.

2. Follow the installation wizard to complete the setup.

3. Log in to your dashboard at localhost/your-site/wp-admin

Choose your development tools:

You’ll also need a code editor like Visual Studio Code, or Sublime Text for writing code efficiently, and browser developer tools (right click→Inspect or press F12 in Chrome or Firefox) for testing and debugging your theme.

Decide your approach:

You can build a theme from scratch, modify a starter theme, or use a WordPress theme builder – each approach has different requirements.

This local environment gives you the freedom to experiment boldly with theme code without risking live websites or needing an internet connection.

For more guidance on your development journey, check out our detailed guides on WordPress development, WordPress development tools, and WordPress minimum requirements.

Modern WordPress theme development (Block Themes & FSE)

Block themes represent the future of WordPress theme development. In this section, we’ll explore what makes block themes powerful and walk you through creating one using the recommended method.

Understanding block themes and FSE

Block themes are WordPress’s modern theme format, designed to work seamlessly with the Gutenberg block editor and FSE. Unlike classic themes, which rely on PHP template files like header.php, index.php, and footer.php, block themes use HTML files for templates and a centralized theme.json file for styling and settings.

What sets block themes apart:

• Visual editing capabilities: Make design changes directly through WordPress’s Site Editor without writing code. You can modify entire templates, adjust layouts, customize colors and typography, and arrange blocks exactly how you want them.
• Advanced Gutenberg integration: Block themes are designed to work seamlessly with the Gutenberg ecosystem. This includes support for custom blocks built with React, advanced editor integration features, and the ability to control which blocks are available in different contexts. For developers, this opens up possibilities for creating custom blocks that integrate perfectly with your theme’s design system.

• Modern CSS architecture: Block themes leverage CSS custom properties (CSS variables) through the theme.json file, creating maintainable design systems that ensure consistency across your entire theme.

• Simplified structure: Templates are written in HTML and stored in a /templates directory, while reusable components go in /parts. The theme.json file centralizes your design system, controlling typography, colors, spacing, and layout settings across your entire theme.

Powerful editing tools at your disposal:

The Site Editor lets you edit entire templates visually, from homepage layouts to 404 pages and archive templates. You can modify header and footer elements, create custom template parts, and preview changes in real time.

Block Patterns are pre-designed layouts you can insert anywhere in your site. WordPress includes several defaults, and you can create custom patterns to speed up design workflows. Reusable Blocks work similarly but update globally – change the block once, and it updates everywhere it’s used.

Global Styles give you real-time control over your site’s design system through the Site Editor. Change colors, fonts, and spacing globally or on a per-block basis, with all settings stored in the theme.json file for consistency.

A typical block theme includes:

• templates/index.html – the main layout file.
• parts/ – reusable template parts like headers and footers.
• theme.json – the configuration file that controls styles, layout settings, and editor options.
• style.css – for theme metadata and optional custom CSS.

Step by step: Create a custom theme using the Create Block Theme plugin

The easiest way to create your own block theme is to use the Create Block Theme plugin.

Installing and setting up the plugin

First, install the Create Block Theme plugin from your WordPress dashboard by navigating to Plugins > Add New and searching for “Create Block Theme.”

Once activated, you’ll find the plugin options under Appearance > Create Block Theme.
Creating your custom theme

1. Choose your starting point: Begin with a blank theme or use your currently active theme as a foundation.

2. Customize using the Site Editor: Navigate to Appearance > Site Editor to visually design your theme. Here you can modify templates, adjust layouts, customize colors and typography, and arrange blocks exactly how you want them.

3. Export your theme: Once satisfied with your design, return to Appearance > Create Block Theme and click “Export.” The plugin will generate a complete theme package ready for download or direct installation.

Traditional theme development (Classic themes)

Classic themes remain valuable for developers who need deep PHP-level customization or are working with complex functionality requirements.

Classic themes use a three-part architecture that works together like the systems in a house:

• Template files (the blueprint): Define what goes where – header.php, footer.php, index.php, etc. control the structure and layout.
• style.css (the design): Makes everything beautiful with colors, typography, spacing, and visual styling.
• functions.php (the features): Adds functionality like custom menus, widget areas, and theme-specific capabilities.

Classic themes are still very much part of the WordPress ecosystem, and for many advanced use cases, they’re the best fit.

When to choose classic theme development

Classic themes are ideal in scenarios where PHP-driven control goes beyond what block themes can offer. Consider classic theme development for:

• Advanced PHP customization: When you need full control over WordPress hooks, filters, and server-side logic that can’t be handled through visual editing tools.
• Complex functionality: Sites with intricate data models, multiple custom post types, advanced filtering, or unique workflows.
• Legacy compatibility: If you’re maintaining or extending an older site built with a classic theme, or need compatibility with legacy plugins that don’t work well with block themes.
• Developer preference: If you prefer a code-first workflow, using your own editors, frameworks, and version control tools to build themes exactly to your specifications.

Template hierarchy system

WordPress follows a specific hierarchy when choosing which template to display. For instance, when someone views a single blog post, WordPress searches for the most specific template available, falling back to more general templates:

Step by step: How to build a custom WordPress theme from scratch

1. Create your theme directory in wp-content/themes/ with a descriptive name like my-custom-theme.

2. Write an index.php and style.css file: Create index.php as your core template file and style.css with the required header comment containing theme information. Index.php will link to various elements of your site using WordPress ‘hooks’, creating the basic structure of your theme. For example:

<?php get_header(); ?>

<h1><?php the_title(); ?></h1>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

The style.css file is the heart of your theme’s visual design, housing all your CSS rules. Crucially, it also contains a header comment section that WordPress uses to understand your theme. Create a ‘style.css’ file and save it in your theme’s subfolder. Include the following information in the header comment:

/*

Theme Name: My Theme

Author: Your Name

Description: A brief description of your theme.

Version: 1.0

*/

3. Utilize ‘The Loop‘ in your index.php: Incorporate WordPress’s Loop to fetch and display posts from your database.

4. Enqueue your style.css in a functions.php file: Create functions.php and use wp_enqueue_style() to properly load your stylesheet. In this file, you will ‘enqueue’ your stylesheet with the following PHP code snippet:

<?php

function theme_styles() {

    wp_enqueue_style( 'style', get_stylesheet_uri() );

}

add_action( 'wp_enqueue_scripts', 'theme_styles' );

?>

This tells WordPress to look for a file named ‘style’ and load it, applying your custom styles to the theme.

5. Add specialized template files: Create these additional templates to enhance your theme’s functionality:

• single.php: For individual blog posts.
• page.php: For static pages.
• archive.php: For category and tag archives.
• 404.php: For error pages.
• header.php: Contains opening HTML and navigation.
• Footer.php: Contains closing HTML and footer content.

Conditional tags help you display different content based on the current page context. Use functions like is_home(), is_single(), or is_page() to customize content display.

6. Implement navigation and user experience 

Add navigation menus and focus on creating clear navigation paths, readable typography, and responsive design that works across all devices. Good UX design ensures visitors can easily find what they’re looking for while enjoying their experience on your site.

Step by step: How to develop a theme using a WordPress starter theme

1. Choose and install your WordPress starter theme: Select a starter theme like  Underscores, Sage, or  UnderStrap that aligns with your skills and project requirements.

2. Determine the layout, design, and customization: Envision your theme’s layout and customize template files like header.php, index.php, and footer.php along with the style.css file.

3. Enhance theme functionality with JavaScript and PHP hooks: Add dynamic elements with JavaScript and extend WordPress functionality using action and filter hooks.

4. Test the theme and prepare for deployment: Conduct thorough testing using Theme Test Data and ensure adherence to WordPress Codex guidelines before deployment.

The Alternative to Developing a Custom WordPress Theme

While building a custom theme offers complete control, it’s not the right path for everyone. If you want a unique, professional theme but lack the time or technical expertise to build one yourself, hiring a skilled WordPress developer is a smart alternative.

Why consider professional development?

Custom theme development requires a significant time investment and deep technical knowledge. Professional developers bring:

• Expertise in WordPress best practices and modern development techniques.
• Efficiency: Experienced developers can complete projects much faster than beginners.
• Quality assurance: Professional themes are tested, optimized, and built to last.
• Ongoing support: Developers can handle updates, fixes, and future modifications.

Finding the right developer

The challenge lies in finding developers who truly understand WordPress theme development. Generic freelance platforms often mix WordPress experts with general web developers, making it difficult to identify the right skill set for your project.

The Codeable advantage

Codeable specializes exclusively in WordPress development, connecting you with pre-vetted experts who have proven WordPress expertise. Instead of sifting through hundreds of general developers, you get matched with WordPress specialists who understand:

• Modern WordPress development practices.
• Performance optimization techniques.
• Security considerations.
• Responsive design requirements.
• SEO best practices.

Each Codeable expert has been thoroughly tested on WordPress-specific skills, ensuring you work with someone who can deliver a professional, well-coded theme that meets your exact specifications.

Your theme forms the foundation of your entire website experience. Getting it right from the start saves time, money, and frustration down the road. Working with WordPress experts ensures your custom theme not only looks great but also performs reliably for years to come.

Best practices and optimization techniques

Creating a functional theme is just the beginning. Professional WordPress themes excel through careful attention to user experience, performance, and technical optimization. These practices ensure your theme not only looks great but also performs well in search engines and provides an excellent experience for all users.

Responsive design and accessibility

Modern websites must work seamlessly across all devices and for all users. Here’s how to implement this effectively:

Responsive Design Implementation:

• Use modern CSS layout techniques like Flexbox and Grid for flexible layouts that adapt naturally to different screen sizes.
• Implement fluid typography with CSS clamp() for text that scales smoothly: font-size: clamp(1rem, 2.5vw, 2rem).
• Set responsive images with max-width: 100% and use WordPress’s built-in responsive image features.
• Test your theme using browser developer tools, device emulation, and actual devices.

Accessibility best practices:

• Follow WCAG 2.2 AA guidelines as your baseline standard.
• Ensure keyboard navigation works for all interactive elements (test by navigating with the Tab key only).
• Maintain color contrast ratios of at least 4.5:1 for normal text and 3:1 for large text (Level AA). For enhanced accessibility (Level AAA), higher contrast ratios are recommended – 7:1 for normal text and 4.5:1 for large text.
• Use semantic HTML5 elements like <nav>, <main>, <article>, and <aside> instead of generic divs.
• Test with screen readers like NVDA (free) or VoiceOver (Mac) to ensure content flows logically.

SEO optimization

Search engine optimization should be built into your theme’s foundation rather than added as an afterthought. Focus on these core elements:

Technical SEO foundation:

• Use proper heading hierarchy (only one H1 per page, followed by H2s, then H3s).
• Implement semantic HTML5 structure with header, nav, main, article, and footer elements.
• Ensure fast loading times under 3 seconds (test with Google PageSpeed Insights).
• Generate valid HTML markup using the W3C Markup Validator.

Performance optimization:

• Minify CSS and JavaScript files.
• Optimize images automatically using WebP format with fallbacks.
• Limit database queries by avoiding unnecessary loops and using WordPress’s built-in caching.
• Enqueue scripts properly using wp_enqueue_script() instead of hardcoding in templates.

Content structure:

• Make title tags and meta descriptions easily editable through the WordPress admin.
• Add structured data (Schema.org) for rich snippets.
• Create breadcrumb navigation for a better user experience and SEO crawling.

Remember that SEO success comes from creating genuinely valuable content within a well-structured, fast-loading theme framework.

User experience and industry-specific customizations

User experience encompasses every interaction visitors have with your theme. Focus on intuitive navigation, clear visual hierarchy, and fast load times. Consider your target audience’s specific needs and browsing patterns when making design decisions.

Industry-specific customizations can significantly enhance your theme’s effectiveness. eCommerce themes need robust product display options and optimal checkout flows. Portfolio themes require stunning image galleries and project showcase capabilities. Business themes benefit from lead generation forms and service highlighting features.

The key is understanding your audience deeply and tailoring the user experience to match their expectations and goals. A well-designed theme guides users naturally toward desired actions while providing the information they need along the way.

Ready to build your custom theme?

WordPress theme development offers multiple pathways to success – from building themes completely from scratch using PHP and CSS, to leveraging modern block themes with Full Site Editing, or using tools like the Create Block Theme plugin for a visual approach.

Whatever option you choose, the most important step is starting. Your unique vision deserves a theme that matches your exact requirements.

If professional development makes more sense for your timeline and goals, Codeable connects you with WordPress specialists who understand modern theme development. Our experts can bring your vision to life while you focus on your business.

Ready to get started? Submit your project idea and receive a free estimate from WordPress experts who can turn your theme concept into reality!

20 000+ businesses of every shape and size have already trusted us to hire WordPress developers and scale their growth.

Find a WooCommerce expert

Dream It

Build It

Build a WordPress site you've always dreamed of

Join our newsletter Dream It, Build It for insights on how to get the most out of WordPress

Name:

Email:

Subscribe