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

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

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

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

Need a hint?

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