Theme from scratch setup in Wordpress - Step-by-Step Execution

Concept Flow - Theme from scratch setup

Create theme folder

↓

Add style.css with theme info

↓

Add index.php as main template

↓

Add functions.php for setup

↓

Activate theme in WordPress admin

↓

Theme loads with basic page display

This flow shows the step-by-step process to create a WordPress theme from scratch, starting with folder creation and ending with theme activation and display.

Execution Sample

Wordpress

/* style.css */
/*
Theme Name: MyTheme
Author: Me
*/

<?php // index.php
get_header();
echo '<h1>Hello World</h1>';
get_footer();

This code sets up the minimal files: style.css with theme info and index.php that outputs a simple Hello World page.

Execution Table

Step	Action	File Affected	Result	Notes
1	Create folder wp-content/themes/mytheme	N/A	Folder created	Base for theme files
2	Add style.css with theme header info	style.css	Theme recognized by WordPress	Theme appears in admin themes list
3	Add index.php with basic template code	index.php	Page can render content	Minimal template to show output
4	Add functions.php (optional) for setup	functions.php	Theme can enqueue scripts/styles	Prepare for enhancements
5	Activate theme in WordPress admin	N/A	Site uses new theme	Theme is live and visible
6	Load site in browser	N/A	Displays Hello World heading	Confirms theme works
7	Exit	N/A	Setup complete	Theme from scratch ready

💡 Setup ends after theme activation and page load shows expected output

Variable Tracker

Variable/File	Start	After Step 2	After Step 3	After Step 4	After Step 5	Final
Theme Folder	None	Created	Created	Created	Created	Created
style.css	None	Added with header	Added	Added	Added	Added
index.php	None	None	Added with code	Added	Added	Added
functions.php	None	None	None	Added (optional)	Added	Added
Theme Active	No	No	No	No	Yes	Yes
Page Output	None	None	None	None	Hello World	Hello World

Key Moments - 3 Insights

Why do we need a style.css file with theme info?

WordPress uses style.css header to recognize and list the theme in the admin area, as shown in step 2 of the execution_table.

What happens if index.php is missing?

Without index.php, WordPress has no template to display content, so the site will show an error or blank page, unlike step 3 where index.php enables output.

Is functions.php mandatory for a theme?

No, functions.php is optional but recommended for adding scripts or setup. Step 4 shows it added for enhancements but theme works without it.

Visual Quiz - 3 Questions

Look at the execution_table, at which step does WordPress recognize the theme?

A Step 5

B Step 3

C Step 2

D Step 1

💡 Hint

Check the 'Result' column for step 2 about theme recognition

According to variable_tracker, what is the page output after step 3?

A Error

B None

C Hello World

D Blank page

💡 Hint

Look at the 'Page Output' row under 'After Step 3' column

If functions.php is not added, what changes in the execution_table?

A Step 4 is skipped or shows no file added

B Theme cannot be activated

C Site shows error on load

D Style.css is ignored

💡 Hint

Refer to step 4 in execution_table about functions.php addition

Concept Snapshot

WordPress theme from scratch setup:
1. Create theme folder in wp-content/themes
2. Add style.css with theme header info
3. Add index.php as main template
4. Optionally add functions.php for setup
5. Activate theme in admin
6. Load site to see output
Style.css header is required for recognition.

Full Transcript

To set up a WordPress theme from scratch, first create a new folder inside wp-content/themes. Then add a style.css file with the theme name and author info so WordPress can recognize it. Next, add an index.php file with basic PHP code to display content, like a Hello World heading. Optionally, add a functions.php file to enqueue scripts or add setup code. After these files are ready, activate the theme in the WordPress admin area. Finally, load the site in a browser to see the theme working. The style.css file is essential for WordPress to list the theme. The index.php file is needed to display any page content. Functions.php is optional but useful for enhancements.

Practice

1. What is the minimum required file to create a basic WordPress theme from scratch?

easy

A. style.css

B. functions.php

C. header.php

D. footer.php

Solution

1. Step 1: Understand WordPress theme basics

   A WordPress theme must have a style.css file to be recognized by WordPress.

2. Step 2: Identify the minimum files

   While index.php is also needed for templates, style.css is the absolute minimum to register the theme.

3. Final Answer:

   style.css -> Option A

4. Quick Check:

   Minimum theme file = style.css [OK]

Hint: Remember: style.css registers the theme in WordPress [OK]

