Overview

For more information:

You can use the theme file editor to edit the individual CSS and PHP files which make up your theme.

Begin by choosing a theme to edit from the dropdown menu and clicking the Select button. A list then appears of the theme’s template files. Clicking once on any file name causes the file to appear in the large Editor box.

For PHP files, you can use the documentation dropdown to select from functions recognized in that file. Look Up takes you to a web page with reference material about that particular function.

When using a keyboard to navigate:

In the editing area, the Tab key enters a tab character.
To move away from this area, press the Esc key followed by the Tab key.
Screen reader users: when in forms mode, you may need to press the Esc key twice.

After typing in your edits, click Update File.

Advice: Think very carefully about your site crashing if you are live-editing the theme currently in use.

Upgrading to a newer version of the same theme will override changes made here. To avoid this, consider creating a child theme instead.

Edit Themes

Editing Twenty Twenty-Five (active)

File: contributing.txt

Select theme to edit:

Theme Files

Selected file content:

=== Contributing to Twenty Twenty-Five ===

= Minifying CSS =

Twenty Twenty-Five has a single stylesheet `style.css` which is enqueued in addition to the global styles coming from core. On a normal production site, when `SCRIPT_DEBUG` is disabled, then the minified version `style.min.css` will be enqueued instead. If you make a change to `style.css`, you'll need to re-minify the `style.min.css` using the built-in npm build tool. As always, it is preferable to use the Site Editor to supply Additional CSS instead of directly editing the theme stylesheet.

Installation instructions

1. Using a command line interface, go to the “twentytwentyfive” directory `cd /my-computer/local-wordpress-install/src/wp-content/themes/twentytwentyfive`.

2. Type `npm install` into the command line, and press the [return] key, to install all Node.js dependencies.

3. The dependencies may take a few minutes to download but once it completes, you’re done.

Usage instructions

1. After making a change to the `style.css` file, run `npm run build` from within the theme directory to regenerate `style.min.css` with your new changes.

2. You can also “watch” the theme directory for CSS changes and re-minify the CSS anytime a change occurs by running: `npm run watch`.

Heads up!

You appear to be making direct edits to your theme in the WordPress dashboard. It is not recommended! Editing your theme directly could break your site and your changes may be lost in future updates.

If you need to tweak more than your theme’s CSS, you might want to try making a child theme.

If you decide to go ahead with direct edits anyway, use a file manager to create a copy with a new name and hang on to the original. That way, you can re-enable a functional version if something goes wrong.

Go back