Site identity and branding in Wordpress - Mini Project: Build & Apply

Site Identity and Branding in WordPress

📖 Scenario: You are building a simple WordPress site for a local bakery. The owner wants the site to clearly show the bakery's name and logo on every page so visitors recognize the brand easily.

🎯 Goal: Learn how to set up the site identity and branding in WordPress by adding the site title and logo so they appear in the header.

📋 What You'll Learn

Create a site title with the exact text 'Sweet Treats Bakery'

Add a site logo image with the filename 'logo.png'

Configure the site identity settings to display the title and logo

Ensure the logo and title appear in the site header

💡 Why This Matters

🌍 Real World

Every WordPress site needs clear branding so visitors recognize the site easily. Setting site identity helps build trust and professionalism.

💼 Career

Web developers and designers often customize WordPress themes to match client branding, making this skill essential for freelance and agency work.

1

Create the Site Title

In your WordPress theme's header.php file, add a <h1> tag with the exact text Sweet Treats Bakery inside the <header> element.

Wordpress

Need a hint?

Use an <h1> tag inside the <header> to show the site title.

2

Add the Site Logo Image

Inside the same <header> element, add an <img> tag with the src attribute set to 'logo.png' and the alt attribute set to 'Sweet Treats Bakery Logo'.

Wordpress

  Sweet Treats Bakery
  

Need a hint?

Use an <img> tag with the correct src and alt attributes inside the header.

3

Configure Site Identity in WordPress Customizer

In your theme's functions.php file, add support for custom logo by calling add_theme_support('custom-logo') inside a function hooked to after_setup_theme.

Wordpress

  Sweet Treats Bakery
  

Need a hint?

Use add_theme_support('custom-logo') inside a function hooked to after_setup_theme.

4

Display the Custom Logo in the Header

Replace the static <img> tag in header.php with the WordPress function the_custom_logo() to display the logo set in the Customizer.

Wordpress

  Sweet Treats Bakery
  

Need a hint?

Use the_custom_logo() function inside PHP tags to show the logo dynamically.