How to add custom css in your theme

How to add custom css in your theme

On this page, we’ll take a look on how we can add a custom stylesheet link in you wordpress theme.

Sometimes , it is necessary to create some custom stylesheet to customize theme and template file .

So Let get started with the possibility of how  to link style  or call custom style using plugin or  by some sort of code.

By using some  plugin to add style  your theme.

1. Simple Custom CSS and JS

Customize your WordPress site’s appearance by easily adding custom CSS and JS code without even having to modify your theme or plugin files. This is perfect for adding custom CSS tweaks to your site.

Features

  • Text editor with syntax highlighting
  • Print the code inline or included into an external file
  • Print the code in the header or the footer
  • Add CSS or JS to the frontend or the admin side
  • Add as many codes as you want
  • Keep your changes also when you change the theme

2.WP Add Custom CSS

WP Add Custom CSS allows you to add custom CSS to the whole website and to individual posts, pages and custom post types (such as Woocommerce products).
The CSS rules applied to the whole website will override the default stylesheets of your theme and plugins, while the CSS rules applied to specific pages, posts or custom post types will override the main stylesheet too.

You can edit the main stylesheet from the the “Add custom CSS” settings page.
The plugin also creates a new “Custom CSS” box in the editing area to add custom CSS to specific posts, pages and custom post types.

By using some  custom code to add css  in your theme file.

1. Using get_stylesheet_directory_uri() function

What is get_stylesheet_directory_uri() is wordpress core  function that  path your active  theme directory url.
so if you want to link file that present in your theme directory under css folder so let’s have a look on code snippet

function addMyScript() {
    wp_enqueue_style('mytheme', get_bloginfo('template_directory').'/style.less', array('blueprint'), '', 'screen, projection');
}
add_action('wp_head', 'addMyScript');

The above snippet code will point   active theme directory  under the the active theme directory it will point css folder . Under the css folder it will point your file name.

The above code need to copy and   paste in  your active theme directory  header.php file.

2.Using wp_enqueue_style function

function addMyScript() {
    wp_enqueue_style('mytheme', get_stylesheet_directory_uri().'/css/yourstlename.css');
}
add_action('wp_head', 'addMyScript');

wp_enqueue_style function is wordpress function that used for enqueue style . wp_enqueue_style is the best way to link our custom stylesheet.

1 Comment

  • June 13, 2021

    Ahana Web Solutions

    Nice information

Leave A Reply