WordPress Global Styles and Navigation:One Change Across Your Entire Site

From using the tool to deciding how it looks

In the previous step, you learned how to move around the WordPress block editor: how to recognise a block, select it and change it.

This step completes the second phase, your design environment, of the journey for building your WordPress website with AI. You finish it with the step that will give you the most independence in the entire journey: preparing the visual foundation and navigation on which artificial intelligence will build the website.

What are global styles?

Think of them as your website’s uniform. You do not decide how each page will be dressed; you decide on the uniform once, and every page wears it.

They are located at:

Appearance → Editor → Styles

A side panel opens with the sections you will use: Typography, Colours, Background and Layout.

Why this comes before artificial intelligence

This is the methodological decision, and it is worth understanding because it explains everything else.

You could let artificial intelligence choose the colours while it builds. That would be more convenient. But look at what would happen.

If you tell it to “use orange”, AI has no specific orange to work with. It therefore chooses one for the button, a similar one for a link and another, slightly different one for an icon. None is wrong on its own. Together, they do not look as though they belong to the same website. That is where you lose control.

And it is not only a matter of shades. On a website, no colour is there merely as decoration. Each has a job:

• One is the background, the canvas on which everything else rests.
• Another is the text, which must be effortless to read.
• Another is the accent, which draws attention to buttons, links and anything you want people to select.
• There is usually a supporting colour for dividers, cards or soft backgrounds.

Defining your palette means assigning those jobs before you begin. You configure your brand colours once, with each colour in its role.

From then on, when AI starts working, it no longer has to invent anything. Ask it for a button and it knows that a button uses the accent colour, so it retrieves that colour from your palette. It uses the same orange in all eighty places where it appears.

There is a second advantage: on the day you want to change that orange, you change it in one place and the entire website changes. Without a palette, you have to go through the website block by block.

It is the same principle as always, applied to colour: define once, use many times.

Before continuing, you should therefore understand the palette you are going to edit and what each colour does within it. That is what we will look at now.

Colour style: the palette

When you open the palette, you will see eight colour slots that you can change. Here you will learn the function of each one so that you can edit them correctly.

The eight colour fields have a fixed job within the design. AI will know where to use each field. You only decide which colour goes in each one.

• Your brand colour, light or medium.
• A dark supporting colour for the sections you want to emphasise.

The colours derived from your two brand colours

It is worth changing these four. They are what make the website look like yours rather than the default template.

Field	Its role	What to use
Accent 1	Your brand.	Your brand colour.
Accent 2	Your brand in a soft version.	A light version of Accent 1.
Accent 3	Contrasting blocks.	Your dark supporting colour.
Accent 5	Background for alternating sections.	A very light version of Accent 1.

The colours you can leave as they are

These four are already well configured by default. If you want to personalise them, go ahead: some brands use very dark blue for their text or cream for the background, and both can work perfectly. But this is not necessary for a coherent website. If you leave them as they are, you will not be missing anything.

Field	Its role	What usually works
Base	The website background.	White or almost white.
Contrast	The text people read.	Very dark grey, almost black.
Accent 4	Secondary text: dates, captions and notes.	A medium grey.
Accent 6	Borders and dividers.	Best left unchanged.

Change the values, never the names

Notice that the name of each colour remains the same. That is correct: change the shade, not the label.

Those names, base, contrast and accent-1 to accent-6, are what artificial intelligence will use to call each colour when it builds. If you change them, they no longer match and the method stops working.

How to change a colour, step by step

• Go to Appearance → Editor → Styles → Colours.
• Select Palette. The list of all eight opens.
• Select the three dots beside Show details. The full panel opens with the eight colours and their names.
• Select the circle for the colour you want to change. The colour picker opens.
• Choose the shade with your mouse, or enter its colour code in the field below. Every colour has a six-character code beginning with a hash, such as #F15A29. This is how you use your exact brand colour rather than something similar.
• Repeat this for the colours you want to change, then select Save at the top right.

Apply your colours to the elements

When you have finished editing the palette, go back. Below it, you will see an Elements section with four items: Link, Captions, Button and Heading.

