I was building a Divi site for a client and they wanted a dramatically different looking header for interior pages. See below for the two header variations.
The visual differences couldn’t be accomplished with CSS alone. There had to be some structural changes to handle the positioning of the secondary navigation, primary navigation, and search bar. In order to accomplish this, I created 3 copies of header.php
in my Divi-child
theme and renamed them as follows:
header.php
header_home.php
header_interior.php
The idea is to keep all of Divi’s variables in header.php
and only include the structural changes in header_home.php
and header_interior.php
.
In header.php
, I kept all of Divi’s code up until the logic to start rendering the top-header
and deleted the rest. In Divi version 3.12, the code to render top-header
starts on line 56. So header.php
ended on line 54 with the closing PHP tag, after Divi’s PHP variables are set.
In header_home.php
and header_interior.php
, I deleted up until line 56. Then, I made the structural changes to the markup that I needed to accommodate both header layouts.
Now, I needed to include the conditional logic to load the appropriate header layout in header.php
. WordPress’s get_template_part
, would’ve been ideal, but there is no way to pass variables to get_template_part
, so all of Divi’s variables would be ignored in header_home.php
and header_interior.php
. After some Googling, I settled on this approach:
<?php | |
if( is_front_page() ): | |
include( locate_template( 'header_home.php', false, false ) ); | |
else: | |
include( locate_template( 'header_interior.php', false, false ) ); | |
endif; | |
?> |
To differentiate the styling between the same ID’d and classed elements, the :not
pseudo-class became my best friend. For example,
.home #et-secondary-menu
for the homepage headerbody:not(.home) #et-secondary-menu
for the interior page header