How to edit CSS in WordPress

🗓️ Updated: 17.08.2022
💬Comments: 0
👁️Views: 586

How to add your own styles in WordPress or edit existing ones? Very simple! There are several ways to do this.

The first way (wrong way!)

The most common way people edit styles in the template is when they simply go to the admin dashboard in section Appearance -> Theme Editor and there they find the file style.css, where they paste their css code.

Wrong way to edit CSS code in WordPress

Click the “Update File” button, and now you’ve added your CSS code to WordPress. But why you shouldn’t do that? Because the next time you update your theme (and you need to update templates!) all the changes you’ve made will be gone.

What should you do? You can create a child theme and edit the CSS file styles there. How to do this we have described in this article.

Also, you should not edit the style.css file of the parent theme via your hosting file manager or FTP. The reason is still the same – your code will be deleted after the template is updated.

The second way

This way is more correct. WordPress allows you to edit CSS in a special built-in editor. How it works?

  1. Select the “Appearance -> Customize” tab in the admin panel;
  2. Then in the left menu find the tab “Additional CSS” (usually at the very bottom);
  3. Insert the css code you want and don’t forget to click on the “Publish” button at the top.

IMPORTANT: These styles will be saved only for your current theme. That means, if you decide to change the template, your CSS code will stop working.

But, again, in our opinion, the most correct way to edit the CSS code in WordPress is to create a child theme and add/change styles already in it.

Was the article helpful?
👍
Yes - 2
👎
Not - 1
💬Comments:

CSS Головоломки в Telegram
Subscribe and don't miss:
Actual news
Interesting puzzles
Useful links
Our rating
🏆The best website hosting
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
How to make a burger menu – complete code and detailed explanation
Views: 18273
Appearance of elements on scrolling
Views: 16834
How to center an image with CSS
Views: 6943
How to make a smooth zoom of the image on hover – effect on pure CSS
Views: 6784
How to make a button click effect in CSS
Views: 6206
Check of knowledge
🤔How well do you know CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Very Peri
🤔Color of 2022
The Pantone Color Institute has announced the color of the year 2022. It's a shade of lilac lilac shade called 17-3938 Very Peri.
#6667ab