• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Add Office Address, Email & Phone Number Before Header

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

Reader Interactions

Comments

  1. Jamie Lynch says

    November 24, 2015 at 4:53 am

    Github Gist:

    Log in to Reply
    • Brad Dalton says

      November 24, 2015 at 1:43 pm

      Please email me the code to brad@wpsites.net

      Log in to Reply
  2. Jamie Lynch says

    November 22, 2015 at 8:12 am

    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

    .phone-email a:link {
    	color: #fff;
    }
    Log in to Reply
    • Brad Dalton says

      November 22, 2015 at 12:09 pm

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

      Log in to Reply
      • Jamie Lynch says

        November 23, 2015 at 6:03 am

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

        Log in to Reply
        • Brad Dalton says

          November 23, 2015 at 1:25 pm

          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.

          Log in to Reply
    • Brad Dalton says

      November 24, 2015 at 1:57 pm

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

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.