Home / , / Comprehensive Guide to Actions and Filters in WPResidence Headers

Comprehensive Guide to Actions and Filters in WPResidence Headers

74 views

Comprehensive Guide to Actions and Filters in WPResidence Headers

WPResidence is a powerful WordPress theme for real estate websites, offering extensive customization options through its system of actions. This comprehensive guide will walk you through all the available actions for customizing WPResidence headers, complete with code samples and explanations.

Using a Child Theme for Customizations

Before we dive into the specifics, it’s crucial to emphasize that all customizations should be made through a child theme. This ensures that your modifications won’t be lost when updating the parent theme. WPResidence provides a child theme in its package, which you can simply upload and activate to get started.

1. Header 5 Actions

1.1 wpresidence_before_header5_widgets

This action runs before the widgets in header type 5 are displayed.


add_action('wpresidence_before_header5_widgets', 'custom_before_header5_widgets', 10, 1);
function custom_before_header5_widgets($widgets) {
echo '<div class="custom-header5-pre-widgets">Custom content before widgets</div>';
}

1.2 wpresidence_after_header5_widgets

This action runs after the widgets in header type 5 are displayed.


add_action('wpresidence_after_header5_widgets', 'custom_after_header5_widgets', 10, 1);
function custom_after_header5_widgets($widgets) {
echo '<div class="custom-header5-post-widgets">Custom content after widgets</div>';
}

2. Top Bar Actions

2.1 wpresidence_before_top_bar_content

This action runs before the main content of the top bar.


add_action('wpresidence_before_top_bar_content', 'custom_before_top_bar_content');
function custom_before_top_bar_content() {
echo '<div class="custom-top-bar-pre-content">Welcome to our site!</div>';
}

2.2 wpresidence_before_top_bar_left_widget

This action runs before the left widget area in the top bar.


add_action('wpresidence_before_top_bar_left_widget', 'custom_before_top_bar_left_widget');
function custom_before_top_bar_left_widget() {
echo '<div class="custom-top-bar-left-pre-widget">Left widget area starts here</div>';
}

2.3 wpresidence_after_top_bar_left_widget

This action runs after the left widget area in the top bar.


add_action('wpresidence_after_top_bar_left_widget', 'custom_after_top_bar_left_widget');
function custom_after_top_bar_left_widget() {
echo '<div class="custom-top-bar-left-post-widget">Left widget area ends here</div>';
}

2.4 wpresidence_before_top_bar_right_widget

This action runs before the right widget area in the top bar.


add_action('wpresidence_before_top_bar_right_widget', 'custom_before_top_bar_right_widget');
function custom_before_top_bar_right_widget() {
echo '<div class="custom-top-bar-right-pre-widget">Right widget area starts here</div>';
}

2.5 wpresidence_after_top_bar_right_widget

This action runs after the right widget area in the top bar.


add_action('wpresidence_after_top_bar_right_widget', 'custom_after_top_bar_right_widget');
function custom_after_top_bar_right_widget() {
echo '<div class="custom-top-bar-right-post-widget">Right widget area ends here</div>';
}

2.6 wpresidence_before_dashboard_top_bar_left_widget

This action runs before the left widget area in the dashboard top bar.


add_action('wpresidence_before_dashboard_top_bar_left_widget', 'custom_before_dashboard_top_bar_left_widget');
function custom_before_dashboard_top_bar_left_widget() {
echo '<div class="custom-dashboard-top-bar-left-pre-widget">Dashboard left widget area starts here</div>';
}

2.7 wpresidence_after_dashboard_top_bar_left_widget

This action runs after the left widget area in the dashboard top bar.


add_action('wpresidence_after_dashboard_top_bar_left_widget', 'custom_after_dashboard_top_bar_left_widget');
function custom_after_dashboard_top_bar_left_widget() {
echo '<div class="custom-dashboard-top-bar-left-post-widget">Dashboard left widget area ends here</div>';
}

2.8 wpresidence_before_dashboard_top_bar_right_widget

This action runs before the right widget area in the dashboard top bar.


add_action('wpresidence_before_dashboard_top_bar_right_widget', 'custom_before_dashboard_top_bar_right_widget');
function custom_before_dashboard_top_bar_right_widget() {
echo '<div class="custom-dashboard-top-bar-right-pre-widget">Dashboard right widget area starts here</div>';
}

2.9 wpresidence_after_dashboard_top_bar_right_widget

