In the videos below, we go over migrating your old Hooks and Page Headers to the new Elements module in GP Premium 1.7.
This first video was made by Mike Oliver of Zephyr Studio. It』s about 45 minutes long, and goes over migrating Page Headers to Page Heros.
This next video is much shorter, but goes over the concept of switching to Elements.
Page Headers are from 0:00 to 6:36, and Hooks are from 6:36 until the end.
Our navigation logo option allows you to add logo to the navigation. If you want to display the site title instead, try the PHP snippet below:
add_action( 'after_setup_theme', 'tu_navigation_as_header' );
function tu_navigation_as_header() {
remove_action( 'generate_header', 'generate_construct_header' );
add_action( 'generate_inside_navigation', 'tu_site_title_navigation' );
}
function tu_site_title_navigation() {
?>
<a href="" rel="home">
<?php
}
view raw
gistfile1.txt
hosted with ❤ by GitHub
with the CSS snippet to style it:
.main-navigation .site-branding {
float: left;
}
.main-navigation .site-branding a {
line-height: 60px;
font-size: 20px;
}
The generate_smooth_scroll_elements allow you to initiate smooth scroll on other element classes instead of just ones with the smooth-scroll class.
Use the following PHP snippet to apply smooth scroll to all hash links:
add_filter( 'generate_smooth_scroll_elements', function( $elements ) {
$elements[] = 'a[href*="#"]';
return $elements;
} );
The generate_woocommerce_menu_item_location allows you to change where the WooCommerce cart icon is displayed. If you want the cart icon from primary menu to secondary menu, try this PHP snippet below:
add_filter( 'generate_woocommerce_menu_item_location', 'tu_move_menu_cart_item' );
function tu_move_menu_cart_item() {
return 'secondary';
}
Using a Hook Element, we can replace the default theme site footer with our own HTML.
First, create a new Hook Element.
Then, select the footer hook from the dropdown of available hooks.
When you do this, an option will appear below it asking if you』d like to disable the site footer.
Checking this option will disable the default site footer in the theme.
Now in the hook content you can build your own footer using HTML, or you can use a shortcode to a template created in your favorite page builder.
Using a Hook Element, we can replace the default theme site header with our own HTML.
First, create a new Hook Element.
Then, select the header hook from the dropdown of available hooks.
When you do this, an option will appear below it asking if you』d like to disable the site header.
Checking this option will disable the default site header in the theme.
Now in the hook content you can build your own header using HTML, or you can use a shortcode to a template created in your favorite page builder.
Note: This option requires the Menu Plus add-on in GP Premium.
Starting in GP Premium 1.8, the former Slideout Navigation panel is replaced by the off canvas panel.
First, make sure there is a menu assigned to Off Canvas Menu under menu settings
You can choose to activate your off canvas panel on mobile, desktop, both or disable it completely.
Style
Slide – This is the typical slideout navigation. You can also choose the side it slides out and where the close button is positioned.
Overlay – This is the full-screen overlay style off canvas panel that has been increasingly popular nowadays. When activated, you can choose Set Overlay Defaults and let GP style it for you. These settings can also be changed in Colors > Off Canvas Panel and Typography > Off Canvas Panel.
Menu Item Height
Set the menu item height for the off canvas panel.
Off Canvas Panel Widget Area
The off canvas panel has a widget area, which you can add widgets to in Appearance > Widgets or Customize > Widgets.
You can simply use for widgets, and leave out the navigation completely if you like!
Use Off Canvas Menu Only
Some users wish to use off canvas menu only on desktop. This can be done with the simple method below:
First, create a menu with the desired items and assign it to Off Canvas Menu in theme locations.
Then create an empty menu and assign it to Primary Menu in theme locations
Then you can head to navigation location to adjust the position of the toggle.
Empty Off Canvas Navigation
If you have activated the off canvas navigation but the menu items aren』t showing up:
Then make sure you have a menu assigned to off canvas menu in Theme Location.
Starting in GP Premium 1.7, the Hook element replaces the GP Hooks module.
This element allows you to insert content into any available hook on your website. There』s a list of available GP and GP Premium hooks, and there』s a custom hook option that allows you to define your own hook name if it doesn』t exist in the dropdown.
The usage of each hook is reference and explained in this list.
The location of the hooks are shown in our visual hook guide.
The generate_layout_element_display allows us to bypass the Display Rules, so we can enable or disable an Element under our own conditions.
For example, if we want to assign a specific layout to Author Tom only:
add_filter( 'generate_layout_element_display', function( $display, $element_id ) {
if ( 10 === $element_id && is_author( 'Tom' ) ) {
$display = true;
}
return $display;
}, 10, 2 );
Some users would like to hide the static navigation and show the sticky navigation only. This can be done with the CSS snippet below:
#site-navigation:not(.navigation-stick) {
visibility: hidden;
height: 0;
overflow: hidden;
}
#sticky-placeholder {
display: none !important;
}
