Styles control the overall look of your WordPress site—colors, fonts, backgrounds, and layout spacing—with changes that apply across every page. Choose a guide below to customize a specific part of your site’s design, or learn how to remove premium styles.
In this video, you’ll learn how to style your WordPress.com site in the Site Editor. It covers browsing style variations, customizing typography, updating your site’s color palette, and adding custom colors. You’ll also learn how to adjust colors for individual elements, check color contrast, restore previous style revisions, and save a style variation.
This feature is available on sites with the WordPress.com Personal, Premium, Business, and Commerce plans. For free sites, upgrade your plan to access this feature.
If you have a free site, you can still use the Styles options but will be prompted to upgrade your plan with the following message:
“Your site includes premium styles that are only visible to visitors after upgrading to the Personal plan or higher.”
If you customize your site’s styles and later downgrade to a plan that does not include premium styles, your customizations are preserved but hidden from visitors until you upgrade the site again.
Styles are part of the Site Editor. To locate the Styles panel, follow these steps:
You can also access Styles while editing within the Site Editor by clicking the Styles icon at the top-right (the icon looks like a black and white circle):
Choose a guide below to customize your site’s colors, fonts, backgrounds, layout, or to manage and reset style changes.
Theme styles control the overall look of your site, including colors, fonts, and backgrounds.
- Choose a theme’s style: Select from pre-designed style variations that change colors and fonts together.
- Change your site’s typography: Change fonts, font sizes, and text appearance across your site.
- Change your site’s colors using styles: Set a site-wide color palette for text, backgrounds, buttons, and links.
- Change your site’s background image: Add or replace the background image behind your site’s content.
- Change your site’s background color: Set a solid background color for your site.
- Set the default style for blocks: Choose a default appearance for specific block types, like buttons or quotes.
Layout settings control how content is arranged on your site, including spacing, alignment, and content width.
- Change the width of your content: Set the maximum width for your site’s content area and adjust how wide individual blocks display.
- Dimensions settings: Control padding, margins, and minimum height for blocks.
- Adjust the space between blocks: Add or reduce vertical spacing between blocks on your pages.
Preview your style changes using the Style Book and reset styles when needed.
- Use the Style Book to design your site: Preview how your style choices affect every block type before saving changes.
- Manage and reset your style changes: Undo style customizations or reset all styles back to the theme’s defaults.
If you need to make changes to a specific page or post rather than your entire site, these guides can help:
- Use the WordPress editor: Learn the basics of editing pages and posts in the block editor.
- Working with images: Insert, resize, and format images on your pages and posts.
- Change a block’s settings: Customize individual blocks on a page, including colors, fonts, and spacing.
- Style content for specific screen sizes: Use responsive styles to give a block a different look on desktop, tablet, or mobile.
Where you make a change controls how much of your site it affects. A change in Appearance → Editor → Styles applies to your whole site. A change to a template part, like the header, applies to every page that uses it. A change to a single block or page applies in one place.
| What you want to change | Where to change it |
|---|---|
| Colors on your whole site (color palette, theme colors) | Appearance → Editor → Styles → Colors. See Change your site’s colors using styles. |
| Colors on one block | Select the block, then open the block settings sidebar. See Change a block’s settings. |
| Fonts and text size on your whole site (typography) | Appearance → Editor → Styles → Typography. See Change your site’s typography. |
| Your logo | Appearance → Editor → Identity → Site Logo. See Add a logo to your website. |
| The header on every page | Appearance → Editor, then select the Header template part in List View. See Edit the header. |
| Content on one page | Pages, then click the page you want to edit. See Use the WordPress editor. |
| Spacing around a block | Select the block, then the block settings sidebar, under Dimensions. See Adjust the space between blocks. |
For a fuller explanation of how these layers fit together, read Themes, templates, and pages.
This guide covers block themes. To check which type your site uses, go to Appearance in your site’s dashboard. If you see Customize instead of Editor, your site uses a classic theme. Classic themes do not have Styles — change your site’s colors, fonts, header, and logo in the Customizer instead.
This section applies to sites created with the AI Website Builder or sites that have enabled the WordPress Agent. Open the WordPress Agent by clicking the AI icon (a four-pointed star) in the admin bar at the top of the screen.
The WordPress Agent can help you choose and apply styles that give your site a cohesive, polished look. Here are some sample prompts you can copy and use:
- “Suggest a color and font combination that would suit a minimalist travel blog.”
- “What background color and typography settings make body text easiest to read?”
- “How can I use styles to make my site look more professional?”
- “What layout settings should I change to improve how my site looks on mobile?”
You can use external AI agents like Claude, Cursor, ChatGPT, OpenClaw, and more to read and edit your website securely. Enable MCP tool access for external AI agents.
AI agents can review the colors, fonts, and spacing you have set and update them across your whole site. Here are some things you can ask an agent to do:
- “Show me the colors and fonts my site is using right now.”
- “Change the colors across my whole site to a warmer palette.”
- “List the style variations that come with my theme.”
If you have activated premium styles but are not ready to upgrade yet, you can remove the premium styles by following these steps:
- Visit your site’s dashboard.
- Go to Appearance → Editor.
- Click the “Remove premium styles” button on the lower left side.
- Click the “Review change…” button to save your changes.
If you are editing your site, you will also see a banner at the top of the editor with the option to remove premium styles.
If you’re unable to remove the premium styles using the steps above, you can also follow the steps to reset all styles, which will remove the premium styles from your site.
