Home / , / Working with Header Widgets in WPResidence

Working with Header Widgets in WPResidence

453 views

Header widgets in WPResidence offer a flexible way to add custom content to your site’s header area. These widgets can enhance your header’s functionality and provide valuable information to your visitors. This guide will walk you through the process of working with header widgets in WPResidence.

Understanding Header Widget Areas in WPResidence

WPResidence provides several widget areas in the header, typically including:

  • Top Bar Left Widget Area
  • Top Bar Right Widget Area
  • Header Widget Area (available in some header types)

Activating Header Widgets

To enable header widgets, follow these steps:

  1. Go to WPResidence Options in your WordPress dashboard
  2. Navigate to the ‘Header’ tab
  3. Look for the option ‘Show top bar widgets menu?’
  4. Set this option to ‘yes’
  5. Save changes

This setting is controlled by the following code in the theme options:


array(
'id' => 'wp_estate_show_top_bar_user_menu',
'type' => 'button_set',
'title' => __('Show top bar widgets menu?', 'wpresidence-core'),
'subtitle' => __('Enable or disable the top bar widgets area.', 'wpresidence-core'),
'options' => array(
'yes' => 'yes',
'no' => 'no'
),
'default' => 'no',
),

Adding Widgets to Header Areas

To add widgets to the header areas:

  1. Go to Appearance > Widgets in your WordPress dashboard
  2. Find the ‘Top Bar Left Widget Area’ or ‘Top Bar Right Widget Area’
  3. Drag and drop your desired widgets into these areas

Creating a Custom Header Widget

You can create a custom widget specifically for your header. Here’s an example of a simple custom widget:


class WPResidence_Header_Info_Widget extends WP_Widget {
public function __construct() {
parent::__construct(
'wpresidence_header_info_widget',
__('WPResidence Header Info', 'wpresidence-child'),
array('description' => __('Displays custom info in the header', 'wpresidence-child'))
);
}
public function widget($args, $instance) {
echo $args['before_widget'];
if (!empty($instance['title'])) {
echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
}
echo '<div class="header-info">' . esc_html($instance['info']) . '</div>';
echo $args['after_widget'];
}
public function form($instance) {
$title = !empty($instance['title']) ? $instance['title'] : '';
$info = !empty($instance['info']) ? $instance['info'] : '';
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id('info'); ?>"><?php _e('Info:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('info'); ?>" name="<?php echo $this->get_field_name('info'); ?>" type="text" value="<?php echo esc_attr($info); ?>">
</p>
<?
}
public function update($new_instance, $old_instance) {
$instance = array();
$instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
$instance['info'] = (!empty($new_instance['info'])) ? strip_tags($new_instance['info']) : '';
return $instance;
}
}
function register_wpresidence_header_info_widget() {
register_widget('WPResidence_Header_Info_Widget');
}
add_action('widgets_init', 'register_wpresidence_header_info_widget');

Styling Header Widgets

To style your header widgets, add these styles to your child theme’s style.css:


.top_bar_wrapper .widget {
margin-bottom: 0;
}
.top_bar_wrapper .widget-title {
color: #ffffff;
font-size: 14px;
margin-bottom: 5px;
}
.top_bar_wrapper .widget_text {
color: #f1f1f1;
font-size: 12px;
}
.header-info {
display: inline-block;
padding: 5px 10px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}

Adding Dynamic Content to Header Widgets

You can add dynamic content to your header widgets using WordPress functions. Here’s an example of a custom widget that displays the current date:


class WPResidence_Header_Date_Widget extends WP_Widget {
public function __construct() {
parent::__construct(
'wpresidence_header_date_widget',
__('WPResidence Header Date', 'wpresidence-child'),
array('description' => __('Displays current date in the header', 'wpresidence-child'))
);
}
public function widget($args, $instance) {
echo $args['before_widget'];
if (!empty($instance['title'])) {
echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
}
echo '<div class="header-date">' . date_i18n(get_option('date_format')) . '</div>';
echo $args['after_widget'];
}

public function form($instance) {
$title = !empty($instance[‘title’]) ? $instance[‘title’] : ”;
?>
<p>
<label for=”<?php echo $this->get_field_id(‘title’); ?>”><?php _e(‘Title:’); ?></label>
<input class=”widefat” id=”<?php echo $this->get_field_id(‘title’); ?>” name=”<?php echo $this->get_field_name(‘title’); ?>” type=”text” value=”<?php echo esc_attr($title); ?>”>
</p>
<?php
}
public function update($new_instance, $old_instance) {
$instance = array();
$instance[‘title’] = (!empty($new_instance[‘title’])) ? strip_tags($new_instance[‘title’]) : ”;
return $instance;
}
}
function register_wpresidence_header_date_widget() {
register_widget(‘WPResidence_Header_Date_Widget’);
}
add_action(‘widgets_init’, ‘register_wpresidence_header_date_widget’);

Conditional Header Widgets

You can display different widgets based on certain conditions. Here’s an example that shows different content for logged-in and logged-out users:


class WPResidence_Conditional_Header_Widget extends WP_Widget {
public function __construct() {
parent::__construct(
'wpresidence_conditional_header_widget',
__('WPResidence Conditional Header', 'wpresidence-child'),
array('description' => __('Displays different content based on user login status', 'wpresidence-child'))
);
}
public function widget($args, $instance) {
echo $args['before_widget'];
if (is_user_logged_in()) {
$current_user = wp_get_current_user();
echo '<div class="welcome-message">Welcome, ' . esc_html($current_user->display_name) . '!</div>';
} else {
echo '<div class="login-link"><a href="' . esc_url(wp_login_url()) . '">Login</a></div>';
}
echo $args['after_widget'];
}
}
function register_wpresidence_conditional_header_widget() {
register_widget('WPResidence_Conditional_Header_Widget');
}
add_action('widgets_init', 'register_wpresidence_conditional_header_widget');

Responsive Design for Header Widgets

Ensure your header widgets look good on all devices by adding these responsive styles:


@media only screen and (max-width: 768px) {
.top_bar_wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.top_bar_wrapper .widget {
width: 100%;
text-align: center;
margin-bottom: 10px;
}
}

By leveraging these techniques, you can create highly customized and dynamic header widgets that enhance your WPResidence website’s functionality and user experience. Remember to test your widgets thoroughly on various devices and screen sizes to ensure a consistent look across all platforms.