Style.css and theme metadata in Wordpress - Cheat Sheet & Quick Revision

Recall & Review

beginner

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

The style.css file holds the main CSS styles for the theme and contains the theme metadata in a comment block at the top. This metadata tells WordPress about the theme's name, author, version, and more.

beginner

Which metadata fields are required in the style.css header for WordPress to recognize a theme?

The required field is Theme Name. Other common fields include Theme URI, Author, Author URI, Description, Version, and License.

beginner

Show an example of a minimal style.css header with theme metadata.

/* Theme Name: Simple Theme Author: Jane Doe Version: 1.0 Description: A clean and simple WordPress theme. */

intermediate

Why must the theme metadata be inside a CSS comment block in style.css?

Because WordPress reads the metadata from the comment block at the top of style.css without affecting the CSS styles. This keeps metadata separate from actual CSS rules.

beginner

Can you include custom CSS styles below the theme metadata in style.css? What happens?

Yes, you can add CSS rules below the metadata comment block. WordPress loads these styles to style the theme's front-end pages.

What is the minimum required metadata field in style.css for WordPress to detect a theme?

A Author

B Theme Name

C Version

D Description

WordPress requires at least the 'Theme Name' field in the style.css header comment to recognize the theme.

Where must the theme metadata be placed inside style.css?

A Inside a CSS comment block at the top

B Inside a JavaScript block

C At the bottom of the file outside comments

D Inside HTML tags

Theme metadata must be inside a CSS comment block at the very top of style.css for WordPress to read it.

What happens if you add CSS rules below the metadata in style.css?

A They overwrite the metadata

B They are ignored by WordPress

C They cause an error

D They style the theme's front-end pages

CSS rules below the metadata are loaded by WordPress and style the theme's pages.

Which of these is NOT a common metadata field in style.css?

A Theme URI

B Author URI

C Database Name

D License

'Database Name' is not a metadata field in style.css; the others are common fields.

Why is the style.css file important besides holding CSS styles?

A It contains theme metadata WordPress uses to identify the theme

B It stores the theme's PHP code

C It holds the WordPress database credentials

D It manages WordPress plugins

Besides CSS, style.css holds the theme metadata that WordPress reads to identify and display the theme.

Explain the role of the style.css file in a WordPress theme and describe what theme metadata it contains.

Think about how WordPress knows your theme's name and who made it.

Describe how to properly format the theme metadata in style.css and why it must be inside a comment block.

Remember CSS comments start with /* and end with */.

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