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.

Practice

1. What is the main purpose of the style.css file in a WordPress theme?

easy

A. To configure WordPress user roles

B. To store the theme's PHP functions

C. To manage WordPress database connections

D. To hold the theme's styles and metadata information

Solution

1. Step 1: Understand the role of style.css

   The style.css file contains CSS styles that define the look of the theme.

2. Step 2: Recognize the metadata block

   It also includes a metadata comment block that tells WordPress about the theme's name, author, and version.

3. Final Answer:

   To hold the theme's styles and metadata information -> Option D

4. Quick Check:

   style.css = styles + metadata [OK]

Hint: Remember style.css holds styles plus theme info [OK]

Common Mistakes:

• Confusing style.css with functions.php
• Thinking style.css manages database or users
• Ignoring the metadata block in style.css

2. Which of the following is the correct way to start the metadata block in style.css for a WordPress theme?

easy

A. /*
Theme Name: My Theme
*/

B. // Theme Name: My Theme

C.

D. # Theme Name: My Theme

Solution

1. Step 1: Identify CSS comment syntax

   CSS comments use /* ... */ to enclose text, including metadata.

2. Step 2: Check WordPress metadata format

   WordPress expects metadata in a CSS comment block at the top of style.css.

3. Final Answer:

   /*\nTheme Name: My Theme\n*/ -> Option A

4. Quick Check:

   Metadata uses CSS comments /* ... */ [OK]

Hint: Metadata must be inside CSS comment block /* ... */ [OK]

Common Mistakes:

• Using // or # which are not CSS comments
• Using HTML comments in CSS
• Placing metadata outside comment block

3. Given this metadata block in style.css, what is the theme's version?

/*
Theme Name: Simple Theme
Author: Jane Doe
Version: 1.2.3
*/

medium

A. Jane Doe

B. 1.2.3

C. Simple Theme

D. style.css

Solution

1. Step 1: Locate the Version field

   Within the metadata block, the line starting with 'Version:' shows the theme's version number.

2. Step 2: Read the version value

   The version is '1.2.3' as given after 'Version:'.

3. Final Answer:

   1.2.3 -> Option B

4. Quick Check:

   Version field = 1.2.3 [OK]

Hint: Look for 'Version:' line in metadata block [OK]

Common Mistakes:

• Confusing Author with Version
• Picking Theme Name as version
• Ignoring the metadata block format

4. What is wrong with this metadata block in style.css that prevents WordPress from recognizing the theme?

/*
Theme-Name: Cool Theme
Author: John Smith
Version: 2.0
*/

medium

A. The field 'Theme-Name' should be 'Theme Name' without a dash

B. The comment block is missing the closing tag

C. The version number must be numeric only

D. Author name cannot contain spaces

Solution

1. Step 1: Check metadata field names

   WordPress requires exact field names like 'Theme Name' with a space, not 'Theme-Name'.

2. Step 2: Verify comment block correctness

   The comment block is properly opened and closed with /* and */.

3. Final Answer:

   The field 'Theme-Name' should be 'Theme Name' without a dash -> Option A

4. Quick Check:

   Field names must match exactly [OK]

Hint: Use exact field names like 'Theme Name' with space [OK]

Common Mistakes:

• Using dashes instead of spaces in field names
• Leaving comment block unclosed
• Misunderstanding version format rules

5. You want to create a child theme that inherits styles from its parent. Which metadata field must you add in the child theme's style.css to link it to the parent theme?

hard

A. Inherits: parent-theme-folder-name

B. Parent: parent-theme-name

C. Template: parent-theme-folder-name

D. Depends-On: parent-theme-name

Solution

1. Step 1: Understand child theme metadata

   To link a child theme to its parent, WordPress uses the 'Template' field with the parent's folder name.

2. Step 2: Identify correct field name

   The correct metadata field is 'Template', not 'Parent', 'Inherits', or 'Depends-On'.

3. Final Answer:

   Template: parent-theme-folder-name -> Option C

4. Quick Check:

   Child theme uses Template field to link parent [OK]

Hint: Use 'Template' field with parent's folder name [OK]

Common Mistakes:

• Using 'Parent' instead of 'Template'
• Confusing theme name with folder name
• Omitting the Template field in child theme