Theme from scratch setup in Wordpress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this WordPress theme file output?

Given this index.php file in a new WordPress theme folder, what will the browser display when visiting the homepage?

Wordpress

<?php
// index.php
get_header();
?>
<h1>Welcome to my theme!</h1>
<?php
get_footer();
?>

A The page shows the header content, then 'Welcome to my theme!' as a heading, then the footer content.

B The page is blank because get_header() and get_footer() are undefined.

C Only 'Welcome to my theme!' is shown, no header or footer content.

D The page shows an error because PHP tags are not closed properly.

💡 Hint

Think about what get_header() and get_footer() do in WordPress themes.

The get_header() function loads the header.php file, and get_footer() loads footer.php. So the page shows header content, then the heading, then footer content.

📝 Syntax

intermediate

Which option correctly registers a new WordPress theme stylesheet?

Choose the correct code snippet to enqueue a stylesheet named style.css in a WordPress theme.

A

function theme_styles() {
  wp_enqueue_style('theme-style', 'style.css');
}
add_action('init', 'theme_styles');

B

function theme_styles() {
  wp_enqueue_script('theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'theme_styles');

C

function theme_styles() {
  wp_register_style('theme-style', get_template_directory());
}
add_action('wp_enqueue_scripts', 'theme_styles');

D

function theme_styles() {
  wp_enqueue_style('theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'theme_styles');

💡 Hint

Remember to use wp_enqueue_style and the right hook for loading stylesheets.

Option D correctly uses wp_enqueue_style with get_stylesheet_uri() to load the main stylesheet and hooks into wp_enqueue_scripts.

❓ state_output

advanced

What is the output of this WordPress loop in a theme file?

Consider this code inside a theme template file. What will it output if there are 3 posts?

Wordpress

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

A The text 'No posts found.' because the loop is incorrect.

B A single <h2> with all post titles concatenated inside.

C Three post titles each wrapped in <h2> tags.

D An error because the_post() is called outside the loop.

💡 Hint

Think about how the WordPress Loop works to display posts.

The loop runs once per post. For 3 posts, it outputs 3 <h2> elements with each post's title.

🔧 Debug

advanced

Why does this WordPress theme not load the stylesheet?

Given this code in functions.php, why does the stylesheet not appear on the site?

Wordpress

function load_styles() {
  wp_enqueue_style('main-style', get_template_directory_uri() . '/style.css');
}
add_action('init', 'load_styles');

A Because the hook 'init' is too early; styles should be enqueued on 'wp_enqueue_scripts'.

B Because <code>get_template_directory_uri()</code> returns the wrong path; should use <code>get_stylesheet_directory_uri()</code>.

C Because the style handle 'main-style' is reserved and cannot be used.

D Because <code>wp_enqueue_style</code> requires a third argument for dependencies.

💡 Hint

Check the recommended hook for enqueuing styles in WordPress.

The 'init' hook runs too early for enqueuing styles. The correct hook is 'wp_enqueue_scripts'.

🧠 Conceptual

expert

What is the purpose of the functions.php file in a WordPress theme from scratch?

Choose the best description of what functions.php does in a custom WordPress theme.

A <p>It is only used to define global variables accessible in templates.</p>

B <p>It acts like a plugin to add theme features, register menus, enqueue scripts/styles, and modify WordPress behavior.</p>

C <p>It automatically generates the theme's CSS styles based on PHP variables.</p>

D <p>It stores all the HTML markup for the theme's pages and templates.</p>

💡 Hint

Think about how WordPress themes add functionality beyond templates.

The functions.php file is loaded by WordPress to add features, register menus, enqueue assets, and customize behavior, similar to a plugin but theme-specific.

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