Changing these settings can help you align your site's design with your brand identity or personal style preferences. In this tutorial, we'll guide you through the process of updating global colors and fonts using the Appearance > Customize menu in WordPress.
Step 1: Access the Customizer
Log into your WordPress dashboard: Open your browser, go to yourwebsite.com/wp-admin, and enter your username and password
(or you can use Magic Link
from WebOps AI Builder's Dashboard)Navigate to the Customizer: On the left-hand side of the dashboard, locate the Appearance menu. Click on it, then select Customize from the submenu. This will launch the WordPress Customizer, where you can modify your site’s appearance.
Step 2: Locate Global Settings
Explore the Customizer menu: Once the Customizer opens, you’ll see a menu on the left with various options. These options depend on your theme but often include sections like Colors, Typography, Fonts, Header, or Footer.
Find global settings: Look for sections that control site-wide styles:
For colors, this might be labeled Colors or Global Colors.
For fonts, it could be under Typography or Fonts.
Tip: If you’re not sure where to find these settings, click through the sections to explore. The exact names can vary depending on your theme.
Step 3: Change Global Colors
Open the color settings: Click on the section containing color options (e.g., Colors).
Select the color to change: You might see options such as Primary Color, Secondary Color, Background Color, or similar, depending on your theme.
Use the color picker:
Click the color swatch next to the option you want to adjust.
A color picker will appear. Drag the selector on the color wheel to pick a new shade, or enter a hex code (e.g., #FF5733 for a shade of orange) if you have a specific color in mind.
Preview your changes: As you adjust the colors, the live preview on the right side of the screen will update, showing how the new color looks on your site.
Repeat for other colors: Modify any additional color settings as needed.
Step 4: Change Global Fonts
Open the font settings: Click on the section with font options (e.g., Typography or Fonts).
Select the element to change: You may see options for different text elements, such as Headings Font (e.g., H1, H2) or Body Font (main text).
Choose a new font:
Click the font option to reveal a dropdown menu of available font families.
Pick a new font from the list (e.g., “Roboto,” “Open Sans,” or “Lora”).
Adjust additional settings (if available): Some themes let you tweak font sizes, weights (e.g., bold, italic), or line spacing. Modify these if your theme supports it.
Preview your changes: Check the live preview to see how the new font looks across your site.
Repeat for other elements: Update any other font settings as desired.
Step 5: Save Your Changes
Review your changes: Take a moment to ensure you’re happy with the updated colors and fonts in the live preview.
Publish your changes: Click the Publish button at the top of the Customizer menu to apply the new settings to your live site.
Discard changes (if needed): If you’re not satisfied, click the X button to exit the Customizer without saving.
Optional: Using Predefined Styles
Some WordPress themes offer predefined style variations or color schemes, providing a quick way to refresh your site’s look without adjusting individual settings.
Check for predefined options: In the Customizer, look for sections like Color Schemes or Style Variations.
Select a style: Click a predefined style to apply it to your site.
Preview and publish: Review the changes in the live preview, and click Publish if you like the result.
Additional Tips
Theme Limitations: If your theme lacks the color or font options you want, try a plugin like Customizer Settings or add custom CSS for more control.
Caching Issues: If changes don’t show up right away, clear your site’s cache using a caching plugin or ask your hosting provider for help.
Backups: Before making big changes, back up your site to avoid losing your current design.
Experimentation: Feel free to play around with different colors and fonts. The live preview lets you test changes risk-free, and you can always revert if needed.
Conclusion
Changing global colors and fonts in WordPress is an easy yet effective way to personalize your site’s appearance. By following these steps, you can create a consistent and professional design that reflects your brand or style. Explore your theme’s options, try predefined styles if available, and enjoy customizing your site!