This is the step most people skip, and it is the one that changes the result most.

Why it matters so much

The palette defines which colours exist. The elements define where they are used. You can have the perfect orange in Accent 1 and never see it anywhere on your website simply because nothing is using it yet.

This is where your colours start working. With all four elements configured, artificial intelligence can build cleanly: it creates a normal button and that button already uses your colour. Five minutes here saves you from hundreds of isolated colours scattered around the website.

Once your brand colours are properly configured, it is time to review the typography you will use.

Typography style: two families and no more

The golden rule is this: two complementary typefaces. One for headings and another for the main text. You do not need more, and with more the website starts to look untidy.

For elements such as text, links or buttons, you do not choose a new typeface; you choose which of the two you want to use. That is what brings them together and gives the whole design consistency.

• Font sets · Does one of the pairs already included with the theme suit you?
• Fonts · Would you prefer to load your brand typeface?
• Elements · Which of your two typefaces does each part of the website use?
• Now open Styles → Typography. You will see another grid, this time with pairs of letters. Select one and the typefaces change, while the colours remain as they were.
• Try different combinations. Nothing is saved until you select Save, so you can look at as many as you want.

Font sets

The first thing you will see is the eight pairs supplied with the theme, already matched by designers. Select one and the typeface changes across your entire website.

The best thing about this screen is that you can see the change before applying it: on sample text, with its actual weight and size. Look through all eight before deciding anything. This is the short route, and it is enough for most people.

Fonts: the manager

Immediately below is the list of fonts installed on your website. To the right of that list is a controls icon. This opens the font manager, which is where you go if you want to use your brand typeface instead of one of the eight pairs.

Inside, you have three options:

• View the library containing the fonts already installed on your website.
• Upload your own font if you have purchased a brand typeface. The accepted formats are .ttf, .otf, .woff and .woff2.
• Install from Google Fonts, an enormous free catalogue integrated into WordPress. You do not need to download anything or touch any code: search, choose and install.

Exploring that catalogue has a value that is not immediately obvious: it helps you put a name to what you want. Seeing many alternatives forces you to decide whether you want something serious or approachable, classic or modern, with or without serifs. That name is exactly what you will give artificial intelligence when you explain how you want your website to look. Telling it “I want something elegant” is no use; giving it the name of a typeface is.

Elements: assign your two typefaces

Below, you have five elements: Text, Links, Headings, Captions and Buttons.

This is where you choose which of your two typefaces each element uses. In addition to the typeface, you select for each element one of the colours you already added to your palette.

To edit them, select each one and its own panel will open.

Our advice is to change only the colour and typeface. Artificial intelligence will take care of the rest.

Do not leave typography until later

Colours are easy to change afterwards: you replace orange with blue and the layout does not move.

Typography does not work in the same way. Each pair has its own weights and line heights, so changing it changes the proportions. A heading that fitted on two lines may move to three. If you let artificial intelligence build with one typeface and then change it, some sections will shift out of place and you will have to review them one by one.

What is best left alone

There are three more sections in the panel: font sizes, spacing and widths. You can edit them, but my recommendation is that you do not.

This is not about being afraid to make changes. AI will build your website by calling those values by name, not by copying the number. If you change the underlying value one day, you do not change a single block; you change all of them at once. That is the advantage, and it only works if you leave them where they are.

Font sizes

There are five, and they work like clothing sizes: Small, Medium, Large, Extra Large and Extra Extra Large. Instead of saying “this heading is 32 pixels”, you say “this heading is Extra Large”. The sizes are consistent with one another, and four of the five shrink automatically on mobile. So if a heading looks too large, move it down a size instead of entering a number. And if you ever need to enter a measurement, use rem, not pixels: rem adapts for people who enlarge the text so that they can read it.

Spacing

There are seven values and they work in the same way, by name. All the breathing room on your website comes from them.

Widths

