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

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.

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

/*
# Add the WordPress theme metadata header here
*/

Need a 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

/*
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
*/

/* Add body background color rule here */

Need a 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

/*
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
*/

body {
    background-color: #f0f0f0;
}

/* Add h1 color rule here */

Need a 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

/*
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
*/

body {
    background-color: #f0f0f0;
}

h1 {
    color: #333333;
}

/* Add link styles and hover effect here */

Need a hint?

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