This basic code enables you to create a strip before your header which displays your office address on the left and your phone number with email address on the right like this:
This solution relies on the loading of dashicons which you’ll need to do using wp_enqueue_scripts.
Here’s the code:
PHP
Using a code editor, copy and paste the following PHP code to the end of your chuild themes functions.php file:
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}
add_action( 'genesis_before','contact_info_before_header' );
function contact_info_before_header() {
echo'<div class="contact-details">';
echo'<div class="wrap">';
printf( '<div class="phone-email"><span class="dashicons-phone">' . __( ' Call Us: 123-456-7890 |' ) . '</span>' . '<span class="dashicons-email">' . __( ' Email Us' ) . '</span></div>' );
printf( '<div class="office-address">' . __( 'Office: 1000000 E Main St. Tampa FL, 33000' ) . '</div>' );
echo'</div>';
echo'</div>';
}
CSS
Paste the following CSS near the end of your child themes style.css file.
.dashicons-email:before {
content: "\f465";
display: inline-block;
color: #fff;
-webkit-font-smoothing: antialiased;
font: normal 14px/1 'dashicons';
}
.dashicons-phone:before {
content: "\f525";
display: inline-block;
color: #fff;
-webkit-font-smoothing: antialiased;
font: normal 14px/1 'dashicons';
}
.phone-email {
float: right;
}
.office-address {
float: left;
}
.contact-details {
font-size: 15px;
background-color: #941217;
color: #fff;
}
@media only screen and (max-width: 650px) {
.phone-email,
.office-address {
float: none;
text-align: center;
}
}
Was This Tutorial Helpful?