How to edit CSS in WordPress

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

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 - 5
👎
Not - 2
💬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: 56397
How to make a smooth zoom of the image on hover – effect on pure CSS
Views: 42568
Appearance of elements on scrolling
Views: 41848
How to center an image with CSS
Views: 25880
How to make a button click effect in CSS
Views: 19442
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
Viva Magenta
🤔Color of 2023
The Pantone Research Institute has chosen the color of the year for 2023. They became a carmine-red shade with a purple undertone, which was called Viva Magenta.
#bb2649