Hybrid Core has a stylesheet feature that will automatically load your stylesheet in the correct place in the header of your theme. So, you no longer have to hardcode this feature into theme’s
header.php template. Plus, this method offers much more flexibility for your child theme users (and plugins) to do some neat things.
Enabling styles feature
The most basic way to enable this feature in your theme is to simply add the following line of code to your theme setup function.
add_theme_support( 'hybrid-core-styles', array( 'style' ) );
This will load the active theme
style.css file automatically. However, there are other options. The following is a list of all the available stylesheets at your disposal.
- A base reset stylesheet that set margins and line heights for 18 pixels.
- A base reset stylesheet that set margins and line heights for 20 pixels.
- A base reset stylesheet that set margins and line heights for 21 pixels.
- A base reset stylesheet that set margins and line heights for 22 pixels.
- A base reset stylesheet that set margins and line heights for 24 pixels.
- A base reset stylesheet that set margins and line heights for 25 pixels.
- Starter set of style rules for drop-down menus.
- Starter set of style rules for nav-bar style drop-down menus.
- A complete stylesheet for handling gallery layouts. For use with the Cleaner Gallery extension.
- Parent theme’s
style.cssfile. This is only loaded if a child theme is active.
- Active theme’s
style.cssfile. This is the child theme stylesheet if a child theme is active.
Of course, you wouldn’t use all of the stylesheets at once. You’d only use those that made sense to use in the design of your theme.
Here’s an example of how one might use this feature with multiple stylesheets:
add_theme_support( 'hybrid-core-styles', array( '25px', 'drop-downs', 'gallery', 'parent', 'style' ) );
Also, the styles are loaded in the order that you add them, so keep that in mind.
All Hybrid Core stylesheets come in mini versions. There’s both a
style-name.min.css file for each style. The minimized version of each is loaded unless you’ve explicitly set
true in your
While not required, you are recommended to add a
.min version of your theme’s
style.css. To do so, simply compress your stylesheet code with a tool like CSS Drive’s Compressor and save it in a file called
style.min.css in your root theme folder. The mini version will automatically be used.
The great thing about this is that it allows you to add lots of notes and comments in your main
style.css file without having to worry about how many kilobytes your stylesheet is taking up. It allows you to code like you want while still offering a speedy version of the file to your users.