Editing WordPress Themes: Understanding the Theme Editor and Site Editor

When managing a WordPress site, you might find yourself wanting to tweak the design, add custom functionality, or adjust layout elements. WordPress provides two main tools for making these changes: Theme Editor and Site Editor. While both serve different purposes, understanding where changes are applied — to files or the database — is key to making efficient and sustainable customizations.

---

1. The Theme Editor (wp-admin/theme-editor.php)

The Theme Editor is a built-in WordPress tool that allows you to directly edit theme files on your server. It’s located at:

URL: http://<your-wordpress-site>/wp-admin/theme-editor.php

What You Can Edit

Using the Theme Editor, you can modify:

• PHP files: Includes functions.php, header.php, footer.php, and other template files.
• CSS files: Usually style.css, where theme-wide styles are defined.
• JavaScript files: Any .js files associated with the theme.

Where Changes Are Stored

Changes made here directly modify the physical files of your theme, stored on the server in:

/wp-content/themes/<your-theme-name>/

For example, if your theme is called my-theme, its files are located in /wp-content/themes/my-theme/.

Pros and Cons

• Pros:
  • Full control over the theme’s files.
  • Immediate effect on the website.
• Cons:
  • Risk of breaking your site if you make errors in the code.
  • Updates to the parent theme can overwrite your changes unless you’re working with a child theme.

---

2. The Site Editor (wp-admin/site-editor.php)

The Site Editor is part of WordPress’s Full Site Editing (FSE) functionality, available in block-based themes (e.g., themes built using the Gutenberg editor). It’s located at:

URL: http://<your-wordpress-site>/wp-admin/site-editor.php

What You Can Edit

With the Site Editor, you can modify:

• Global Styles: Adjust typography, colors, and layout across the entire site.
• Templates: Edit how specific types of content (like single posts, pages, archives) are displayed.
• Template Parts: Customize reusable sections like headers, footers, and sidebars.

Where Changes Are Stored

Unlike the Theme Editor, changes made in the Site Editor are stored in the WordPress database as “deltas” — differences applied on top of the original theme files. This means:

• The original theme files remain unchanged.
• Customizations are saved in the database under the wp_posts table with the wp_template and wp_template_part post types.

---

3. Key Differences: Theme Editor vs. Site Editor

Feature	Theme Editor	Site Editor
Changes Applied To	Physical theme files on the server	Database (wp_posts table)
File Types Editable	PHP, CSS, JavaScript	Block templates and global styles
Risk of Overwrites	Changes can be overwritten by updates	Changes persist across updates
Compatibility	Works with all themes	Requires block-based themes

---

4. Best Practices for Customizing Themes

• Use a Child Theme for the Theme Editor: If you’re editing theme files using the Theme Editor, create a child theme to ensure your changes aren’t lost when the theme is updated. Child themes inherit the functionality of the parent theme while keeping your customizations separate.
• Leverage the Site Editor for Block Themes: For block-based themes, use the Site Editor to make database-level changes that are update-safe. You can also export changes made via the Site Editor as a ZIP file and reuse them across sites.

---

5. Example Workflow

Here’s an example of how changes are applied in both editors:

Scenario: Adding a Custom Style

• Using Theme Editor: You might add custom CSS to the style.css file of your theme. The file is stored in /wp-content/themes/<your-theme>/style.css on the server. These changes affect all installations of the theme unless overwritten by updates.
• Using Site Editor: You adjust the color palette and typography through the editor’s global styles interface. These changes are saved in the database (wp_posts table) and will not be affected by theme updates.

---

Conclusion

Both the Theme Editor and Site Editor are powerful tools for customizing WordPress themes. Use the Theme Editor for file-level changes and the Site Editor for database-driven modifications, especially in block-based themes. Understanding where changes are stored helps you make better decisions and keep your site maintainable.

Which tool do you prefer for customizing WordPress? Let us know in the comments!

---