WP Residence Help WP Residence Help

  • WPRESIDENCE
  • Video Tutorials
  • Client Support
  • API
Home / Technical how to | Custom Code Required, WPResidence 5.0 Documentation / WPResidence Header Media Functionality Detailed Guide

WPResidence Header Media Functionality Detailed Guide

550 views 0

The header_media.php file in the WPResidence theme is a crucial component that manages the display of various header types on different pages of your real estate website. This guide will provide a detailed, step-by-step explanation of its key functions.

1. header_media.php Overview

The header_media.php file is responsible for determining and rendering the appropriate header media for different page types in the WPResidence theme. It contains several key functions that work together to achieve this:

  • wpestate_header_media_type_for_singular(): Handles header media for singular pages.
  • wpestate_header_media_global_header(): Manages global header settings.
  • wpestate_header_image(): Generates and displays header images.

2. wpestate_header_media_type_for_singular() Function

This function determines and displays the appropriate header media type for singular pages (like single property pages or regular WordPress pages).

Step-by-step breakdown:


function wpresidence_header_media_type_for_singular($header_type, $postID) {
switch ($header_type) {
case 1: // none
// No header media is displayed
break;
case 2: // image
$custom_image = esc_html(get_post_meta($postID, 'page_custom_image', true));
wpestate_header_image($custom_image);
break;
case 3: // theme slider
wpestate_present_theme_slider();
break;
case 4: // revolution slider
if(function_exists('putRevSlider')) {
$rev_slider = esc_html(get_post_meta($postID, 'rev_slider', true));
putRevSlider($rev_slider);
}
break;
case 5: // google maps
if(!wpestate_half_map_conditions($postID)) {
include(locate_template('templates/google_maps_base.php'));
}
break;
// ... other cases
}
}

  1. The function takes two parameters: $header_type and $postID.
  2. It uses a switch statement to handle different header types.
  3. For each case:
    • Case 1: No header is displayed.
    • Case 2: A custom image is retrieved and displayed using wpestate_header_image().
    • Case 3: The theme’s built-in slider is displayed.
    • Case 4: If available, a Revolution Slider is displayed.
    • Case 5: Google Maps is displayed, but only if not on a half map page.
  4. Additional cases handle video headers, taxonomy headers, and special page types like splash pages or agency pages.

3. wpestate_header_media_global_header() Function

This function renders the global header media based on the specified header type and context. It’s used when a global header setting is applied across multiple pages.

Step-by-step breakdown:


function wpresidence_header_media_global_header($is_archive, $is_singular_post, $is_singular_property, $global_header_type) {
switch ($global_header_type) {
case 0: // No header
break;
case 1: // Image header
$global_header_image = wpresidence_get_option('wp_estate_global_header', 'url');
if ($is_archive) {
$global_header_image = wpresidence_get_option('wp_estate_header_taxonomy_image', 'url');
} else {
if($is_singular_post) {
$global_header_image = wpresidence_get_option('wp_estate_header_blog_post_image', 'url');
} else if($is_singular_property) {
$global_header_image = wpresidence_get_option('wp_estate_header_property_page_image', 'url');
}
}
wpestate_header_image($global_header_image);
break;
case 2: // Theme slider
wpestate_present_theme_slider();
break;
case 3: // Revolution slider
if (function_exists('putRevSlider')) {
$global_revolution_slider = $is_archive
? wpresidence_get_option('wp_estate_header_taxonomy_revolution_slider', '')
: wpresidence_get_option('wp_estate_global_revolution_slider', '');
if($is_singular_post) {
$global_revolution_slider = wpresidence_get_option('wp_estate_header_blog_post_revolution_slider', '');
} else if($is_singular_property) {
$global_revolution_slider = wpresidence_get_option('wp_estate_header_property_page_revolution_slider', '');
}
putRevSlider($global_revolution_slider);
}
break;
case 4: // Google Maps
include(locate_template('templates/google_maps_base.php'));
break;
}
}

  1. The function takes four parameters: $is_archive, $is_singular_post, $is_singular_property, and $global_header_type.
  2. It uses a switch statement to handle different global header types.
  3. For each case:
    • Case 0: No header is displayed.
    • Case 1: An image header is displayed. The image source varies based on the page type (archive, singular post, singular property).
    • Case 2: The theme’s built-in slider is displayed.
    • Case 3: If available, a Revolution Slider is displayed. The slider ID varies based on the page type.
    • Case 4: Google Maps is displayed using a template file.
  4. The function uses conditional logic to determine which specific header image or slider to use based on the page context.

4. Interaction Between Functions

These functions work together to provide a flexible header media system:

  1. The main WordPress template (like header.php) typically calls a function that determines whether to use a singular or global header.
  2. If it’s a singular page, wpestate_header_media_type_for_singular() is called with the appropriate header type and post ID.
  3. If it’s using global settings, wpestate_header_media_global_header() is called with the current page context and global header type.
  4. Both of these functions may then call other helper functions like wpestate_header_image() or wpestate_present_theme_slider() to actually render the header content.

5. Extending the Functionality

To extend these functions, you can:

  1. Add new cases to the switch statements to support new header types.
  2. Create new helper functions for rendering custom header types.
  3. Modify existing cases to change how certain header types are displayed.

Example of adding a new header type:


// In wpestate_header_media_type_for_singular()
case 25: // custom parallax header
wpestate_custom_parallax_header($postID);
break;

// New function to handle the custom header type
function wpestate_custom_parallax_header($postID) {
$parallax_image = get_post_meta($postID, ‘custom_parallax_image’, true);
echo ‘<div class=”custom-parallax-header” style=”background-image: url(‘ . esc_url($parallax_image) . ‘);”></div>’;
}

This detailed breakdown of the header_media.php file and its key functions should provide a clear understanding of how WPResidence manages its header media system, allowing for easier customization and extension of the theme’s capabilities.

Technical how to | Custom Code RequiredWPResidence 5.0 Documentation

Related Articles

  • Webhook Integration for Contact Forms
  • Technical: Change the Schedule Tour Email Text and the Form Default Message
  • Property list filter customization
  • Technical – How to Change the Minimum Image Dimensions for Property Uploads in WPResidence

Help Categories

  • 19Agent, Agency & Developers
  • 7Blog Posts & Blog Lists
  • 38Elementor Shortcodes Built-In
  • 55FAQ
  • 15Footer
  • 5Getting Started
  • 37Header
  • 2IDX & MLSImport
  • 6Installation & Setup
  • 22Installation FAQ
  • 23Maps & Location Settings
  • 21Multi-Language Third Party Plugins
  • 6Other Third party Plugins
  • 19Pages
  • 4Payments & Monetization
  • 20Property Lists, Categories & Archive
  • 36Property Pages & Layouts
  • 31Search & Filtering
  • 163Technical how to | Custom Code Required
  • 8Technical: Actions and filters
  • 6Technical: Child Theme
  • 85Theme Options & Global Settings
  • 6Translations & Languages
  • 16WPBakery Shortcodes
  • 51WPResidence / WPEstate CRM
  • 50WPResidence 5.0 Documentation
  • 7WPResidence Elementor Studio
  • 50WPResidence Translate Plugin

Join Us On

Powered by WP Estate - All Rights Reserved
  • WPRESIDENCE
  • Video Tutorials
  • Client Support
  • API