Bird
Raised Fist0
Wordpressframework~30 mins

Style.css and theme metadata in Wordpress - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Create a WordPress Theme Style.css with Metadata
📖 Scenario: You are building a simple WordPress theme. Every theme needs a style.css file with special metadata at the top. This metadata tells WordPress the theme's name, author, version, and other details.
🎯 Goal: Create a style.css file for a WordPress theme that includes the required metadata header and some basic CSS styling.
📋 What You'll Learn
Create a style.css file with the exact WordPress theme metadata header
Include the following metadata fields with exact values: Theme Name, Theme URI, Author, Author URI, Description, Version, License, License URI, Text Domain
Add a simple CSS rule to style the body background color
Use correct CSS comment syntax for the metadata block
Ensure the metadata block is at the very top of the file
💡 Why This Matters
🌍 Real World
WordPress themes require a style.css file with metadata so WordPress can recognize and display theme details in the admin dashboard. Styling rules define the look and feel of the site.
💼 Career
Knowing how to create and edit WordPress theme metadata and CSS is essential for WordPress theme developers and front-end web designers working with WordPress.
Progress0 / 4 steps
1
Create the WordPress theme metadata header
Create a style.css file and add the WordPress theme metadata header at the very top. Include these exact fields and values inside a CSS comment block: Theme Name: SimpleTheme, Theme URI: https://example.com/simpletheme, Author: Jane Doe, Author URI: https://example.com, Description: A simple WordPress theme, Version: 1.0, License: GNU General Public License v2 or later, License URI: https://www.gnu.org/licenses/gpl-2.0.html, Text Domain: simpletheme.
Wordpress
Hint

Use a CSS comment block /* ... */ at the top of the file. Each metadata line starts with the field name, a colon, a space, then the exact value.

2
Add a CSS rule to style the body background color
Below the metadata header, add a CSS rule that sets the body background color to #f0f0f0. Use the exact selector body and property background-color.
Wordpress
Hint

Write a CSS rule with the selector body and set background-color to #f0f0f0. Use curly braces and proper indentation.

3
Add a CSS rule to style the main heading color
Add a CSS rule that sets the color of the h1 element to #333333. Use the exact selector h1 and property color.
Wordpress
Hint

Write a CSS rule with selector h1 and set color to #333333. Use curly braces and indentation.

4
Add a CSS rule to style links with hover effect
Add CSS rules to style the a element with color #0066cc and remove underline by setting text-decoration to none. Also add a hover effect for a:hover that changes the color to #004999 and adds underline with text-decoration: underline.
Wordpress
Hint

Write two CSS rules: one for a with color and no underline, and one for a:hover with a darker color and underline.

Practice

(1/5)
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