Hybrid Core comes packaged with multiple jQuery scripts that you may optionally use within your theme (possibly more in the future). This feature merely allows you to easily load these scripts with a single line of code.
Enabling scripts for use
To enable any scripts, you must start with the following line of code in your theme setup function.
add_theme_support( 'hybrid-core-scripts' );
From that point, you must choose the scripts you want to load. The following scripts are the current options.
- The nav-bar version of the Superfish script that helps when creating nav-bar style drop-downs.
Suppose you wanted to load the drop-downs script, your code would look like the following.
add_theme_support( 'hybrid-core-scripts', array( 'drop-downs' ) );
nav-bar options are meant to be used alongside the WordPress nav menus system. Although, both should not be used at the same time. If you’re unfamiliar with how to create menus, start with the Hybrid Core nav menus tutorial.
Using the correct HTML for menus
<div class="menu"> or
Assuming you’re using the WordPress function
wp_nav_menu() (you should be), this is fairly simple. Just set the
container_class argument to
Here’s an example of a menu using this class.
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container_class' => 'menu', 'menu_class' => '', 'menu_id' => 'menu-primary-items', 'fallback_cb' => '' ) ); ?>
Styling your menus
The Hybrid Core framework comes packaged with CSS files called
nav-bar.css, which are located in the framework’s
/css folder. These stylesheets are simply a base to get you started. You can either import one into your theme’s
style.css file or copy/paste the code directly.
You will definitely have to add custom styles for your drop-downs though. You’re building a custom theme, so don’t expect these stylesheets to do all the work for you. You’ll still need to make your menus look pretty.