Responsive theme patterns in Wordpress - Mini Project: Build & Apply

Responsive Theme Patterns

📖 Scenario: You are building a simple WordPress theme that looks good on phones, tablets, and desktops. Your theme will have a header, a navigation menu, and a main content area. You want the layout to adjust automatically depending on the screen size.

🎯 Goal: Create a responsive WordPress theme using CSS Grid and media queries. The theme should have a header, a navigation bar, and a main content area that rearranges itself on smaller screens.

📋 What You'll Learn

Create a basic HTML structure for the theme in header.php and index.php.

Add a CSS file with grid layout for desktop screens.

Add a CSS media query to adjust the layout for screens smaller than 600px.

Use semantic HTML5 elements and ensure the navigation is accessible.

💡 Why This Matters

🌍 Real World

Responsive themes are essential for websites to look good on all devices, from phones to desktops. This project shows how to create a simple responsive layout using modern CSS and WordPress structure.

💼 Career

Web developers often build or customize WordPress themes. Knowing how to make themes responsive and accessible is a key skill for front-end and WordPress developers.

1

Create the basic HTML structure

In header.php, create a <header> element with a site title inside an <h1>. Below it, add a <nav> element with an unordered list containing three links: Home, About, and Contact. In index.php, add a <main> element with a paragraph that says "Welcome to my responsive theme."

Wordpress

Hint

Use semantic tags like <header>, <nav>, and <main>. Put the site title in an <h1> inside the header.

2

Add CSS grid layout for desktop

Create a CSS file called style.css. Add a CSS rule for the body that uses display: grid; with two rows: the first row for the header and the second for the main content. Set the grid template rows to auto 1fr. Also, add a rule for the nav ul to display its items horizontally using display: flex;.

Wordpress

/* Add grid layout to body and flex to nav ul */

/* Your code here */

Hint

Use display: grid; on the body and set grid-template-rows. Use display: flex; on nav ul to arrange links horizontally.

3

Add media query for small screens

In style.css, add a media query for screens with a maximum width of 600px. Inside it, change the nav ul to use flex-direction: column; so the navigation links stack vertically. Also, add some spacing between the links with gap: 0.5rem;.

Wordpress

body {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
}

nav ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 1rem;
}

/* Add media query below */

/* Your code here */

Hint

Use @media (max-width: 600px) { ... } and inside it set nav ul to flex-direction: column; and gap: 0.5rem;.

4

Add accessibility and finalize theme

In header.php, add an aria-label="Primary navigation" attribute to the <nav> element to improve accessibility. Also, in style.css, add a rule to make links inside nav ul have a visible focus outline for keyboard users by setting outline: 2px solid #000; on a:focus. This completes the responsive theme pattern.

Wordpress

  My Responsive Site
  
    
      Home
      About
      Contact
    
  




  Welcome to my responsive theme.


/* style.css */
body {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
}

nav ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 1rem;
}

