Synchronizing Ultimatum Theme Bootstrap & UberMenu – Part 2

Facebooktwittergoogle_plusredditpinterestlinkedintumblrFacebooktwittergoogle_plusredditpinterestlinkedintumblr

Some while ago I wrote about this subject, and now I can revisit this in a second post; Synchronizing Ultimatum Theme Bootstrap and UberMenu – Part 2.

Since I last covered this topic, a new version of UberMenu has appeared; UberMenu 3, and boy is it different. So, over to CodeCanyon and download the latest version (at the time of writing this is 3.1.0.1), along with the new Flat Skins Pack and Conditionals plugins. Soooo many new options. This is like being used to a small village shop and for the first time walking into a big city Hyper Market. Where to start? Well, since the last time I did this, when I spent ages making a custom css file, I have discovered Less.js, and so this time I have written a .less file that when compiled makes a css file that overrides UberMenu’s default styling to make it work and look like a Bootstrap 3 Bootswatch Darkly themed navigation bar. Whilst I freely admit that these are not the most tidy of files (there may well be coding that isn’t required and I will come back and edit these files from time to time as I modify them for my own use), here are the files for you to download in an archive file:

Download ubermenu-darkly3.zip
in a ZIP archive

Simply set Ubermenu Basic Configuration Skin to none (disable) and enqueue this new css file from your functions.php, like this:

1
2
3
4
5
function add_ubermenu_darkly3_style() {
  wp_register_style( 'ubermenu_darkly3', get_stylesheet_directory_uri() . '/css/ubermenu-darkly3.css', false, '1.0.0' );
  wp_enqueue_style( 'ubermenu_darkly3' );
}
add_action( 'wp_enqueue_scripts', 'add_ubermenu_darkly3_style', 99 );

I also wanted the navigation bar to be ‘sticky’, so I also purchased the UberMenu – Sticky Menu Extension – it was only $5. I did try a lot of free sticky plugins, but couldn’t get any of them to work with UberMenu. Anyway, I digress. The reason for doing this was so that the Bootswatch Darkly themed navbar on this site could become a ‘megamenu’, allow shortcodes and widgets in the menu and allow conditional menu items. Hopefully, this will then allow me to include a menu from Ajax Search Pro for WordPress in the navbar. Assuming that I can achieve this, I will then need to style the search tool to match the Darkly theme. Whilst I was playing with this idea, I think I found a ‘bug’ in Ajax Search Pro for WordPress, in the file ‘hooks.php’, the last line reads:

1
add_action('wp_print_styles', 'search_stylesheets');

should read:

1
add_action('wp_enqueue_scripts', 'search_stylesheets');

Why? According to http://codex.wordpress.org/Plugin_API/Action_Reference/wp_print_styles: Since WordPress 3.3 wp_print_styles should not be used to enqueue styles or scripts.

Why is this a problem? If, like me, someone wants to edit the stylesheet by removing it and enqueuing our own, we can’t. Maybe you could make this little change for the next release? Otherwise I have to be careful about when I update that the updates don’t remove what I have done. I have reported this to the plugin’s authors. And so, on to see if I can add that search bar to the main navbar. I will be back to finish this post later on, probably tomorrow.

Categories: Ultimatum.