Theme from scratch setup in Wordpress - Deep Dive

Overview - Theme from scratch setup

What is it?

A WordPress theme from scratch setup means creating a new website design starting with no pre-made templates or code. It involves building all the files and styles needed for a theme to work in WordPress. This lets you fully control how your site looks and behaves. You start with basic files and add features step-by-step.

Why it matters

Without building a theme from scratch, you rely on pre-made themes that may not fit your exact needs or slow your site down. Creating your own theme solves the problem of limited customization and helps you learn how WordPress works under the hood. It empowers you to make unique websites that perform well and match your vision.

Where it fits

Before this, you should know basic HTML, CSS, and some PHP. Understanding how WordPress works, like its template system and functions, helps a lot. After learning theme setup, you can explore advanced topics like theme customization, child themes, and block-based themes.

Mental Model

Core Idea

A WordPress theme from scratch is a set of files that tell WordPress how to display your site’s content and style it exactly how you want.

Think of it like...

Building a theme from scratch is like designing and painting your own house instead of buying a ready-made one. You decide every room’s layout, colors, and decorations.

┌─────────────────────────────┐
│ WordPress Theme Structure    │
├───────────────┬─────────────┤
│ style.css     │ Controls    │
│               │ theme info  │
├───────────────┼─────────────┤
│ index.php     │ Main layout │
├───────────────┼─────────────┤
│ functions.php │ Adds features│
├───────────────┼─────────────┤
│ header.php    │ Top section │
├───────────────┼─────────────┤
│ footer.php    │ Bottom part │
└───────────────┴─────────────┘

Build-Up - 7 Steps

1

Foundation

Create basic theme folder and files

Concept: Start by making a new folder and adding the minimum files WordPress needs to recognize a theme.

1. In your WordPress installation, go to wp-content/themes. 2. Create a new folder named 'mytheme'. 3. Inside 'mytheme', create a file named style.css. 4. Add theme header info in style.css: /* Theme Name: My Theme Author: Your Name Version: 1.0 */ 5. Create an empty index.php file. This minimal setup lets WordPress detect your theme in the admin panel.

Result

WordPress shows 'My Theme' as an available theme to activate.

Understanding that WordPress needs just a style.css with header info and an index.php file to recognize a theme is the foundation for all theme development.

2

Foundation

Add basic HTML structure in index.php

Concept: Put simple HTML in index.php to display a page structure when the theme is active.

Welcome to My Theme

This is a basic page.

Result

When you activate the theme and visit the site, you see a page with a heading and paragraph.

Seeing your HTML output confirms the theme files are connected and working, building confidence to add WordPress features next.

3

Intermediate

Use WordPress template tags for dynamic content

🤔Before reading on: do you think static HTML or WordPress template tags are better for showing site info? Commit to your answer.

Concept: Replace static text with WordPress functions that pull site info dynamically.

Result

The site title and description come from WordPress settings, so changing them in admin updates the page automatically.

Using template tags connects your theme to WordPress data, making your site flexible and easy to update without changing code.

4

Intermediate

Split theme into template parts

🤔Before reading on: do you think putting all code in one file or splitting into parts is better for maintenance? Commit to your answer.

Concept: Break the theme into smaller files like header.php and footer.php to organize code and reuse parts.

1. Create header.php with: 2. Create footer.php with: 3. Modify index.php to:

Result

The page loads with header and footer included, making the code cleaner and easier to manage.

Splitting templates into parts follows WordPress best practices and helps maintain large themes efficiently.

5

Intermediate

Add functions.php to enable theme features

🤔Before reading on: do you think themes can add features without extra files? Commit to your answer.

Concept: Use functions.php to add support for features like menus and post thumbnails.

Result

WordPress now allows menus and featured images in the admin, enhancing theme capabilities.

functions.php is the gateway to extend your theme’s power and integrate WordPress features cleanly.

6

Advanced

Implement WordPress Loop to show posts

🤔Before reading on: do you think posts display automatically or need special code? Commit to your answer.

Concept: Use the WordPress Loop in index.php to display blog posts dynamically.

No posts found.

Result

The homepage shows all blog posts with their titles and content, updating automatically as posts change.

Mastering the Loop is essential because it controls how WordPress outputs content, making your theme dynamic.

7

Expert

Add support for block editor and enqueue scripts

🤔Before reading on: do you think themes need special code to work with the block editor? Commit to your answer.

Concept: Enable block editor styles and properly load CSS/JS files using enqueue functions.

Result

Your theme loads styles and scripts correctly on the site and in the block editor, ensuring consistent appearance and functionality.

Properly enqueuing assets and supporting the block editor is crucial for modern themes to work well and avoid conflicts.

Under the Hood

WordPress detects themes by looking for a style.css file with a theme header in the wp-content/themes folder. When a theme is active, WordPress loads its template files in a specific order to build pages. functions.php runs early to add features or modify behavior. Template tags call WordPress core functions to fetch data like site info or posts. The Loop queries the database for posts and outputs them. Enqueue functions add CSS and JS files safely to avoid conflicts.

Why designed this way?

This design separates content, style, and logic for flexibility and maintainability. Using template parts and hooks allows developers to customize without changing core WordPress code. The enqueue system prevents duplicate or conflicting scripts. The Loop abstracts database queries so themes don’t need direct SQL. This modular approach evolved to support a wide variety of sites and developers.

┌─────────────────────────────┐
│ wp-content/themes/mytheme    │
├───────────────┬─────────────┤
│ style.css     │ Theme info  │
├───────────────┼─────────────┤
│ functions.php │ Adds features│
├───────────────┼─────────────┤
│ header.php    │ Header part │
├───────────────┼─────────────┤
│ index.php     │ Main layout │
├───────────────┼─────────────┤
│ footer.php    │ Footer part │
└───────────────┴─────────────┘
        ↓
┌─────────────────────────────┐
│ WordPress Core Loads Theme   │
├─────────────────────────────┤
│ 1. Load functions.php        │
│ 2. Load template parts       │
│ 3. Run Loop to get posts     │
│ 4. Output HTML to browser    │
└─────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do you think a theme must have many files to work? Commit to yes or no.

Common Belief: A WordPress theme needs many complex files and folders to function.

Reality: A theme only needs two files: style.css with header info and index.php to be recognized and work minimally.

Why it matters: Believing themes must be complex can discourage beginners from starting or cause unnecessary work.

Quick: Do you think you can just copy HTML into index.php and expect WordPress features to work? Commit to yes or no.

Common Belief: Static HTML in theme files is enough to build a WordPress site.

Reality: Without WordPress template tags and the Loop, the theme cannot show dynamic content like posts or site info.

Why it matters: Ignoring WordPress functions leads to static sites that don’t update with content changes, defeating the purpose of WordPress.

Quick: Do you think functions.php is optional and only for advanced themes? Commit to yes or no.

Common Belief: functions.php is not necessary unless you want fancy features.

Reality: functions.php is essential to enable basic WordPress features like menus and thumbnails and to enqueue styles/scripts properly.

Why it matters: Skipping functions.php causes missing features and broken styles, making the theme incomplete or buggy.

Quick: Do you think enqueuing styles/scripts is optional and you can just add or