Customize Your Theme

[wp101 video=”customize-theme”]

In this video, the instructor demonstrates how to use the WordPress Customizer to change the design and appearance of your site in real time.

1. Themes and the Customizer

• Themes control your site’s layout, colors, and typography.
• Thousands of free and premium themes are available for all site types (blogs, business sites, e-commerce).
• The demo site uses the Twenty Twenty theme.
• The Customizer lets you adjust site appearance with a live preview before publishing changes.

2. Switching Themes

• At the top of the Customizer, you’ll see the active theme.
• Click Change to:
  • Preview other installed themes
  • Browse the WordPress.org theme directory
  • Filter by subject, features, or layout
• You can preview your content in a new theme and activate it with one click.

3. Common Customizer Options (Theme-Dependent)

1. Site Identity
   • Upload a logo or display the site title as text.
   • Add a tagline.
   • Enable Retina logo for sharper display on high-res screens.
   • Add a site icon (favicon) for browser tabs and bookmarks.
2. Colors
   • Adjust background color for the header, footer, or entire site.
   • Change the primary color (used for buttons and links).
   • WordPress automatically ensures color contrast for accessibility.
3. Theme Options
   • Show/hide search link in the header.
   • Show/hide author bio on posts.
   • Choose to display full text or summaries on archive pages.
4. Cover Template (specific to Twenty Twenty)
   • Display the page/post title over a full-width featured image.
   • Choose parallax effect (fixed image background) or scrolling background.
   • Customize overlay color, text color, and overlay opacity.
5. Background Image
   • Add an image behind site content.
   • Choose display options: fill, fit, repeat, or custom placement and scrolling.
6. Navigation Menus & Widgets
   • Manage menus and widgets (covered in earlier videos).
7. Homepage Settings
   • Set a static homepage or display latest blog posts.
8. Additional CSS
   • Add custom CSS to override theme styles.
   • Example: italicize tagline and reduce opacity.

4. Previewing and Publishing Changes

• Preview your site on desktop, tablet, and mobile.
• Hide the controls to see full-width preview.
• Save options:
  • Publish immediately
  • Save as draft
  • Schedule changes for later
  • Discard changes

Key Takeaway:

The Customizer is your control center for personalizing your WordPress site. From changing themes, logos, and colors to adding CSS for advanced tweaks, it gives you a real-time preview so you can confidently design a site that matches your brand and style.