UberMenu 3 - Manual Integration

This video explains residual styling and how to determine when manual integration is necessary and where to place the code.

Link to in-depth video: https://www.youtube.com/watch?v=ejpZAZXPxRw

::Jump to section::

0:45 Automatic vs Manual Integration
-- 0:58 Hard-coded menu wrappers cause residual styling & scripting which break UberMenu, which will require manual integration to prevent the theme from breaking the menu

1:35 Installing a theme that requires Manual Integration
-- 2:07 Assigning a menu to the theme location
-- 2:22 Theme's default menu

2:35 Attempting Automatic Integration
-- 2:55 Evaluating the results of Automatic Integration
-- 3:24 Compare the Automatic Integration results vs Direct Injection to see if the theme's menu is interfering with UberMenu
---- 4:20 Visual comparison

4:46 Inspecting the menu to find the source of the Residual Styling
-- 5:08 Locating the theme wrapper which wraps UberMenu
-- 5:50 Testing the solution in Chrome DevTools by removing the root menu class
-- 6:14 Manual Integration strategy: move UberMenu outside of the theme's menu

6:25 Locating the theme's menu within the theme files
-- 6:34 Start in the header.php
-- 6:58 Look for wp_nav_menu, or the class that you found via DevTools
-- 7:25 Test the result by deleting the CSS root class
-- 7:42 Using conditional PHP and child themes to make the manual integration robust and maintainable

8:23 How the theme could support Automatic Integration instead
-- 8:35 Make sure wp_nav_menu() creates all of the HTML for the menu, rather than hardcoding the wrapper
-- 9:09 Rewriting this menu using only the wp_nav_menu() function http://codex.wordpress.org/Function_Reference/wp_nav_menu
---- 9:33 Define 'container_class' parameter
-- 10:25 Compare the output of the two menus
---- 10:37 Change the 'container' to 'nav'
-- 11:16 Now Automatic Integration can work, without changing the theme's menu

14:17 Adding the Manual Integration Code to the Theme
-- 14:30 Generating the Manual Integration PHP code in the UberMenu Control Panel
-- 14:55 Paste code into the theme template
-- 15:17 Conditionally display UberMenu when UberMenu is enabled, display theme menu otherwise
-- 16:24 Results of manual integration (no interference from the theme)

17:11 Creating a child theme to store your changes
-- 17:43 Create the child theme folder in the themes directory
-- 18:03 Add a style.css in the child theme folder
-- 18:15 Create the style.css file header
---- 18:40 Change Theme Name
---- 18:48 Add Template tag to header
-- 19:25 Activating the child theme
-- 19:50 Import the parent theme's style.css to get the theme styles to apply
-- 20:26 Re-assign menu to the theme location
-- 20:58 Undo the change in the parent theme for demonstration (back to square one)

21:31 Making the changes in the child theme to override the parent's header.php
-- 21:40 Create a header.php in the child theme
-- 21:48 Copy parent theme's header.php content
-- 22:00 Test that the child theme's header.php is being used
-- 22:31 Making the manual integration changes in the child theme's header.php
-- 22:50 Results: Menu is now working via manual integration in the child theme

23:14 (Optional) Set your font, which in this case was lost when residual styling was removed
-- 23:26 Using the Customizer to set a Google Font