WordPress: how to edit CSS and PHP of themes

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.

WordPress: how to edit CSS and PHP of themes

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.

WordPress editor témy vzhľad
Theme editor – appearance
💡 Tip: Choosing the right hosting is crucial for a fast website ⏱ . I recommend betting on verified quality ➡️ Bluehost or SiteGround.

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.

WordPress upozornenie editor šablóny
Alert for direct theme editing

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:

WordPress šablóna - ako upraviť CSS
WordPress theme – how to edit CSS

Click to get directly to the editor (also called Customizer):

WordPress CSS editor
WordPress: CSS editor

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.

💡 Tip for themes: From premium themes, I have good experience with StudioPress themes and multifunction themes Divi and Avada.

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.

💡 Do you want a faster ⏱ website? Website speed is important for both visitors and SEO. I got the best results thanks to the WP Rocket plugin, which I highly recommend.
Was this article helpful for you? Support me by sharing, please. 👍

LEAVE A REPLY

Please enter your comment!
Please enter your name here
I agree with the processing of personal data.