11

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?

2 Answers 2

20

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' );
4
  • 1
    Why not put the conditionals inside the wp_enqueue_scripts callback? None of that needs to go in the document head. Mar 5, 2013 at 15:01
  • 1
    I didn't think of that, a edit is on the way Mar 5, 2013 at 15:05
  • +1. I edited to replace get_bloginfo( 'stylesheet_directory' ) with get_template_directory_uri(). References to stylesheet directory should be reserved for Child Themes. Mar 5, 2013 at 15:19
  • Nice & Fine. It solved me here. Thanks Mike. I'll add this thread into Codex, inshALLAH. Thanks. Mar 8, 2013 at 10:30
1

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' );    
    }    
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.