How To Add Custom CSS

Estimated reading: 3 minutes 16 views

You can apply your own custom CSS code to any theme, not just ours or Kadence. Adding your own Custom CSS in custom areas on your website offers design flexibility to your theme and your code won’t be lost if you updated your theme. There are several ways to add custom CSS to your website, which one you use depends on your comfort level and the extent of customization needed. We are going to cover all options; let’s get started:

WordPress Customizer:

There is the built in WordPress option which comes with an easy, built-in custom CSS (aka Cascading Style Sheets) in the Customizer. To add custom CSS markup, go to your WordPress dashboard, then Appearance > Customize. Click on the Additional CSS section, add your custom CSS code in the text area, and hit Publish.

Kadence Page Scripts:

There is the built in Kadence option within your posts and pages. This option is called Page Scripts and is for Kadence Pro users. The Page Scripts can also add custom JS and scripts for the <header>, <body>, and <footer>. This feature is invaluable because you can specific CSS, JS and scripts for your specif post or page rather than add it to the global settings.
To add some custom markup, go to your post or page dashboard, then click on the black Kadence button top right. Scroll to the bottom to locate the Page Scripts, add your custom code, then click on the X to close.

Kadence Custom CSS Selector:

There is the built in Kadence Custom CSS Selector within your posts and pages. This is for Kadence free users and is easily accessible in the Kadence right sidebar settings in your post or page.
Go to the Advanced and scroll down to the Custom CSS, add your custom CSS code in the text area, and hit Publish.

Code Snippet Plugins:

We recommend installing a plugin for global codes. If you’re going to do a lot of global customizing, it’s a better option than using the WordPress Customizer.
We highly recommend WPCode Lite because it’s more flexible than others, there’s no need to upgrade to pro unless you’re a developer, it offers many free snippets, can choose where to run it, won’t publish if the code is wrong so won’t break your site, PHP is included compared to others you have to buy the their pro, and best of all the free version can easily be downloaded from your WordPress Repository.
Install the plugin, then go to Code Snippets > Add New, chose your selector ie CSS, PHP etc.; add your add, hit Publish.

Which Option Should You Use?

All options are great, your choice is dependent on what you prefer and how much customizing you need to do. We personally use the Code Snippet plugin for global, Page Scripts for large code, and Custom CSS Selector for smaller code.

How To Add Custom CSS

WordPress Customizer:

Kadence Page Scripts:

Kadence Custom CSS Selector:

Code Snippet Plugins:

Which Option Should You Use?

Leave a Reply Cancel reply

CONTENTS

Join The Party For Fun Updates freebies & Big Discounts!

your Presence Matters!

Quick Links

Hire Us

Help

How To Add Custom CSS

Paginating A Single Post

Adding Widgets & Sidebars

Recommended Server Requirements

Frequently Asked Questions

Terms Of Use FAQs

Payment FAQs

Order FAQs

Support FAQs

Popular Pre-Sales FAQs

Redesigning FAQs

Adding A Sticky Sidebar Using CSS

Subscribe