Customizing your WPResidence theme’s header with custom CSS classes allows for granular control over its appearance and functionality. This guide will walk you through the process of adding and utilizing custom CSS classes for your WPResidence headers.

Understanding WPResidence Header Structure

Before we dive into adding custom classes, it’s important to understand the basic structure of WPResidence headers. The main header wrapper typically has a class structure like this:


<div class="header_wrapper header_type1 header_align_left header_wide_no">
<!-- Header content -->
</div>


Adding Custom Classes via Theme Options

WPResidence provides options to add custom classes directly through the theme settings:

1. Navigate to WPResidence Options in your WordPress dashboard
2. Go to the ‘Header’ tab
3. Look for the ‘Add custom class to header’ option
4. Enter your custom class name(s)
5. Save changes

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


array(
'id' => 'wp_estate_header_custom_class',
'type' => 'text',
'title' => __('Add custom class to header', 'wpresidence-core'),
'subtitle' => __('Add custom class to header wrapper', 'wpresidence-core'),
),


Adding Custom Classes via Child Theme

For more advanced customization, you can add classes through your child theme’s functions.php file:


function add_custom_header_class($classes) {
$classes[] = 'my-custom-header-class';
return $classes;
}
add_filter('wpresidence_header_classes', 'add_custom_header_class');


Utilizing Custom Classes for Styling

Once you’ve added custom classes, you can use them to apply specific styles. Add these styles to your child theme’s style.css file:


.my-custom-header-class {
background-color: #f0f0f0;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.my-custom-header-class .navbar-nav > li > a {
font-weight: bold;
text-transform: uppercase;
}


Creating Conditional Custom Classes

You can also add classes conditionally based on various factors. Here’s an example that adds a class for logged-in users:


function add_conditional_header_class($classes) {
if (is_user_logged_in()) {
$classes[] = 'logged-in-header';
}
return $classes;
}
add_filter('wpresidence_header_classes', 'add_conditional_header_class');


Customizing Header Elements with Custom Classes

Custom classes can be used to target specific header elements. For example, to style the logo area:


.my-custom-header-class .logo {
padding: 10px 0;
}
.my-custom-header-class .logo img {
max-height: 50px;
transition: all 0.3s ease;
}


Responsive Adjustments with Custom Classes

Leverage your custom classes to make responsive adjustments:


@media only screen and (max-width: 768px) {
.my-custom-header-class {
padding: 5px 0;
}
}