They are in Layout, and there are two of them. The content width is the width for text and determines how many characters fit on one line; in Twenty Twenty-Five, it is 645 pixels. The wide width is for content that occupies more space: a featured image, a table or a row of cards. It is 1,340 pixels. A website with lines that cross the whole screen becomes tiring after three paragraphs, and these values have already been calculated well. If you ever change them, be clear that it is a whole-website decision, not a decision for one page.

Tools for choosing colours and typefaces

If you are unsure which colours or typefaces you want, these three tools will save you a great deal of time.

Realtime Colors

realtimecolors.com

It shows you a sample website and lets you change its palette in real time, so you can see the colours applied to a real design. It accepts Google fonts, allowing you to test colour and typography at the same time.

Google Fonts

fonts.google.com

This is the largest catalogue of free typefaces available. Block themes integrate them, so you can install them from Appearance without uploading files or touching code.

Fontpair

fontpair.co

This offers tested combinations of two typefaces, using only Google fonts. If choosing two that work well together is proving difficult, the combinations are already worked out for you.

Your website’s menu and footer

We now move on to the other half of the work. Global styles determine how your website looks. The menu and footer determine how people move around it.

Until now, you have worked inside a page. But two parts of your website do not belong to any page: they appear everywhere, are defined once and are the first and last things a visitor sees.

Both are template parts: pieces saved once and displayed on every page of the website.

Together, they form your website’s navigation. Just like colours and typefaces, they are defined once and applied everywhere.

What belongs in each one

Before touching anything, it is worth knowing what goes where. This is not a matter of taste: each has a different job.

The menu is for what people are looking for. Your main pages and little else: home, what you offer, who you are and how to contact you. Five or six entries at most. A long menu does not help anyone find anything, and on mobile it becomes an endless list that people have to scroll through with their thumb.

The footer is for what people need but are not actively looking for. A contact email address, your social media profiles and a copyright line with the year and the name of your project. It is also for legal pages: which ones you need depends on your country, your activity and the data you collect, but if your project requires them, their place is in the footer, accessible from the entire website. They do not have to be written today, but you should already know where they belong.

Where to edit the menu and footer

Appearance → Editor → Patterns → Header and Footer

The main menu lives in the header; the links and information at the end of the website live in the footer.

Selecting either one opens the same editor you already know, with the same blocks. The only difference is the scope: what you save here applies to the entire website immediately, not to one page.

That is why it is worth knowing where they are before you build. When you finish the next step and want to move an entry, you will know exactly where to go.

How to add a page to the menu

At the moment, you do not yet have pages to add: artificial intelligence will build them in the next step. Keep this section, because it is where you will return once they exist.

We will do it from the header so that you can see the Navigation block where it actually appears:

• Go to Appearance → Editor → Patterns → Header and select the header you are using.
• Select the menu. Check that the toolbar says Navigation: this confirms that you have selected the correct piece rather than the group containing it.
• Select the + that appears inside the menu itself.
• Enter the name of the page. It will appear in the list. Select it.
• Select Save at the top right.

To remove a page, select it and choose the three dots → Delete. To change the order, drag it.

How to change the menu’s colours and typeface

The menu’s colours and typography are not adjusted here; they are adjusted in global styles, like everything else. The route is:

Styles → Blocks → Navigation

There, you can change the colour of the menu text, the colour of links on hover, the typeface and the size. Because it is a global style, the change applies on desktop and mobile at the same time.

This is the best example of the logic on this page: the menu content is edited in Patterns, but its appearance is edited in Styles. Now that you know navigation lives in two different places, the first question whenever something does not look right is always the same: is this content, or is it design?

Next step

Your website now has an identity and a route through it: your colours, your two typefaces, your elements, and your menu and footer are under control. They are defined in one place and can be applied to everything that comes next.

There is something you should know now: you will hardly ever touch what you have just configured again, and that is a good sign. A brand does not change every month. What you will edit often is the content: some text that needs correcting, a price that needs updating, a section that needs adding or a page name that needs changing. That is the normal life of a website, and you will see it in the step on editing your website.

Your design environment is now ready: you know how to use the tool and which decisions to make so that the website looks like your brand. Only the content remains, and you will build that in the next step with the help of artificial intelligence.

Frequently asked questions