Responsive theme patterns in Wordpress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does the WordPress theme handle responsive images?

Given a WordPress theme using add_theme_support('responsive-embeds') and add_theme_support('post-thumbnails'), what is the expected behavior when displaying images in posts on different screen sizes?

A Images are replaced by low-resolution placeholders on mobile devices only.

B Images remain fixed size and may overflow the container on small screens.

C Images automatically scale to fit the container width, maintaining aspect ratio on all devices.

D Images are hidden on screens smaller than 600px width.

💡 Hint

Think about how WordPress handles image sizes and container widths with responsive support enabled.

With add_theme_support('responsive-embeds') and post-thumbnails, WordPress ensures images scale fluidly within their containers, preserving aspect ratio across devices.

📝 Syntax

intermediate

Identify the correct CSS media query for mobile-first responsive design

Which CSS media query correctly applies styles only on screens wider than 768px, following mobile-first principles?

A @media only screen and (max-device-width: 768px) { /* styles here */ }

B @media (min-width: 768px) { /* styles here */ }

C @media screen and (width: 768px) { /* styles here */ }

D @media (max-width: 768px) { /* styles here */ }

💡 Hint

Mobile-first means starting with small screens and adding styles for larger screens.

Using @media (min-width: 768px) applies styles when the screen is at least 768px wide, which fits mobile-first design.

🔧 Debug

advanced

Why does the WordPress theme's navigation menu not collapse on small screens?

A WordPress theme uses a responsive navigation menu with a toggle button. On small screens, the menu stays expanded and the toggle button does not work. What is the most likely cause?

A The JavaScript file controlling the toggle is not enqueued or has a syntax error.

B The CSS media queries are missing the max-width condition for small screens.

C The menu HTML lacks the required ARIA attributes for accessibility.

D The theme does not declare support for responsive menus in functions.php.

💡 Hint

Check if the toggle button triggers any JavaScript and if the script is loaded correctly.

If the toggle button does not work, the JavaScript controlling it is likely missing or broken, preventing the menu from collapsing.

❓ state_output

advanced

What is the output of this WordPress theme function for responsive image sizes?

Consider this PHP code in a WordPress theme's functions.php:

function mytheme_setup() {
  add_theme_support('post-thumbnails');
  add_image_size('custom-size', 600, 400, true);
}
add_action('after_setup_theme', 'mytheme_setup');

// Later in template:
echo wp_get_attachment_image($attachment_id, 'custom-size');

What will be the size of the image rendered on a mobile device with a 320px wide screen?

Wordpress

function mytheme_setup() {
  add_theme_support('post-thumbnails');
  add_image_size('custom-size', 600, 400, true);
}
add_action('after_setup_theme', 'mytheme_setup');

// Later in template:
echo wp_get_attachment_image($attachment_id, 'custom-size');

A The image will scale down responsively to fit the screen width, keeping aspect ratio.

B The image will be cropped to 320x400 pixels on mobile devices.

C The image will not display because 'custom-size' is not a default size.

D The image will be 600x400 pixels regardless of screen size.

💡 Hint

Think about how WordPress image sizes and HTML image tags behave by default.

The add_image_size creates a fixed size image (600x400 cropped). Using wp_get_attachment_image with that size outputs an tag with fixed pixel dimensions. It does not automatically scale down on smaller screens unless CSS or srcset is used.

🧠 Conceptual

expert

Which WordPress feature best supports responsive theme patterns for dynamic content?

You want your WordPress theme to automatically serve different image sizes and embed content responsively without extra coding. Which built-in WordPress feature is designed specifically for this?

A The Responsive Images feature using srcset and sizes attributes.

B The Customizer API for live previewing theme changes.

C The REST API for fetching content asynchronously.

D The Widget API for adding sidebar content.

💡 Hint

Focus on how WordPress handles images and embeds responsively by default.

WordPress automatically adds srcset and sizes attributes to images to serve the best size for the device, enabling responsive images without extra work.