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.