Common Mistakes:

• Thinking functions.php is mandatory for a basic theme
• Confusing header.php as required initially
• Assuming footer.php is needed to start

2. Which of the following is the correct way to include the header template in a WordPress theme file?

easy

A. include('header.php');

B. load_header();

C. require('header.php');

D. get_header();

Solution

1. Step 1: Recall WordPress template functions

   WordPress provides get_header() to load the header.php template properly.

2. Step 2: Compare with PHP includes

   Using include or require bypasses WordPress hooks and is not recommended.

3. Final Answer:

   get_header(); -> Option D

4. Quick Check:

   Use get_header() to load header template [OK]

Hint: Use get_header() for proper WordPress header loading [OK]

Common Mistakes:

• Using PHP include instead of get_header()
• Trying to call a non-existent load_header() function
• Using require which skips WordPress hooks

3. Given this code snippet in index.php of a WordPress theme:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <h2><?php the_title(); ?></h2>
<?php endwhile; else : ?>
  <p>No posts found.</p>
<?php endif; ?>

What will be displayed if there are no posts?

medium

A. Nothing will be displayed

B. An error message

C. No posts found.

D. The titles of all posts

Solution

1. Step 1: Understand the have_posts() check

   The code checks if posts exist with have_posts(). If none, it runs the else block.

2. Step 2: Identify the else block output

   The else block outputs <p>No posts found.</p> when no posts exist.

3. Final Answer:

   No posts found. -> Option C

4. Quick Check:

   No posts triggers else output [OK]

Hint: If no posts, the else block runs showing 'No posts found.' [OK]

Common Mistakes:

• Assuming no output if no posts
• Expecting an error message instead
• Thinking titles show even if no posts

4. You created a new theme but WordPress shows a blank page. Which of the following is the most likely cause?

medium

A. Missing style.css file with theme header comment

B. Using get_footer() instead of footer.php

C. Calling get_header() twice in index.php

D. Not adding functions.php file

Solution

1. Step 1: Check theme registration requirements

   WordPress requires style.css with a proper header comment to recognize the theme.

2. Step 2: Understand blank page cause

   If style.css is missing or header comment is absent, WordPress won't load the theme, showing a blank page.

3. Final Answer:

   Missing style.css file with theme header comment -> Option A

4. Quick Check:

   Missing style.css causes blank theme page [OK]

Hint: Always include style.css with header comment to register theme [OK]

Common Mistakes:

• Thinking get_footer() usage causes blank page
• Assuming duplicate get_header() breaks theme
• Believing functions.php is mandatory for theme to load

5. You want to create a WordPress theme from scratch that shows a custom message only on the homepage and lists post titles on other pages. Which code snippet correctly implements this in index.php?

hard

A. <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php endwhile; else : ?>
<p>Welcome to my custom homepage!</p>
<?php endif; ?>

B. <?php if ( is_front_page() ) : ?>
<p>Welcome to my custom homepage!</p>
<?php else : if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php endwhile; endif; endif; ?>

C. <?php if ( is_home() ) : ?>
<p>Welcome to my custom homepage!</p>
<?php else : ?>
<h2>No posts to show</h2>
<?php endif; ?>

D. <?php if ( is_front_page() ) : ?>
<p>Welcome to my custom homepage!</p>
<?php endif; ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php endwhile; endif; ?>

Solution

1. Step 1: Use conditional tags correctly

   is_front_page() checks if the current page is the homepage to show the custom message.

2. Step 2: Show posts only on other pages

   Else block runs the loop to list post titles on non-homepage pages.

3. Step 3: Verify code structure

   <?php if ( is_front_page() ) : ?> <p>Welcome to my custom homepage!</p> <?php else : if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h2><?php the_title(); ?></h2> <?php endwhile; endif; endif; ?> nests the else with have_posts() loop correctly, showing message only on homepage.

4. Final Answer:

   The nested if-else code snippet -> Option B

5. Quick Check:

   Conditional homepage message + posts elsewhere = <?php if ( is_front_page() ) : ?> <p>Welcome to my custom homepage!</p> <?php else : if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h2><?php the_title(); ?></h2> <?php endwhile; endif; endif; ?> [OK]

Hint: Use is_front_page() for homepage, else loop for posts [OK]

Common Mistakes:

• Putting posts loop inside homepage condition
• Showing message only when no posts exist
• Not separating homepage and other pages logic