@media (max-width: 600px) {
  nav ul {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* Add focus style for nav links */

/* Your code here */

Hint

Add aria-label="Primary navigation" to the <nav> tag. Add CSS for nav ul a:focus to show a visible outline.

Practice

1. What is the main purpose of using responsive theme patterns in WordPress?

easy

A. To add more plugins to the website

B. To make the website look good on all device sizes

C. To increase the website loading speed only on desktops

D. To change the website's language automatically

Solution

1. Step 1: Understand responsive design goal

   Responsive themes adjust layout and style to fit different screen sizes like phones, tablets, and desktops.

2. Step 2: Identify the correct purpose

   The main goal is to ensure the website looks good and works well on all devices, not just desktops or adding plugins.

3. Final Answer:

   To make the website look good on all device sizes -> Option B

4. Quick Check:

   Responsive design = look good on all devices [OK]

Hint: Responsive means adapting to all screen sizes [OK]

Common Mistakes:

• Thinking responsive only speeds up desktop loading
• Confusing responsive with adding plugins
• Assuming it changes website language automatically

2. Which CSS syntax correctly applies styles only when the screen width is 600px or less?

easy

A. @media screen and (max-height: 600px) { /* styles here */ }

B. @media screen and (min-width: 600px) { /* styles here */ }

C. @media screen and (max-width: 600px) { /* styles here */ }

D. @media (width: 600px) { /* styles here */ }

Solution

1. Step 1: Understand max-width media query

   The max-width condition applies styles when the screen width is less than or equal to the given value.

2. Step 2: Identify correct syntax

   @media screen and (max-width: 600px) { /* styles here */ } uses max-width: 600px, which targets screens 600px wide or smaller. Other options either use min-width, height, or incorrect syntax.

3. Final Answer:

   @media screen and (max-width: 600px) { /* styles here */ } -> Option C

4. Quick Check:

   max-width 600px = styles for small screens [OK]

Hint: max-width targets screens up to that width [OK]

Common Mistakes:

• Using min-width instead of max-width for small screens
• Confusing width with height in media queries
• Omitting 'screen' keyword or using wrong syntax

3. Given this CSS snippet in a WordPress theme:

@media (max-width: 768px) { body { background-color: lightblue; } }

What will happen when you view the site on a tablet with 700px width?

medium

A. The background color will be lightblue

B. The background color will not change

C. The background color will be lightblue only on desktop

D. The CSS will cause an error and not apply

Solution

1. Step 1: Check screen width against max-width

   The media query applies styles when screen width is 768px or less. 700px is less than 768px, so styles apply.

2. Step 2: Determine effect on background color

   The body background color changes to lightblue on screens 768px wide or smaller, including the 700px tablet.

3. Final Answer:

   The background color will be lightblue -> Option A

4. Quick Check:

   700px <= 768px means styles apply [OK]

Hint: Check if device width fits max-width condition [OK]

Common Mistakes:

• Thinking styles apply only on desktop
• Assuming CSS causes errors on media queries
• Ignoring the max-width condition logic

4. You wrote this CSS in your WordPress theme:

@media screen and (max-width 600px) { .menu { display: none; } }

Why is the menu still visible on small screens?

medium

A. Missing colon ':' after max-width in media query

B. The .menu class does not exist in HTML

C. display: none; is not valid CSS

D. Media queries do not work in WordPress themes

Solution

1. Step 1: Check media query syntax

   The media query is missing a colon ':' after max-width, which is required for valid syntax.

2. Step 2: Understand effect of syntax error

   Because of the missing colon, the media query is ignored, so the .menu styles inside it do not apply.

3. Final Answer:

   Missing colon ':' after max-width in media query -> Option A

4. Quick Check:

   Correct media query syntax requires ':' [OK]

Hint: Check colons in media query conditions [OK]

Common Mistakes:

• Forgetting colon after max-width
• Assuming display:none is invalid
• Thinking WordPress disables media queries

5. You want your WordPress theme to show a two-column layout on screens wider than 900px and a single column on smaller screens. Which CSS pattern achieves this best?

hard

A. .container { display: block; }

B. @media (max-width: 900px) { .container { display: grid; grid-template-columns: 1fr 1fr; } } @media (min-width: 901px) { .container { display: block; } }

C. .container { display: grid; grid-template-columns: 1fr 1fr; }

D. @media (min-width: 901px) { .container { display: grid; grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .container { display: block; } }

Solution

1. Step 1: Define layout for wide screens

   Use min-width: 901px media query to apply two-column grid layout for screens wider than 900px.

2. Step 2: Define layout for smaller screens

   Use max-width: 900px media query to apply single column block layout for smaller screens.

3. Step 3: Verify option correctness

   @media (min-width: 901px) { .container { display: grid; grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .container { display: block; } } correctly sets two-column grid for wide screens and single column for smaller. @media (max-width: 900px) { .container { display: grid; grid-template-columns: 1fr 1fr; } } @media (min-width: 901px) { .container { display: block; } } reverses conditions. The other options do not use media queries.

4. Final Answer:

   @media (min-width: 901px) { .container { display: grid; grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .container { display: block; } } -> Option D

5. Quick Check:

   min-width for wide, max-width for small screens [OK]

Hint: Use min-width for wide, max-width for narrow layouts [OK]

Common Mistakes:

• Reversing min-width and max-width conditions
• Not using media queries for responsive layout
• Applying same layout for all screen sizes