Style.css and theme metadata in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to start a WordPress theme style.css with the theme name.

Wordpress

/*
Theme Name: [1]
*/

Drag options to blanks, or click blank then click option'

AMy Custom Theme

Bstyle.css

Cfunctions.php

Dindex.php

Attempts:

3 left

💡 Hint

Common Mistakes

Using file names instead of a theme name

Not placing the theme name inside the comment block

The Theme Name in style.css defines the name of your WordPress theme.

2fill in blank

medium

Complete the code to add the theme author in style.css metadata.

Wordpress

/*
Theme Author: [1]
*/

Drag options to blanks, or click blank then click option'

AGPLv2

B1.0.0

C2024

DJane Doe

Attempts:

3 left

💡 Hint

Common Mistakes

Putting version numbers or years instead of author name

Leaving this field blank

The Theme Author field shows who created the theme.

3fill in blank

hard

Fix the error in the style.css metadata to correctly specify the theme version.

Wordpress

/*
Version: [1]
*/

Drag options to blanks, or click blank then click option'

Aone

B1.0.0

Cv1

Dversion1

Attempts:

3 left

💡 Hint

Common Mistakes

Using words instead of numeric version

Adding extra letters or prefixes

The Version should be a numeric string like 1.0.0 to follow WordPress standards.

4fill in blank

hard

Fill both blanks to add theme URI and description metadata.

Wordpress

/*
Theme URI: [1]
Description: [2]
*/

Drag options to blanks, or click blank then click option'

Ahttps://example.com/theme

BA modern responsive theme

CMy Theme

D1.0

Attempts:

3 left

💡 Hint

Common Mistakes

Using theme name as URI

Putting version number as description

Theme URI is the website link for the theme. Description briefly explains the theme.

5fill in blank

hard

Fill all three blanks to add license, license URI, and text domain metadata.

Wordpress

/*
License: [1]
License URI: [2]
Text Domain: [3]
*/

Drag options to blanks, or click blank then click option'

AGPLv2 or later

Bhttps://www.gnu.org/licenses/gpl-2.0.html

Cmytheme

DMIT

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect license names

Wrong or missing license URI

Text Domain not matching theme folder

License states the theme's license type. License URI links to the license details. Text Domain is used for translations.

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