• So, I am currently working on creating a website for myself that is based off bootstrap. However, when I wrote the code I ended up creating multiple styleesheets. It looks something like this as static html

    <html lang="en">
      <head>
        <meta charset="utf-8">
    
        <title>Home</title>
    
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <!-- Loading Bootstrap -->
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/bootstrap-responsive.css" rel="stylesheet">	
    
        <!-- Loading Flat -->
        <link href="css/flat.css" rel="stylesheet">
    
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements. -->
        <!--[if lt IE 9]>
          <script src="js/html5shiv.js"></script>
        <![endif]-->
    <--Other JavaScript located at end of document for faster loading -->
      </head>

    So because of this, I have a stylesheet, which relies on another stylesheet. In other words, when I try to load the style.css I cannot just copy and paste the code together from the stylesheets while maintaining DRY.

    I’ve looked at the CODEX for documentation for how to use the enqueue_style function, but it doesn’t make sense and has just left me confused.

    Have any suggestions for how to overcome this issue, and properly set up the style sheets for the custom theme?

    Any help would be super appreciated

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    What part left you confused in the codex?

    Thread Starter Daniel_Fernandez

    (@daniel_fernandez)

    Specifically, how you use enqueueto create a hierarchy (ie dependencies).

    When I tried using the example and following the format, I end up with the exact same styling. I assume I’m just using the dependencies wrong, but here is what I did when I tried doing it.

    <?php
    //Load Theme css//
    
    function theme_styles()
    {
      wp_register_style('bootstrap-responsive', get_template_directory_uri().'/css/bootstrap-responsive.css', array('style.css'), '1.0', 'screen');
      wp_register_style('flat', get_template_directory_uri().'/css/flat,css', array('style.css, bootstrap-responsive.css'), '1.0', 'screen');
    
      // enqueing:
      wp_enqueue_style('main', get_template_directory_uri() . '/style.css');
      wp_enqueue_style('bootstrap-responsive');
      wp_enqueue_style('flat');
    }
    add_action('wp_enqueue_scripts', 'theme_styles');
    
    ?>
    Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    For the dependencies you don’t need the extension just the name.

    Example:

    function theme_styles(){
      wp_register_style( 'theme-style', get_template_directory_uri() . '/css/style.css' );
      wp_register_style( 'blue-scheme', get_template_directory_uri() . '/css/blue.css', array( 'style' ) );
      // Enqueue
      wp_enqueue_style( 'theme-style' );
      if ( get_option( 'color_scheme' ) == 'blue' )
        wp_enqueue_style( 'blue-scheme' );
    }
    
    add_action( 'wp_enqueue_scripts', 'theme_styles' );

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to create a hierarchy of stylesheets for WordPress’ is closed to new replies.