Style.css and theme metadata in Wordpress - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the purpose of the Style.css file in a WordPress theme?

In WordPress themes, the style.css file contains important information. What is its main purpose?

A It stores the images and media files used by the theme.

B It contains the PHP code that runs the theme's backend logic.

C It holds the theme's CSS styles and metadata like theme name and author.

D It manages the database connections for the theme.

💡 Hint

Think about what controls the look and basic info of a theme.

The style.css file in a WordPress theme is special because it not only holds the CSS styles but also the theme metadata in comments at the top. This metadata tells WordPress about the theme's name, author, version, and more.

📝 Syntax

intermediate

Identify the correct theme metadata header in style.css

Which of the following style.css headers correctly defines the theme name and author?

A

// Theme Name: My Cool Theme
// Author: Jane Doe

B

/*
Theme Name: My Cool Theme
Author: Jane Doe
*/

C

<!-- Theme Name: My Cool Theme
Author: Jane Doe -->

D

# Theme Name: My Cool Theme
# Author: Jane Doe

💡 Hint

WordPress expects the metadata in a CSS comment block.

The theme metadata must be inside a CSS comment block starting with /* and ending with */. Options A, B, and D use comment styles not valid in CSS.

❓ component_behavior

advanced

What happens if the theme metadata is missing in style.css?

If a WordPress theme's style.css file lacks the required metadata header, what will WordPress do when you try to activate the theme?

A WordPress will delete the theme files automatically.

B WordPress will activate the theme but show a warning message.

C WordPress will activate the theme normally without any issues.

D WordPress will not list the theme in the Appearance > Themes page.

💡 Hint

Think about how WordPress recognizes themes.

WordPress uses the metadata in style.css to identify and list themes. Without it, the theme won't appear in the theme list and cannot be activated through the dashboard.

🔧 Debug

advanced

Why does this style.css metadata cause the theme to be unrecognized?

Look at this style.css header snippet:

/*
Theme-Name: Awesome Theme
Author: John Smith
*/

Why does WordPress fail to recognize this theme?

A Because the metadata key <code>Theme-Name</code> is incorrect; it should be <code>Theme Name</code> without a dash.

B Because the file is named style.css instead of theme.css.

C Because the comment block is not closed properly.

D Because the author name is missing an email address.

💡 Hint

Check the exact spelling of metadata keys.

WordPress expects the metadata keys to be exact. Theme Name must be spelled with a space, not a dash. Using Theme-Name causes WordPress to ignore the metadata.

❓ state_output

expert

What is the output of this style.css metadata block in WordPress theme info?

Given this style.css metadata block:

/*
Theme Name: Simple Theme
Theme URI: https://example.com/simple-theme
Author: Alice
Author URI: https://example.com
Description: A simple WordPress theme.
Version: 1.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: simple-theme
Tags: light, two-columns, responsive-layout
*/

Which of the following is true about how WordPress displays this theme in the dashboard?

A The theme will show the name 'Simple Theme', author 'Alice', version '1.0', and tags including 'responsive-layout'.

B The theme will show the author 'Alice' but no theme name or description.

C The theme will show the name 'Simple Theme' but no author or version info.

D The theme will not appear because the metadata is too long.

💡 Hint

WordPress uses all standard metadata keys to display theme info.

WordPress reads all standard metadata keys like Theme Name, Author, Version, Description, and Tags from the style.css header and shows them in the theme dashboard.