Why I can’t add a CSS style in this WordPress theme?

2 comments

1. You are using plugins_url – therefore pointing to completly different directory than your current theme. If you are just trying to enqueue a theme style do it like this:

   function load_theme_styles() { 
       wp_enqueue_style('main-css', get_template_directory_uri() . '/style.css', array(), '1.0', 'all');
   }
   add_action('wp_enqueue_scripts', 'load_theme_styles');
   

   the wp_enqueue_style takes some parameters. In the example above I am using:

   • A unique ID (handle) – I can then use it for dependencies
   • Path to the style itself – this should be obvious
   • An array() of dependencies (in this case empty) – for example if we had two styles enqueued we could set in the second one array('main-css') and WP would then WAITED until the the style with the ID of main-css style is loaded before loading it.
   • Version – Now this can be whatever you want. I always set this as for example when I update themes and a client has issues I can quickly determine the version just by looking at the code. Another good thing about it is that updating files with higher (or lower) version number will ensure the styles are actually loaded instead of being pulled from cache.
   • The last one is just media for which this stylesheet has been defined.

   PS. No need to register it first. It is just as safe as registering and then calling it via enqueue. If you want to register your scripts, but not directly load them in your pages, you can register the files once, and then load them when you need them just by calling wp_enqueue_script( $handle ) (just pass the $handle and the rest will be taken from the wp_register_script()). So if you want to just load it (which is 99% of times) you can just omit it.

   Refference:

   • wp_enqueue_style
   • wp_enqueue_script

   As for your header.php file this part:

   <script language="javascript" type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js.js"></script>
   <!--
   <script language="javascript" type="text/javascript">    
       if(f)
       {
           write_css('<?php bloginfo('stylesheet_directory'); ?>');
       }
   </script>
   -->
   

   should be deleted and any script should be added to the WP just the same way you are adding styles. For example:

   function load_java_scripts() {
       wp_enqueue_script('custom-js', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0', true);
   }
   add_action('wp_enqueue_scripts', 'load_java_scripts');
   

   Same thing goes for other elements like for example google fonts etc. Use wp_enqueue_scripts to add them as well:

   function load_google_fonts() {
       $protocol = is_ssl() ? 'https' : 'http';
       wp_enqueue_style( 'theme-default-fonts', "$protocol://fonts.googleapis.com/css?family=ADD_YOUR_DESIRED_FONT_FAMILIES_HERE' rel='stylesheet' type='text/css" );}
   add_action( 'wp_enqueue_scripts', 'load_google_fonts' );
   

   Where I have ADD_YOUR_DESIRED_FONT_FAMILIES_HERE you should add font families from Google font. If you want multiple just divide them with |. For example if I want Roboto font and PT Serif font I would write it like this Roboto:400,700,300|PT+Serif:400,700,400italic

2. 1. When registering and enqueueing CSS files you need to use wp_register_style() and wp_enqueue_style().

   2. If this code is in your theme’s functions.php file you want to use get_template_directory_uri() when referencing the path of your custom CSS files.

   Your code is very close, but should be corrected to the following:

   function wpb_adding_styles() {
           wp_register_style('my_stylesheet', get_template_directory_uri() . '/style.css');
           wp_enqueue_style('my_stylesheet');
   }
   
   add_action('wp_enqueue_scripts', 'wpb_adding_styles');
   

Comments are closed.