The WordPress Site Editor gives you visual control over every structural element of your website, headers, footers, sidebars, and full page templates, without writing any code. If you have ever wanted to add your logo to the header, rearrange your navigation menu, create a multi-column footer, or build a custom layout for specific pages, the Site Editor is how you do it in modern WordPress. This guide walks through every aspect of working with headers, footers, and templates in detail.
The WordPress Site Editor (also called Full Site Editing or FSE) is a visual editing interface that lets you customize every part of your website using blocks. It was introduced in WordPress 5.9 and has been refined significantly in every release since. Unlike the older Customizer, which offered limited controls through dropdowns and text fields, the Site Editor lets you drag, drop, add, and remove any element on any part of your site, just like editing a regular page or post.
The Site Editor is available in block themes, themes built specifically to work with the block editor. WordPress’s default theme, Twenty Twenty-Five, is a block theme. If you are using a classic theme (like Flavor, flavor themes, or older default themes), you will not see the Site Editor option in your dashboard. To check whether your theme supports the Site Editor, look for Appearance → Editor in your admin sidebar. If you see “Appearance → Customize” instead, your theme is a classic theme. For a detailed overview of the default block theme, see our guide to Twenty Twenty-Five.
Navigate to Appearance → Editor in your WordPress dashboard. You will see the Site Editor interface with options on the left sidebar:
- Navigation: Manage your site’s menus
- Styles: Control site-wide colors, typography, and spacing (Global Styles)
- Pages: Quick access to edit any page
- Templates: Edit full-page layouts for different content types
- Patterns: Browse and manage template parts (header, footer) and custom patterns
You can also access the Site Editor directly from the front end of your site. When logged in as an admin, click “Edit site” in the admin bar at the top of any page. This opens the Site Editor with that page’s template loaded, which can be faster than navigating through the dashboard.
Before diving into editing, understand how headers and footers work in the Site Editor. They are template parts, reusable sections that can be included in multiple templates. Your header template part might appear in your homepage template, your single post template, your archive template, and your 404 template. When you edit the header template part, the change applies everywhere that header is used across your site.
This is powerful because it means you only need to design your header once. But it also means you need to be intentional about changes, editing the header in the Site Editor affects every page that uses it, not just the page you are looking at.
WordPress typically comes with at least two template parts: Header and Footer. Your theme may define additional template parts like Sidebar, Post Meta, or Comments. You can also create your own custom template parts for any reusable section you want to share across templates.
Your site header is the first thing visitors see on every page. It typically contains your logo, site title, navigation menu, and sometimes a search bar, social icons, or a call-to-action button. Here is how to customize it:
- Open the Site Editor (Appearance → Editor)
- Click Patterns in the left sidebar
- Select Template Parts, then click on Header
- You will see your current header layout with editable blocks
Adding Your Logo
Click where you want your logo to appear, then add a Site Logo block using the + inserter. Upload your logo image, set the width (120 to 200 pixels works well for most sites), and toggle whether it should link to the homepage. If you do not have a logo yet, use the Site Title block instead, it displays your site name as text and you can style the font, size, and color.
For the best results, upload your logo in SVG format (if your theme or a plugin allows it) or as a transparent PNG. JPG logos with white backgrounds look unprofessional against colored header backgrounds. Keep the file size small, your logo loads on every page, so a 50KB PNG is much better than a 500KB one.
Setting Up Navigation
The Navigation block controls your menu. Click on it to add pages, custom links, or dropdown submenus. You can create multiple navigation menus and switch between them using the block settings. For a comprehensive guide to building navigation menus with dropdowns, mobile hamburger menus, and advanced patterns, see our detailed navigation menu guide.
Key navigation settings in the block sidebar:
- Layout: Choose horizontal (default) or vertical orientation
- Overlay Menu: Controls when the mobile hamburger menu appears. “Mobile” shows it on small screens only, “Always” shows it at all sizes, “Never” keeps the full menu visible
- Submenu: Dropdown submenus appear when you add pages inside other pages in the menu hierarchy
- Colors: Set text and background colors for normal, hover, and active states
Adding a Search Bar
Insert a Search block in your header to let visitors search your site. You can configure it to show as a full input field or as an icon that expands when clicked (the “button only” option). The expandable icon version works well in headers where space is limited.
Adding Social Icons
Insert a Social Icons block to add links to your social media profiles. Choose from icon-only, text-only, or combined styles. Each icon links to the URL you specify. WordPress includes icons for all major platforms, Twitter/X, Facebook, Instagram, LinkedIn, YouTube, TikTok, GitHub, and many more.
Header Layout Tips
Most professional headers follow one of these layout patterns:
- Logo left, navigation right: The most common pattern. Clean and familiar to users.
- Logo centered, navigation below: Works well for brands that want their logo prominently displayed. Common on creative and portfolio sites.
- Logo left, navigation center, CTA button right: Good for business sites that want a prominent call-to-action in the header.
Use a Row block (or a Group block set to “Row” layout) to arrange header elements horizontally. Set “justify content” to “space between” to push elements to opposite sides of the header. This creates the classic logo-left, navigation-right layout without any CSS.
Footers appear at the bottom of every page and typically contain copyright text, secondary navigation, contact information, newsletter signup forms, or links to important pages like Privacy Policy and Terms of Service.
- In the Site Editor, go to Patterns → Template Parts → Footer
- Click on your footer to start editing
- Add or remove blocks as needed
Building a Multi-Column Footer
Professional websites typically use a multi-column footer layout. Here is how to create one:
- Delete the existing footer content (or start fresh)
- Add a Group block as the outer container. Set a background color for the footer area.
- Inside the Group, add a Columns block with three or four columns
- In the first column, add your Site Logo or Site Title and a brief description of your business
- In the second column, add a Heading (“Quick Links”) and a Navigation block with secondary menu links
- In the third column, add a Heading (“Contact”) and Paragraph blocks with your address, phone, and email
- In the fourth column (if using four), add Social Icons and a newsletter signup form
- Below the Columns, add a Paragraph block for copyright text like “© 2026 Your Site Name. All rights reserved.”
Common Footer Elements
- Columns block: Create a multi-column footer with different content in each column
- Paragraph block: Add copyright text with the current year
- Navigation block: Add a secondary menu with links to Privacy Policy, Terms, Sitemap, and Contact
- Social Icons: Repeat your social links in the footer for visibility, many visitors scroll to the footer looking for social links
- Separator block: Add a horizontal line between the column area and the copyright text for visual separation
Footer Design Best Practices
Use a dark background color for your footer to visually separate it from the main content area. Dark gray or your brand’s dark color variant works well. Make sure text and link colors have sufficient contrast against the background. Keep footer content concise, visitors scan footers quickly, so use short labels and clear link text. Include your most important secondary links: Privacy Policy and Terms of Service are legally required on many sites, and Contact and About links help visitors who scroll past your main navigation.
Templates control the overall layout structure for different types of content. They define where the header appears, where the content goes, whether there is a sidebar, and what the footer looks like. Every page on your WordPress site uses a template, even if you never think about it.
WordPress comes with several default templates:
| Template | Used For | Common Elements |
|---|---|---|
| Single Posts | Individual blog posts | Header, title, content, author bio, comments, related posts, footer |
| Pages | Static pages (About, Contact) | Header, title, content, footer (usually no sidebar) |
| Archive | Category, tag, and date archives | Header, archive title, post grid or list, pagination, footer |
| Search Results | What visitors see after searching | Header, search form, results list, footer |
| 404 | Page not found error | Header, error message, search form, helpful links, footer |
| Home | Blog listing page | Header, latest posts grid, pagination, footer |
| Front Page | Static homepage (if set) | Header, custom content area, footer |
Editing an Existing Template
- Go to Appearance → Editor → Templates
- Click on the template you want to modify (for example, “Single Posts”)
- Edit the template using blocks, add, remove, or rearrange elements
- Click Save to apply changes to all pages using that template
When editing a template, you will see placeholder content that represents where your actual content appears. The Post Content block is the most important, it is where the actual page or post content gets inserted. Do not delete this block, or your content will not appear on the live site. Other dynamic blocks you will see include Post Title, Post Date, Post Author, Post Categories, Post Tags, and Post Featured Image.
Creating a Custom Template
Need a unique layout for a specific page? Create a custom template:
- In the Templates section, click the + button to add a new template
- Choose what type of template to create (page, post, category, or a specific page by name)
- WordPress may ask if you want to start from an existing template or a blank canvas
- Design your layout with blocks. Include the Header and Footer template parts, and add a Post Content block where the page content should appear.
- Save the template with a descriptive name like “Landing Page – No Sidebar” or “Full Width Portfolio”
- Assign it to specific pages from the page editor using the Template dropdown in the right sidebar
Custom templates are powerful for creating pages that need a different structure from the rest of your site. Common use cases include landing pages without navigation (to reduce distractions), full-width portfolio pages without sidebars, or sales pages with a simplified header and a prominent CTA footer.
Template Hierarchy: How WordPress Chooses Which Template to Use
WordPress uses a specific hierarchy to determine which template to apply to each page. Understanding this hierarchy helps you create targeted templates:
- For a single blog post, WordPress first looks for a template assigned to that specific post, then falls back to the “Single Posts” template, then to a generic “Singular” template, then to the “Index” template.
- For a category archive (like “Technology” category), WordPress looks for a template for that specific category, then falls back to “Category,” then “Archive,” then “Index.”
- For your homepage, WordPress checks “Front Page” first (if a static front page is set), then “Home,” then “Index.”
In practice, most sites only need to customize a few templates: Single Posts, Pages, Archive, and possibly Front Page. The default templates handle everything else well enough for most sites.
Understanding the difference between template parts and templates is essential for effective site editing:
Template Parts are reusable sections (header, footer, sidebar) that appear across multiple templates. When you edit a template part like the header, the change applies everywhere that header is used. Think of template parts as building blocks that templates are made from.
Templates are full-page layouts that include template parts plus content areas. When you edit a template, you are changing the layout for that specific content type only. For example, editing the “Single Posts” template changes the layout for all blog posts, but does not affect your static pages.
A practical example: your “Single Posts” template might include the Header template part at the top, the Post Content in the middle, a Comments section below that, and the Footer template part at the bottom. Your “Pages” template might use the exact same Header and Footer template parts but skip the Comments section and add a sidebar. By sharing template parts, you maintain consistency (same header everywhere) while allowing flexibility in page layouts.
You can create your own template parts beyond the default Header and Footer. This is useful when you have a section that appears on multiple templates but is not a standard header or footer:
- Go to Appearance → Editor → Patterns → Template Parts
- Click the + button to create a new template part
- Choose a designation (Header, Footer, or General)
- Design your template part with blocks
- Save it with a descriptive name
Common custom template parts include a sidebar with recent posts and categories, a banner announcement bar that sits above the header, a newsletter signup section that appears between content and footer, or an author bio section shared across all single post templates.
Every template and template part you create needs to work well on all screen sizes. The Site Editor includes responsive preview tools, click the desktop, tablet, and phone icons in the top toolbar to see how your layout looks at different widths.
Key responsive considerations for headers and footers:
- Navigation: Your navigation menu should collapse into a hamburger menu on mobile. The Navigation block handles this automatically when you set the Overlay Menu option to “Mobile.”
- Columns: Footer columns should stack vertically on narrow screens. The Columns block does this by default, but check that the stacked order makes sense (typically logo/about first, then links, then contact).
- Font sizes: Headings that look great at 48px on desktop may overflow on mobile. Use the responsive font size options (click the three dots next to the font size selector) to set different sizes for different screen widths.
- Spacing: Generous padding looks elegant on desktop but can waste valuable screen space on mobile. Test your header and footer on a real phone, not just the preview, to check that spacing feels right.
- Use the List View: Press the three-line icon in the top toolbar to see a hierarchical list of all blocks. This is much easier for selecting nested blocks than clicking around in the visual editor, especially for complex headers with multiple groups and rows.
- Revision History: Click the three-dot menu and select “Revisions” to see previous versions of any template. If you break something, you can revert to any earlier version instantly.
- Reset to Default: If you have made changes you do not like and want to start over, you can reset any template to the theme’s original default. Click the three-dot menu on the template and select “Clear customizations.”
- Lock Blocks: Right-click a block and select “Lock” to prevent accidental edits to critical elements like your header navigation or logo. You can lock against moving, removing, or both.
- Copy Between Templates: You can copy blocks from one template and paste them into another. This is useful when creating a new template that shares some sections with an existing one.
- Use Keyboard Shortcuts: Ctrl+Z (Cmd+Z on Mac) for undo, Ctrl+Shift+Z for redo, and / to quickly insert blocks by name. These shortcuts work the same way in the Site Editor as they do in the regular page editor.
Site Editor option is missing from the dashboard. Your theme is not a block theme. Switch to Twenty Twenty-Five or another block theme to access the Site Editor. You can check by looking for a theme.json file and an HTML-based templates folder in your theme directory.
Changes are not showing on the live site. Make sure you clicked “Save” after editing. The Site Editor has a separate save action from the page editor. Also check if a caching plugin is serving an old version of the page, clear your cache and refresh.
Header or footer looks different on certain pages. Some of your templates may use a different header or footer template part. Check the template for the affected page type under Templates to see which template parts it includes.
Cannot select a specific block in the header or footer. Use List View (the three-line icon) to click on the exact block you want. Deeply nested blocks inside groups and rows can be difficult to select by clicking in the visual editor. List View shows the full hierarchy and lets you select any block precisely.
Mobile menu is not working. Check the Navigation block settings. Make sure “Overlay Menu” is set to “Mobile” or “Always” rather than “Never.” If the hamburger icon appears but the menu does not open, there may be a JavaScript conflict with another plugin, try deactivating plugins one at a time to identify the conflict.
Once you are comfortable editing headers, footers, and templates, explore Global Styles (the half-moon icon in the Site Editor) to set site-wide typography, colors, and spacing. Our Global Styles guide walks through customizing fonts, colors, and layout defaults that apply across your entire site. You can also explore block patterns to quickly insert pre-designed sections into your templates and pages. The combination of templates, template parts, Global Styles, and patterns gives you complete design control over your entire WordPress site, the same level of customization that previously required a developer or a page builder plugin, now built directly into WordPress core.
Beginner WordPress Tips Block Editor First steps after WordPress install WordPress settings
Last modified: March 11, 2026
