Do you think about how to edit CSS and PHP of themes in WordPress? This tutorial will help you edit theme files such as functions.php or style.css through the appearance editor.
Table of Contents
PHP editing through theme editor
In WordPress, the Theme Editor is used to edit theme files. This feature allows you to directly edit the individual CSS and PHP files of the template you use. For example, you can use it to edit functions.php.
Warning about risks of direct editing of the theme
Use the Editor tool with caution. If you make changes to files that affect your site’s appearance incorrectly, the page may not display at all. At best, it will display incorrectly.
WordPress itself alerts you with a pop-up message window:
You appear to be making direct edits to your theme via WordPress dashboard. We recommend that you don’t! Editing this code is dangerous, and can leave you unable to log back in to WordPress and undo changes. There’s no need to change your CSS here – you can edit and live preview CSS changes in WordPress’s built in CSS editor. If you want to make further changes, you may want to use child themes.
If you decide to go ahead with direct edits anyway, make sure to back up all your site’s files before making changes so you can restore a functional version if something goes wrong.
If you have no knowledge of HTML, CSS, or PHP, the changes you make may make the page totally unusable. Therefore, I recommend using this feature only if you have the necessary knowledge.
Tip: if your site crashes, log in via ftp to the file you edited and return that change.
How to edit CSS WordPress themes
To edit the theme’s style, it’s better to use the CSS editing feature to see changes live. For example, you can use it to edit the style.css file.
You can get there by clicking Edit CSS in the menu:
Click to get directly to the editor (also called Customizer):
Add your own CSS code here to customize the appearance and layout of your website. Learn more about CSS.
Use the keyboard to navigate:
- In the editor area, the Tab key inserts a tab.
- Use the Esc key followed by the Tab key to exit the editor area.
- Screen reader users: You may need to press Esc twice to exit form mode.
The edit box automatically highlights the code syntax. You can disable this in your user profile to work in text mode.
Editing CSS and PHP in WordPress – Conclusion
It is best to use a child theme, because changes made directly to the theme will be lost by update. Moreover, there’s a risk that your website crashes.
It is also useful to use a child theme to edit CSS, but programming skills are required there, so the above-mentioned editor is sufficient for users.