This action runs after the right widget area in the dashboard top bar.


add_action('wpresidence_after_dashboard_top_bar_right_widget', 'custom_after_dashboard_top_bar_right_widget');
function custom_after_dashboard_top_bar_right_widget() {
echo '<div class="custom-dashboard-top-bar-right-post-widget">Dashboard right widget area ends here</div>';
}

2.10 wpresidence_after_top_bar_content

This action runs after the main content of the top bar.


add_action('wpresidence_after_top_bar_content', 'custom_after_top_bar_content');
function custom_after_top_bar_content() {
echo '<div class="custom-top-bar-post-content">Thank you for visiting!</div>';
}

3. User Menu Actions

3.1 wpresidence_before_user_menu

This action runs before the user menu in the header.


add_action('wpresidence_before_user_menu', 'custom_before_user_menu', 10, 2);
function custom_before_user_menu($show_top_bar_user_login, $current_user) {
echo '<div class="custom-pre-user-menu">Welcome, ' . esc_html($current_user->display_name) . '!</div>';
}

3.2 wpresidence_after_user_menu

This action runs after the user menu in the header.


add_action('wpresidence_after_user_menu', 'custom_after_user_menu', 10, 2);
function custom_after_user_menu($show_top_bar_user_login, $current_user) {
echo '<div class="custom-post-user-menu">Enjoy your stay!</div>';
}

3.3 wpresidence_before_user_dropdown_menu

This action runs before the user dropdown menu.


add_action('wpresidence_before_user_dropdown_menu', 'custom_before_user_dropdown_menu', 10, 1);
function custom_before_user_dropdown_menu($current_user) {
echo '<div class="custom-pre-user-dropdown">Quick links:</div>';
}

3.4 wpresidence_after_user_dropdown_menu

This action runs after the user dropdown menu.


add_action('wpresidence_after_user_dropdown_menu', 'custom_after_user_dropdown_menu', 10, 1);
function custom_after_user_dropdown_menu($current_user) {
echo '<div class="custom-post-user-dropdown">Need help? Contact support</div>';
}

4. Navigation Menu Actions

4.1 wpresidence_before_primary_nav_menu

This action runs before the primary navigation menu.


add_action('wpresidence_before_primary_nav_menu', 'custom_before_primary_nav_menu', 10, 1);
function custom_before_primary_nav_menu($classes) {
echo '<div class="custom-pre-primary-nav">Main Menu:</div>';
}

4.2 wpresidence_after_primary_nav_menu

This action runs after the primary navigation menu.


add_action('wpresidence_after_primary_nav_menu', 'custom_after_primary_nav_menu', 10, 1);
function custom_after_primary_nav_menu($classes) {
echo '<div class="custom-post-primary-nav">End of Main Menu</div>';
}

4.3 wpresidence_before_secondary_nav_menu

This action runs before the secondary navigation menu.


add_action('wpresidence_before_secondary_nav_menu', 'custom_before_secondary_nav_menu', 10, 1);
function custom_before_secondary_nav_menu($classes) {
echo '<div class="custom-pre-secondary-nav">Secondary Menu:</div>';
}

4.4 wpresidence_after_secondary_nav_menu

This action runs after the secondary navigation menu.


add_action('wpresidence_after_secondary_nav_menu', 'custom_after_secondary_nav_menu', 10, 1);
function custom_after_secondary_nav_menu($classes) {
echo '<div class="custom-post-secondary-nav">End of Secondary Menu</div>';
}

5. Logo Display Actions

5.1 wpresidence_before_logo_display

This action runs before the logo is displayed.


add_action('wpresidence_before_logo_display', 'custom_before_logo_display', 10, 2);
function custom_before_logo_display($logo, $classes) {
echo '<div class="custom-pre-logo">Our Brand:</div>';
}

5.2 wpresidence_after_logo_display

This action runs after the logo is displayed.


add_action('wpresidence_after_logo_display', 'custom_after_logo_display', 10, 1);
function custom_after_logo_display($return) {
echo '<div class="custom-post-logo">Trusted Since 1990</div>';
}

6. Mobile Menu Actions

6.1 wpresidence_before_mobile_menu_header

This action runs before the mobile menu header.


add_action('wpresidence_before_mobile_menu_header', 'custom_before_mobile_menu_header');
function custom_before_mobile_menu_header() {
echo '<div class="custom-pre-mobile-menu">Mobile Navigation</div>';
}

