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;
}
}
Github Gist:
Please email me the code to brad@wpsites.net
http://t2energysolutions.com
I added the mailto: code into the functions.php code so that the email link would be clickable. And in my CSS I added code to make the links the color I wanted.
CSS
The PHP code doesn’t display. Please wrap it in opening and closing code tags or shortcodes
Here’s the .php code (between the opening and closing div tags) I used to make the links clickable.
Hello Jamie. Please wrap your code in opening and closing
code tagsor code shortcodes. Otherwise you can use Github Gists and link to it from here. WordPress has stripped out part of the code so i cannot test it.Just tested the code and it works. What did you need help with?