Creating a Social Media Menu from Icon Fonts with FontAwesome

Twitter Icon Fontawesome

How to make social media menus from icon fonts using the awesome FontAwesome. Fontawesome is widely used and supported in all modern browsers and older browsers.   <link href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css” rel=”stylesheet”> You can link to the Fontawesome CSS file via a CDN or just copy the download it to your site. If using WordPress you can…

Read More

Add a menu to WordPress page with PHP action hooks

Add Wordpress Menu Php

Adding a menu to WordPress via PHP and action hooks requires three steps, registering the menu location, assigning a menu to it and then placing the menu with an action hook. Register WordPress Menu Registering a menu is done with register_nav_menu, below is an example to register a ‘Store Menu’ menu. add_action( ‘init’, ‘wpb_custom_new_menu’ );…

Read More

Adding a Site Login/Logout Link to an existing Menu in WordPress

Add Login Logut To Menu

You can add on to the end of an existing WordPress menu a site login/logout link. The WordPress menu must be registered and have a theme location, this will not work with custom menus. This needs to be added to your theme functions.php file add_filter( ‘wp_nav_menu_items’, ‘themeprefix_login_logout_link’, 10, 2 ); function themeprefix_login_logout_link( $items, $args ) { if(…

Read More

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

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