6.2 wpresidence_after_mobile_menu_header

This action runs after the mobile menu header.


add_action('wpresidence_after_mobile_menu_header', 'custom_after_mobile_menu_header');
function custom_after_mobile_menu_header() {
echo '<div class="custom-post-mobile-menu">End of Mobile Menu</div>';
}

7. General Header Actions

7.1 wpresidence_before_top_bar

This action runs before the top bar.


add_action('wpresidence_before_top_bar', 'custom_before_top_bar');
function custom_before_top_bar() {
echo '<div class="custom-pre-top-bar">Important Announcement</div>';
}

7.2 wpresidence_after_top_bar

This action runs after the top bar.


add_action('wpresidence_after_top_bar', 'custom_after_top_bar');
function custom_after_top_bar() {
echo '<div class="custom-post-top-bar">End of top bar content</div>';
}

7.3 wpresidence_before_master_header

This action runs before the master header section.


add_action('wpresidence_before_master_header', 'custom_before_master_header');
function custom_before_master_header() {
echo '<div class="custom-pre-master-header">Welcome to our real estate platform</div>';
}

7.4 wpresidence_before_header_wrapper

This action runs before the header wrapper.


add_action('wpresidence_before_header_wrapper', 'custom_before_header_wrapper');
function custom_before_header_wrapper() {
echo '<div class="custom-pre-header-wrapper">Header content starts here</div>';
}

7.5 wpresidence_before_display_header

This action runs before displaying the header. Note that this action appears twice in the code, allowing for different customizations based on context.


add_action('wpresidence_before_display_header', 'custom_before_display_header');
function custom_before_display_header() {
echo '<div class="custom-pre-display-header">Preparing to display header content</div>';
}

7.6 wpresidence_after_header_wrapper

This action runs after the header wrapper.


add_action('wpresidence_after_header_wrapper', 'custom_after_header_wrapper');
function custom_after_header_wrapper() {
echo '<div class="custom-post-header-wrapper">Header content ends here</div>';
}

7.7 wpresidence_after_master_header

This action runs after the master header section.


add_action('wpresidence_after_master_header', 'custom_after_master_header');
function custom_after_master_header() {
echo '<div class="custom-post-master-header">Explore our latest property listings</div>';
}

8. Mega Menu Custom Fields Action

8.1 wp_nav_menu_item_custom_fields

This action allows you to add custom fields to menu items in the WordPress admin area. It’s particularly useful for adding extra options to mega menu items.


add_action('wp_nav_menu_item_custom_fields', 'custom_menu_item_fields', 10, 4);
function custom_menu_item_fields($item_id, $item, $depth, $args) {
$mega_menu_icon = get_post_meta($item_id, '_menu_item_mega_menu_icon', true);
?>
<p class="field-mega-menu-icon description description-wide">
<label for="edit-menu-item-mega-menu-icon-<?php echo $item_id; ?>">
<?php _e('Mega Menu Icon Class (e.g., "fa fa-home")', 'wpresidence'); ?><br />
<input type="text" id="edit-menu-item-mega-menu-icon-<?php echo $item_id; ?>" class="widefat code edit-menu-item-mega-menu-icon" name="menu-item-mega-menu-icon[<?php echo $item_id; ?>]" value="<?php echo esc_attr($mega_menu_icon); ?>" />
</label>
</p>
<?php
}

To save the custom field data, you’ll need to add a function to handle the menu item update:


add_action('wp_update_nav_menu_item', 'save_custom_menu_item_fields', 10, 3);
function save_custom_menu_item_fields($menu_id, $menu_item_db_id, $args) {
if (isset($_REQUEST['menu-item-mega-menu-icon'][$menu_item_db_id])) {
$mega_menu_icon = $_REQUEST['menu-item-mega-menu-icon'][$menu_item_db_id];
update_post_meta($menu_item_db_id, '_menu_item_mega_menu_icon', $mega_menu_icon);
}
}

WPResidence provides an extensive set of actions for customizing headers and menus. By utilizing these hooks and the power of a child theme, you can create a unique and functional header that perfectly fits your real estate website’s needs.

These actions allow you to insert custom content, modify existing elements, and even add new functionality to various parts of the WPResidence header and menu system. From the top bar to the master header, and from user menus to mega menus, you have granular control over the appearance and behavior of your site’s header.

Remember to always test your changes thoroughly and ensure they’re compatible with the latest version of WPResidence. Happy customizing!