• Classic themes: Edited using classic editor, or third party plugins like elementor. Has Widget, menus
  • Block Themes: Introduced FSE

Is it important to have index.php in wordpress themes?

Yes, it is still strictly required. If you are building a theme using the traditional PHP method (the way themes have been built for 20 years), WordPress still looks for index.php as the primary fallback. Without it, the theme is considered “broken” and cannot be activated.

In Block Themes (Full Site Editing / FSE), Technically, no—but it’s complicated. In modern Block Themes, the “new” required file is templates/index.html.

  • The New Rule: A block theme only needs style.css and templates/index.html to function.
  • The Catch: Even in the newest versions, many developers still include an empty index.php file in the root directory.

style.css has the theme header. index.php is the main template files single.php, single-post.php, archive.php file

theme.json file is used to centralize theme metadata. Available in both classic and block theme

At its core, a WordPress theme is a collection of files (PHP, CSS, JS, and images) that work together to produce a graphical interface. It dictates everything from your typography and color palette to the positioning of your sidebars and footers.

functions.php)

This file acts like a “mini-plugin” for your theme. It’s used to:

  • Enqueue scripts and styles.
  • Register navigation menus and sidebars.
  • Enable theme features (like post thumbnails or custom logos).
  • Define custom hooks and filters.

Common Directory Structure

For a professional theme, you’ll usually see an organization like this: - /assets/ (or /dist/): Contains compiled CSS, JS, and images. - /inc/: Custom PHP functions or logic broken into smaller files. - /template-parts/: Reusable HTML chunks (e.g., content-hero.php). - index.php: The fallback template. - screenshot.png: The thumbnail seen in the WordPress dashboard.

  • Directory Structure: Take note of the files/folders marked required because they are necessary for a block theme to work:
    • parts/
      • footer.html
      • header.html
    • patterns/
      • example.php
    • styles/
      • example.json
    • templates/
      • 404.html
      • archive.html
      • index.html (required)
      • singular.html
    • README.txt
    • functions.php
    • screenshot.png
    • style.css (required)
    • theme.json

The Template Hierarchy

This is the “logic tree” WordPress uses to decide which file to display. When a user visits a page, WordPress looks for the most specific file possible. If it doesn’t find it, it moves down the list to a more general one.

Example: A Category Page (ID: 5)

  1. category-5.php (Most specific)

  2. category-slug.php

  3. category.php

  4. archive.php

  5. index.php (The “catch-all” fallback)

You should never hardcode <link> or <script> tags into your header.php. Instead, you use Enqueuing. This prevents conflicts (like loading jQuery five times because of different plugins).

Network Enable: A Network Admin can “Network Enable” a theme, making it available for all sites in the network. Alternatively, they can enable it only for a specific sub-site. Updating a theme in the network admin updates it for every site using it.

In Multisite, it is very common to use a Parent Theme for the core engine and Child Themes for individual sites to handle minor CSS or branding tweaks.

  • Child theme have parent theme name in Template key.
/**
 * Theme Name: Grand Sunrise
 * Template:   fabled-sunset
 * ...other header fields
 */

These are some of the common templates you will find a theme:

  • index.html: The fallback template file. It is required in all themes.
  • 404.html: The 404 template is used when WordPress cannot find a post, page, or other content that matches the visitor’s request.
  • archive.html: The archive template is used when visitors request posts by archive-type views like category, author, or date and a more-specific template is unavailable.
  • author.html: The author page template is used whenever a visitor loads an author archive.
  • category.html: The category template is used when visitors request posts by category.
  • page.html: The page template is used when visitors request individual pages.
  • search.html: The search results template is used to display a visitor’s search results.
  • single.html:  The single post template is used when a visitor requests a single post.
  • tag.html: The tag template is used when visitors request posts by tag.
<?php
add_action( 'after_setup_theme', 'theme_slug_setup' );

function theme_slug_setup() {
	add_theme_support( 'wp-block-styles' );
}

You should always use these helper functions when including any type of asset to ensure the URL or path is correct.

Three of the primary URL helper functions are:

If you were enqueuing a stylesheet located at /assets/css/example.css in your theme, your function call might look like this:

wp_enqueue_style( 
	'theme-slug-example',
	get_parent_theme_file_uri( 'assets/css/example.css' ),
	array(),
	wp_get_theme()->get( 'Version' ),
	'all'. //`all` (default), `screen`, `print`, or `handheld`.
);

# enqueue js
function my_theme_scripts() {
    wp_enqueue_script(
        'custom-js',
        get_template_directory_uri() . '/js/custom.js',
        array('jquery'),
        '1.0',
        true # $in_footer – true loads before </body>, false loads in <head>
    );
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

# enqueue css
function my_theme_styles() {
    wp_enqueue_style(
        'custom-style',
        get_template_directory_uri() . '/style.css',
        array(),
        '1.0',
        'all'
    );
}
add_action('wp_enqueue_scripts', 'my_theme_styles');

# enqueue inline style
$custom_css = "
	body {
		background-color: #f5f5f5;
	}
	.site-title {
		color: #ff0000;
	}
";

wp_add_inline_style('main-style', $custom_css);

# sample index.php
<?php
   get_header();
   get_sidebar();
      if ( have_posts() ) :
         while ( have_posts() ) :
            the_post();
               the_content();
         endwhile;
	  else : echo '<p>Sorry, no posts matched your criteria.</p>';
      endif;
   get_footer();
?>

structure

  • index.php
  • style.css
  • /css/
    • mobile.css
    • print.css
  • /img/
    • facebook.png
    • twitter.png
  • /js/
    • lightbox.js
    • slider.js

![[Pasted image 20260217133503.png]]

![[Pasted image 20260217134138.png]]

  • For each page type, the template hierarchy has a different workflow. This is how it plays out for a front-page:
    1. front-page.php
    2. home.php 
    3. Index.php
  • To create a single post, WordPress uses the following path:
    1. single-{post-type}-{slug}.php
    2. single-{post-type}.php
    3. single.php
    4. singular.php
    5. index.php
  • A single page follows this hierarchy:
    • Custom template file
    • page–{slug}.php
    • page-{id}.php
    • page.php
    • singular.php
    • index.php

get_the_title()

Returns the title of a specific post or page.

Used inside The Loop (or with a post ID).

echo get_the_title();

wp_title()

Used to output the document <title> tag content (browser tab title).

Historically used in:

<title><?php wp_title(); ?></title>

Modern WordPress (since 4.1+) uses:

add_theme_support( 'title-tag' );

functions.php is your theme’s functionality file.

Think of it like the theme’s mini-plugin.

It’s used to: - Enqueue scripts/styles - Add theme support - Register menus - Register sidebars - Add hooks & filters - Define custom functions

  • It loads before any template file
  • It loads on every page request (front-end)

add_action('after-setup-theme', 'myfun')

  • init hook is executed after this hook. So, dont put themes there.

add_theme_support('automatic-feed-links') add_theme_support('title-tag')

add_theme_support('post-formats', array('link', 'aside', 'video'))

add_theme_support('post-thumbnails') add_theme_support('custom-background')

add_theme_support('custom-logo', array('height' => 20, 'width' => 20))