How to enqueue the style using wp_enqueue_style()

I’m developing a theme. I added the codes (below) into the header.php. But I posted it into the WP theme repository, and it’s under review, and the reviewer informed me to enqueue the style with wp_enqueue_style()/ wp_enqueue_script(). But can’t understand how to implement it with the function. I’ve seen the directed wp_enqueue_style(); in Codex, but can’t understand how to put the whole bunch of codes with their conditions.

<style type="text/css">
<?php
// If the menu presents, then CSS loads

if ( has_nav_menu( 'secondary' ) ) {
?>
.sec-menu{
width: 100%;
background: #333;
height: 26px;
font-size:16px;
text-transform:uppercase;
}
<?php } ?>
<?php
if ( has_nav_menu( 'primary' ) ) {
?>
#access{
background-color: #333;
height: 26px;
}
<?php } ?>
<?php
if ( !has_nav_menu( 'primary' ) && !has_nav_menu( 'secondary' ) ) {
?>
.sec-menu,
#access{
border-bottom: 2px solid #333;
}
<?php } ?>
</style>

• HOW TO?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

This is what you could do:

1 – Put the CSS in a separate file and save it in your theme directory.
2 – Add the following code in your functions php:

function wpse_89494_enqueue_scripts() {
  if ( has_nav_menu( 'secondary' ) ) {
    wp_enqueue_style( 
      'wpse_89494_style_1', 
      get_template_directory_uri() . '/your-style_1.css' 
    );
  }
  if ( has_nav_menu( 'primary' ) ) {
    wp_enqueue_style( 
      'wpse_89494_style_2', 
      get_template_directory_uri() . '/your-style_2.css' 
    );
  }
  if ( ! has_nav_menu( 'primary' ) && ! has_nav_menu( 'secondary' ) ) {
    wp_enqueue_style( 
      'wpse_89494_style_3', 
      get_template_directory_uri() . '/your-style_3.css' 
    );
  }
}

add_action( 'wp_enqueue_scripts', 'wpse_89494_enqueue_scripts' );

Method 2

Adding a second style.css file for category page archives.

add_action( 'wp_enqueue_scripts', 'wpsites_second_style_sheet' );
function wpsites_second_style_sheet() {
    if ( is_category() ) {
       wp_register_style( 'second-style', get_template_directory_uri() .'css/second-style.css', array(), '20130608');
       wp_enqueue_style( 'second-style' );    
    }    
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0