Skip to content

Add a CSS class on a current active menu item

Add Css Class Active Menu

With manual menus you may need to add a CSS class to the current menu item that is active, below is a jQuery solution, that utilizes the URL of the page to match the link and add the CSS. (function($){ $(function() { // Document Ready activeMenu(); }); // Functions // @link https://stackoverflow.com/questions/4866284/jquery-add-class-active-on-menu function activeMenu() {…

Read More

Add Menu Items at the start or end or in a certain place with wp_nav_menu_filter

Add Menu Item In Place

wp_nav_menu_filter allows you add items at the end of a menu in WordPress but what about adding an item at the start of a menu or in a specific place. add_filter( ‘wp_nav_menu_items’, ‘prefix_add_menu_item’, 10, 2 ); /** * Add Menu Item to end of menu */ function prefix_add_menu_item ( $items, $args ) { if( $args->theme_location…

Read More

WooCommerce Accordion Style Expand/Collapse Product Category Menu

Woocommerce Product Category Menu

Here is a jQuery solution for a WooCommerce accordion style menu for the product category menu that can be assigned with a WooCommerce widget, the menu works best when all product categories are assigned to a parent category. The Accordion menu will then expand and collapse on click with the first parent category appearing expanded,…

Read More

Animating the Hamburger Menu Toggle

Animating Hamburger Menu

There is a comprehensive animating Menu toggle CSS set of rules created by Jonathan Suh, it’s got more animation options than you can poke a stick at. The basic mark up in HTML is… <button class=”hamburger hamburger–collapse” type=”button”> <span class=”hamburger-box”>< <span class=”hamburger-inner”></span> </span> </button> The second CSS class for the button is the animating class…

Read More

Create a content flyout overlay in Beaver Themer Layout Header

Overlay Flyout Beaver Builder

This is a starter guide to get you up and running with an overlay flyout on click of hidden content in Beaver Builder – there is nothing indeed Beaver Builder specific about it other than it’s easy to build the overlay content within the builder itself, display it normally in the BB editing screen but…

Read More

Add WooCommerce MyAccount Page Login/Logout to Menu

This code adds a login/logout link to your WordPress primary menu to log the user into the WooCommerce My Account page and then also log out to the same or different page. It differs from the referred article as that adds the WordPress default login/logout page. The menus need to be registered via register_nav_menu and positioned with theme_location,…

Read More

Add Search Icon After Menu using Beaver Themer with the Beaver Theme

add-search-icon-to-menu

Here’s how you can add a search icon after a menu in a header done in the Beaver Theme using Beaver Themer. Create a Shortcode for the Beaver Builder Search function add_shortcode( ‘bb_search’,’bb_search_shortcode’ ); /* Add Search via shortcode */ function bb_search_shortcode() { ob_start(); FLTheme::nav_search(); return ob_get_clean(); } Create the Header in Beaver Themer Create…

Read More
Scroll To Top