Hello!
Creating a unique, original and flexible navigation menu in WordPress can be challenging. There are many commercial and free plugins out there to establish navigation systems, however many of the commercial options seem to be “overkill” providing many bloated options with embedded CSS that can be difficult to adjust by a novice user.
What we wanted to do is put together a very simple and clean navigation menu that sticks to the top of the screen and is mobile friendly in a simple yet flexible way.
We created a plugin, which you can view by clicking here, to do just that!
The plugin utilizes FontAwesome, Modernizr, Google Fonts and CSS from Codyhouse to put together a simple and clean navigation menu solution. Below I’ll walk through the different components that went into this plugin in order to tie everything together in an easy to use solution.
Register settings to customize the menu
We wanted to give enough flexibility to customize the look and feel of the navigation menu so that novice users could style the menu elements themselves. More advanced users can easily overwrite the classes in their stylesheet to customize further if they wish. Future versions of the plugin may include even more styling options and behavior.
//register our settings
register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_enabled' );
register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_logo' );
// options for menu fonts
register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_bar_font' );
register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_bar_font_col' );
register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_ovr_font' );
register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_ovr_font_col' );
// options for menu bar and overlay color and opacity
register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_design_bar_col' );
register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_design_bar_tra' );
register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_design_ovr_col' );
register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_design_ovr_tra' );
// options for social media accounts
register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_social_facebook' );
register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_social_twitter' );
register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_social_instagram' );
register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_social_googleplus' );
register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_social_linkedin' );
We have a total of 15 menu options in the back-end administration area. The options include choosing your Google font as well as overlay and menu bar color as well as opacity.
Some of the options above, when defined, perpetuate inline styling via the plugin in order to dynamically apply the CSS to the menu :
$shift8_fullnav_custom_css = "
.fn-header {
background-color: {$shift8_fullnav_bar_color};
}
.fn-primary-nav {
background-color: {$shift8_fullnav_ovr_color};
}
.fn-secondary-nav a, .fn-menu-text {
font-family: '{$shift8_fullnav_bar_font[0]}';
color : {$shift8_fullnav_bar_font_color};
}
.fn-primary-nav-trigger {
color: {$shift8_fullnav_bar_font_color};
}
.fn-menu-icon, .fn-menu-icon::after, .fn-menu-icon::before, .fn-primary-nav-trigger .fn-menu-icon.is-clicked::before, .fn-primary-nav-trigger .fn-menu-icon.is-clicked::after {
background-color: {$shift8_fullnav_bar_font_color};
}
.fn-menu-icon.is-clicked {
background-color: transparent;
}
.fn-primary-nav a {
font-family: '{$shift8_fullnav_ovr_font[0]}';
color : {$shift8_fullnav_ovr_font_color};
}
.shift8-social {
color: {$shift8_fullnav_ovr_font_color};
}
";
wp_add_inline_style( 'shift8-fullnav-style', $shift8_fullnav_custom_css );
The last line in the above snippet wp_add_inline_style is what injects the CSS.
Use Google Fonts for your Menu
For an advanced user, you should be able to overwrite the fonts used for this navigation menu with whatever you want. Alternatively we have provided the ability to select any Google font from a list. Future versions will include weight and size selections. What we want is to build a list of Google fonts, return it as an array and then use that array as a select list for the user to choose in the administration settings for the plugin.
What was implemented was a function that gets the list of fonts straight from google, but saves the results in a cached file so that we dont have to query google every time the page is refreshed :
// Function to get list of Google Fonts
function shift8_get_google_fonts() {
$apikey = '';
$fontFile = plugin_dir_path( __FILE__ ) . 'cache/fonts.json';
//Total time the file will be cached in seconds, set to a week
$cachetime = 86400 * 7;
if(file_exists($fontFile) && $cachetime < filemtime($fontFile)) { $content = json_decode(file_get_contents($fontFile)); } else { $googleApi = 'https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key=' . $apikey; $ch = curl_init(); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($ch, CURLOPT_HEADER, false); curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); curl_setopt($ch, CURLOPT_URL, $googleApi); curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE); $fontContent = curl_exec($ch); curl_close($ch); $fp = fopen($fontFile, 'w'); fwrite($fp, $fontContent); fclose($fp); $content = json_decode($fontContent); } if($amount == 'all') { return $content->items;
} else {
return array_slice($content->items, 0, $amount);
}
}
You can see above that we are making a simply query via curl to get the data, but before that we are checking to see if the cache file is out of date otherwise we will use the local file (which is much quicker anyways).
Once we store the returned array into a variable, we can simply loop through the array and build a simple select dropdown :
foreach ($fullnav_google_fonts as $fullnav_google_font) {
$fullnav_google_font_item = esc_attr( $fullnav_google_font->family ) . ":" . implode(',', $fullnav_google_font->variants );
$selected = ($fullnav_google_font_item == get_option('shift8_fullnav_bar_font') ? 'selected' : '');
echo "" . esc_attr( $fullnav_google_font->family ) . "";
}
Color selector
The other interesting thing we did was implement a simple html color selector to easily choose your overlay, font and menu bar colors. In the plugin code when defining the options for the administration settings of the plugin, we implemented color options :
Menu Overlay Font color :
What you need to do is to load the wp-color-picker style and scripts so that you can utilize it.
wp_enqueue_style( 'wp-color-picker' );
Then you need to load your own jquery to implement the trigger for the color selection popup :
wp_enqueue_script( 'fullnav-color-picker-script', plugins_url('js/shift8_fullnav_color.js', __FILE__ ), array( 'wp-color-picker' ), false, true );
Inside the script you will see the jQuery trigger :
jQuery(document).ready(function($){
$('.fullnav-color-field').wpColorPicker();
});
