How To Add Additional CSS to a WordPress Theme When “Customize” Is Missing

How To Add Additional CSS to a WordPress Theme When “Customize” Is Missing

Machine-readable: Markdown · JSON API · Site index

Поделиться Telegram VK Бот
Транскрипт Скачать .md
Анализ с AI

Оглавление (1 сегментов)

Segment 1 (00:00 - 02:00)

Can you add additional CSS to your WordPress theme if it doesn't have a customize option? Yes, you can. It's just a little bit confusing. Here's how it works. On this demo site, I have a theme that supports Customize, and I can easily access the Additional CSS field. If I open it, I can paste Additional CSS into this field. Let's try it out. I will paste in the snippet that sets the background color of the entire website to ‘rebeccapurple’. It works exactly as you expect. But what about themes that don't support Customize? I'll switch to another demo. The Twenty Twenty-Five theme is active here. And as you clearly see, there is no Customize option here. I will open the Editor menu here. And in the Editor menu, there is no Additional CSS field. But it's actually available; it's just hidden. To find it, you need to open any page. So I will open the Pages menu. I will open the “Additional CSS Test” page. And here under “Styles” icon and “More,” I will find the Additional CSS field. I will open it. I can paste my snippet here, and it will work exactly as expected. This is confusing because it seems like this Additional CSS is actually only available on the page that I have opened, but that's not really the case; this is the global CSS that will be available across your entire site. I will save this, open the preview. And let's just go to the homepage so you can see for yourself that the entire site is purple, exactly as expected — this is global CSS. There is another way that you can access the Additional CSS field if your theme, like this one, doesn't have a Customize option. I will return to admin, and I will manually open customize. php file directly in the URL bar. So this is still accessible, it's just not available in the menu. Here is my Additional CSS field. Another curious thing about this is that this field is not related to the field that we've seen earlier in the Pages, Additional CSS. So the snippet that we've pasted earlier, and that is still applied to this page, is not visible here. Let's set the ‘background-color’ to ‘red’ here, and this will be applied, and this will work, but the specificity of the Pages Additional CSS is higher than this, so that's why the purple background is overriding my red background. If I set “! important” here and publish the page, then refresh it, you'll see that the CSS now is applied. Let's remove the “! important” because I never want to use “! important” in my CSS. Now the page is purple again because the CSS in the Additional field from Pages has higher specificity than this Additional CSS. So those are your two options to add additional CSS to your theme in WordPress if the theme doesn't have a customize option. Thank you so much for your attention. My name is Zoran Jambor. I will see and hear you in a different additional CSS field. Or rather, in the next video.

Другие видео автора — CSS Weekly

Ctrl+V

Экстракт Знаний в Telegram

Экстракты и дистилляты из лучших YouTube-каналов — сразу после публикации.

Подписаться

Дайджест Экстрактов

Лучшие методички за неделю — каждый понедельник