EASILY ADDING CUSTOM CSS USING THE WORDPRESS THEME CUSTOMIZER

New customizer feature with WordPress 4.7 and upward

Adding CSS without editing any theme CSS files

To change, add or tryout your custom CSS is a often called question in many support threads. The answers are at most only the CSS snippet you may add to solve your problem but not how to add because this part is very inconveenient. You can try it with the browser tools and if it works use your FTP client or the editor behind appearance. With WordPress 4.7 there is a elegant and quite easy way to add small inline CSS. Users can add custom CSS directly from WordPress admin area. This is super-easy and you would be able to see your changes with a live preview instantly.
There are many ways in the WordPress admin back-end go to the customizer.

Go to the dashboard and click the buttom "Customize Your Site"
Go to the dashboard and click the buttom “Customize Your Site”

WordPress provides with the customizer, a “live-preview” editor. You will see options which was implemented by you Theme. All options are change immediately while editing. That’s why it called the “Live-Preview” editor.

Changes will be available after applied

The customizer is opened with the left side panel and shows a bunch of options. One of this option panels is the tab “Additional CSS”. Click this tab.

In the customizer there is a tab "Additional CSS"
In the customizer there is a tab “Additional CSS”

The tab opens and show a large text box where you can add custom CSS selectors. And the customizer isn’t the customizer wouldn’t be added or changed CSS rules immediately shown while writhing at your site in the right side.

In the "Additional CSS" tab you can write you own custom CSS which is applayed to your site
In the “Additional CSS” tab you can write you own custom CSS which is applayed to your site

After you’re satisfied with your added CSS rules don’t forget to click on the “Save & Publish” button on the top of the left side.
This easy and fast method can’t solve all. So called “inline code” for CSS is also for smaller snippets good. As opposed to external added files, which was added once and cached by the browser, are made for large CSS code because the code’s logic is separated and better to update and maintain.

Now, the new added CSS selectors looks create within the head-area on the lowest position to override the other CSS.

The added CSS is added to the heas area and very good for smaller code snippets
The added CSS is added to the heas area and very good for smaller code snippets

Leave a Reply

Your email address will not be published. Required fields are marked *

WordPress PlugIns & E-Commerce - Kometschuh © 2024