WP SITES

Log in

Add Office Address, Email & Phone Number Before Header

—

by

Brad Dalton

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:

before-header

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;
    }
    
}

Comments

7 responses to “Add Office Address, Email & Phone Number Before Header”

  1. Jamie Lynch Avatar
    Jamie Lynch

    Github Gist:

    1. Brad Dalton Avatar
      Brad Dalton

      Please email me the code to brad@wpsites.net

  2. Jamie Lynch Avatar
    Jamie Lynch

    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
    [code]
    .phone-email a:link {
    color: #fff;
    }
    [/code]

    1. Brad Dalton Avatar
      Brad Dalton

      The PHP code doesn’t display. Please wrap it in opening and closing code tags or shortcodes

      1. Jamie Lynch Avatar
        Jamie Lynch

        Here’s the .php code (between the opening and closing div tags) I used to make the links clickable.

        1. Brad Dalton Avatar
          Brad Dalton

          Hello Jamie. Please wrap your code in opening and closing code tags or 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.

    2. Brad Dalton Avatar
      Brad Dalton

      Just tested the code and it works. What did you need help with?

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.