Solution Timeline

All versions (edits) of solutions to Add a Text Phone Number in Top Right Where Search Is Wordpress appear below in the order they were created. Comments that appear under revisions were those created when that particular revision was current.

To see the revision history of a single solution (with diffs), click on the solution number (ie. "#1") in the upper right corner of a solution revision below.

← Bounty Expand all edits

I have created a child theme based on the Paperio that overrides the search button and places a telephone number.

Link: https://drive.google.com/open?id=1xQ1yUBCiYj_VHZGoZeK3Lyoz1xFxyMDl

Let me know if you need further help.

I have created a child theme based on the Paperio that overrides the search button and places a telephone number.

Link: https://drive.google.com/open?id=1xQ1yUBCiYj_VHZGoZeK3Lyoz1xFxyMDl

Let me know if you need further help.

/wp-content/themes//searchform.php:

    <?php
    /**
    * Template for displaying search forms in Paperio
    *
    * @package Paperio
    */
    ?>
    <?php $tz_header_seach_placeholder = get_theme_mod( 'tz_header_seach_placeholder', 'Search Here....' );?>
    <form role="search" method="get" class="search-form navbar-form no-padding" action="<?php echo esc_url( home_url( '/' ) ); ?>">
        <div class="input-group add-on">
            <input type="search" class="search-field form-control" placeholder="<?php echo esc_attr( $tz_header_seach_placeholder ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
            <div class="input-group-btn">
            </div>
        </div>

        <div class="dxm_telephone_wrapper">
            <p class="dxm_telephone">123-456-7890</p>
        </div>

    </form>

/wp-content/themes//style.css:

    /* Override Search Bar */
    .dxm_telephone_wrapper {
        float: right;
        height: 32px;
        display: flex;
        align-items: center;
    }
    .dxm_telephone {
        margin: 0;
    }

I have created a child theme based on the Paperio that overrides the search button and places a telephone number.

Link: https://drive.google.com/open?id=1xQ1yUBCiYj_VHZGoZeK3Lyoz1xFxyMDl

Let me know if you need further help.

/wp-content/themes/CHILD/searchform.php:

    <?php
    /**
    * Template for displaying search forms in Paperio
    *
    * @package Paperio
    */
    ?>
    <?php $tz_header_seach_placeholder = get_theme_mod( 'tz_header_seach_placeholder', 'Search Here....' );?>
    <form role="search" method="get" class="search-form navbar-form no-padding" action="<?php echo esc_url( home_url( '/' ) ); ?>">
        <div class="input-group add-on">
            <input type="search" class="search-field form-control" placeholder="<?php echo esc_attr( $tz_header_seach_placeholder ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
            <div class="input-group-btn">
            </div>
        </div>

        <div class="dxm_telephone_wrapper">
            <p class="dxm_telephone">123-456-7890</p>
        </div>

    </form>

/wp-content/themes/CHILD/style.css:

    /* Override Search Bar */
    .dxm_telephone_wrapper {
        float: right;
        height: 32px;
        display: flex;
        align-items: center;
    }
    .dxm_telephone {
        margin: 0;
    }

I have created a child theme based on the Paperio that overrides the search button and places a telephone number.

Link: https://drive.google.com/open?id=1xQ1yUBCiYj_VHZGoZeK3Lyoz1xFxyMDl

Let me know if you need further help.

/wp-content/themes/CHILD/searchform.php:

    <?php
    /**
    * Template for displaying search forms in Paperio
    *
    * @package Paperio
    */
    ?>
    <?php $tz_header_seach_placeholder = get_theme_mod( 'tz_header_seach_placeholder', 'Search Here....' );?>
    <form role="search" method="get" class="search-form navbar-form no-padding" action="<?php echo esc_url( home_url( '/' ) ); ?>">
        <div class="input-group add-on">
            <input type="search" class="search-field form-control" placeholder="<?php echo esc_attr( $tz_header_seach_placeholder ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
            <div class="input-group-btn">
            </div>
        </div>

        <div class="dxm_telephone_wrapper">
            <p class="dxm_telephone">123-456-7890</p>
        </div>

    </form>

/wp-content/themes/CHILD/style.css:

    /* Override Search Bar */
    .dxm_telephone_wrapper {
        float: right;
        height: 32px;
        display: flex;
        align-items: center;
    }
    .dxm_telephone {
        margin: 0;
        color: #0066bf;
        font-size: 18px;
    }

I have created a child theme based on the Paperio that overrides the search button and places a telephone number.

Link: https://drive.google.com/open?id=1xQ1yUBCiYj_VHZGoZeK3Lyoz1xFxyMDl

Let me know if you need further help.

/wp-content/themes/CHILD/searchform.php:

    <?php
    /**
    * Template for displaying search forms in Paperio
    *
    * @package Paperio
    */
    ?>
    <?php $tz_header_seach_placeholder = get_theme_mod( 'tz_header_seach_placeholder', 'Search Here....' );?>
    <form role="search" method="get" class="search-form navbar-form no-padding" action="<?php echo esc_url( home_url( '/' ) ); ?>">
        <div class="input-group add-on">
            <input type="search" class="search-field form-control" placeholder="<?php echo esc_attr( $tz_header_seach_placeholder ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
        </div>

        <div class="dxm_telephone_wrapper">
            <p class="dxm_telephone">123-456-7890</p>
        </div>

    </form>

/wp-content/themes/CHILD/style.css:

    /* Override Search Bar */
    .dxm_telephone_wrapper {
        float: right;
        height: 32px;
        display: flex;
        align-items: center;
    }
    .dxm_telephone {
        margin: 0;
        color: #0066bf;
        font-size: 18px;
    }

This will do it,

you only need to add changes to "templates/header/header-search.php"

i think this changes will do it:

    $contact = '+555-555-555-555';     
    echo '<div style="float: right;height: 100%;color: #0066bf;font-size: 18px;line-height: 51px;padding: 0px 1px;">'.$contact.'</div>';

here is full page code, copy and paste it there:

<?php
// Exit if accessed directly.
if ( !defined( 'ABSPATH' ) ) { exit; }

$tz_disable_search_header = get_theme_mod( 'tz_disable_search_header', 0 ); 
$tz_header_right_sidebar = get_theme_mod( 'tz_header_right_sidebar', '' );
$tz_disable_header_right_sidebar = get_theme_mod( 'tz_disable_header_right_sidebar', 0 ); 
$tz_header_right_sidebar_class = ($tz_disable_header_right_sidebar == 1 && $tz_disable_search_header == 1 ) ? 'header-right-sidebar' : 'search-box';


echo '<div class="col-md-4 col-sm-4 col-xs-6 fl-right '.$tz_header_right_sidebar_class.'">';
    $contact = '+555-555-555-555';
    echo '<div style="float: right;height: 100%;color: #0066bf;font-size: 18px;line-height: 51px;padding: 0px 1px;">'.$contact.'</div>';
    if( $tz_disable_search_header != 1 ){
        get_search_form();
    }
    else{
        if (!empty($tz_header_right_sidebar) && $tz_disable_header_right_sidebar == 1) {
            dynamic_sidebar( $tz_header_right_sidebar );
        }
    }
echo '</div>';

hope it helps.

This will do it,

you only need to add changes to "templates/header/header-search.php"

i think this changes will do it:

    $contact = '+555-555-555-555';     
    echo '<div style="float: right;height: 100%;color: #0066bf;font-size: 18px;line-height: 51px;padding: 0px 1px;">'.$contact.'</div>';

here is full page code, copy and paste it there:

<?php
// Exit if accessed directly.
if ( !defined( 'ABSPATH' ) ) { exit; }

$tz_disable_search_header = get_theme_mod( 'tz_disable_search_header', 0 ); 
$tz_header_right_sidebar = get_theme_mod( 'tz_header_right_sidebar', '' );
$tz_disable_header_right_sidebar = get_theme_mod( 'tz_disable_header_right_sidebar', 0 ); 
$tz_header_right_sidebar_class = ($tz_disable_header_right_sidebar == 1 && $tz_disable_search_header == 1 ) ? 'header-right-sidebar' : 'search-box';


echo '<div class="col-md-4 col-sm-4 col-xs-6 fl-right '.$tz_header_right_sidebar_class.'">';
    $contact = '+555-555-555-555';
    echo '<div style="float: right;height: 100%;color: #0066bf;font-size: 18px;line-height: 51px;padding: 0px 1px;">'.$contact.'</div>';
    if( $tz_disable_search_header != 1 ){
        get_search_form();
    }
    else{
        if (!empty($tz_header_right_sidebar) && $tz_disable_header_right_sidebar == 1) {
            dynamic_sidebar( $tz_header_right_sidebar );
        }
    }
echo '</div>';

hope it helps.

EDIT:

copy and paste that code and it should work:

<?php 
// Exit if accessed directly. 
if ( !defined( 'ABSPATH' ) ) { exit; } 
$tz_disable_search_header = get_theme_mod( 'tz_disable_search_header', 0 ); 

echo '<div class="col-md-4 col-sm-4 col-xs-6 fl-right search-box">'; 
// start code added for contact
$contact = '+555-555-555-555';
echo '<div style="float: right;height: 100%;color: #0066bf;font-size: 18px;line-height: 51px;padding: 0px 1px;">'.$contact.'</div>';
// end code added for contact
if( $tz_disable_search_header != 1 ) : get_search_form(); endif; echo '</div>';

I have created a child theme based on the Paperio that overrides the search button and places a telephone number.

Link: https://drive.google.com/open?id=1xQ1yUBCiYj_VHZGoZeK3Lyoz1xFxyMDl

Let me know if you need further help.

PASTE THE FOLLOWING CODE IN THE FILE: /wp-content/themes/CHILD/searchform.php:

    <?php
    /**
    * Template for displaying search forms in Paperio
    *
    * @package Paperio
    */
    ?>
    <?php $tz_header_seach_placeholder = get_theme_mod( 'tz_header_seach_placeholder', 'Search Here....' );?>
    <form role="search" method="get" class="search-form navbar-form no-padding" action="<?php echo esc_url( home_url( '/' ) ); ?>">
        <div class="input-group add-on">
            <input type="search" class="search-field form-control" placeholder="<?php echo esc_attr( $tz_header_seach_placeholder ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
        </div>

        <div class="dxm_telephone_wrapper">
            <p class="dxm_telephone">123-456-7890</p>
        </div>

    </form>

PASTE THE FOLLOWING CODE IN THE FILE: /wp-content/themes/CHILD/style.css:

    /* Override Search Bar */
    .dxm_telephone_wrapper {
        float: right;
        height: 32px;
        display: flex;
        align-items: center;
    }
    .dxm_telephone {
        margin: 0;
        color: #0066bf;
        font-size: 18px;
    }

This will do it,

you only need to add changes to "templates/header/header-search.php"

i think this changes will do it:

    $contact = '+555-555-555-555';     
    echo '<div style="float: right;height: 100%;color: #0066bf;font-size: 18px;line-height: 51px;padding: 0px 1px;">'.$contact.'</div>';

here is full page code, copy and paste it there:

<?php
// Exit if accessed directly.
if ( !defined( 'ABSPATH' ) ) { exit; }

$tz_disable_search_header = get_theme_mod( 'tz_disable_search_header', 0 ); 
$tz_header_right_sidebar = get_theme_mod( 'tz_header_right_sidebar', '' );
$tz_disable_header_right_sidebar = get_theme_mod( 'tz_disable_header_right_sidebar', 0 ); 
$tz_header_right_sidebar_class = ($tz_disable_header_right_sidebar == 1 && $tz_disable_search_header == 1 ) ? 'header-right-sidebar' : 'search-box';


echo '<div class="col-md-4 col-sm-4 col-xs-6 fl-right '.$tz_header_right_sidebar_class.'">';
    $contact = '+555-555-555-555';
    echo '<div style="float: right;height: 100%;color: #0066bf;font-size: 18px;line-height: 51px;padding: 0px 1px;">'.$contact.'</div>';
    if( $tz_disable_search_header != 1 ){
        get_search_form();
    }
    else{
        if (!empty($tz_header_right_sidebar) && $tz_disable_header_right_sidebar == 1) {
            dynamic_sidebar( $tz_header_right_sidebar );
        }
    }
echo '</div>';

hope it helps.

EDIT (2):

copy and paste that code and it should work.

now it's showing the same as social buttons, bold, and by changing the font-size value, you could get the result you want (i have made it 24px)

<?php 
// Exit if accessed directly. 
if ( !defined( 'ABSPATH' ) ) { exit; } 
$tz_disable_search_header = get_theme_mod( 'tz_disable_search_header', 0 ); 

echo '<div class="col-md-4 col-sm-4 col-xs-6 fl-right search-box social-icon">'; 
// start code added for contact
$contact = '+555-555-555-555';
echo '<div style="float: right;height: 100%;color: #0066bf;font-size: 24px;font-weight: bold;padding: 0px 1px;">'.$contact.'</div>';
// end code added for contact
if( $tz_disable_search_header != 1 ) : get_search_form(); endif; echo '</div>';

This will do it,

you only need to add changes to "templates/header/header-search.php"

i think this changes will do it:

    $contact = '+555-555-555-555';     
    echo '<div style="float: right;height: 100%;color: #0066bf;font-size: 18px;line-height: 51px;padding: 0px 1px;">'.$contact.'</div>';

here is full page code, copy and paste it there:

<?php
// Exit if accessed directly.
if ( !defined( 'ABSPATH' ) ) { exit; }

$tz_disable_search_header = get_theme_mod( 'tz_disable_search_header', 0 ); 
$tz_header_right_sidebar = get_theme_mod( 'tz_header_right_sidebar', '' );
$tz_disable_header_right_sidebar = get_theme_mod( 'tz_disable_header_right_sidebar', 0 ); 
$tz_header_right_sidebar_class = ($tz_disable_header_right_sidebar == 1 && $tz_disable_search_header == 1 ) ? 'header-right-sidebar' : 'search-box';


echo '<div class="col-md-4 col-sm-4 col-xs-6 fl-right '.$tz_header_right_sidebar_class.'">';
    $contact = '+555-555-555-555';
    echo '<div style="float: right;height: 100%;color: #0066bf;font-size: 18px;line-height: 51px;padding: 0px 1px;">'.$contact.'</div>';
    if( $tz_disable_search_header != 1 ){
        get_search_form();
    }
    else{
        if (!empty($tz_header_right_sidebar) && $tz_disable_header_right_sidebar == 1) {
            dynamic_sidebar( $tz_header_right_sidebar );
        }
    }
echo '</div>';

hope it helps.

EDIT (3):

copy and paste that code and it should work.

now it's showing the same as social buttons, bold, and by changing the font-size value, you could get the result you want (i have made it 24px)

added link option to call for mobile, also the style, to make italways the same color as social icons.

<?php 
// Exit if accessed directly. 
if ( !defined( 'ABSPATH' ) ) { exit; } 
$tz_disable_search_header = get_theme_mod( 'tz_disable_search_header', 0 ); 

echo '<div class="col-md-4 col-sm-4 col-xs-6 fl-right search-box social-icon">'; 
// start code added for contact
$contact = '+555-555-555-245';
echo '<div style="float: right;height: 100%;color: #0066bf;font-size: 24px;font-weight: bold;padding: 0px 1px;">';
echo '<style>a.tel:link, a.tel:visited, a.tel:hover, a.tel:active {color: #0066bf;}</style>';
echo '<a href="tel:'.$contact.'" target="_black">'.$contact.'</a>';
echo '</div>';
// end code added for contact
if( $tz_disable_search_header != 1 ) : get_search_form(); endif; echo '</div>';

This will do it,

you only need to add changes to "templates/header/header-search.php"

i think this changes will do it:

    $contact = '+555-555-555-555';     
    echo '<div style="float: right;height: 100%;color: #0066bf;font-size: 18px;line-height: 51px;padding: 0px 1px;">'.$contact.'</div>';

here is full page code, copy and paste it there:

<?php
// Exit if accessed directly.
if ( !defined( 'ABSPATH' ) ) { exit; }

$tz_disable_search_header = get_theme_mod( 'tz_disable_search_header', 0 ); 
$tz_header_right_sidebar = get_theme_mod( 'tz_header_right_sidebar', '' );
$tz_disable_header_right_sidebar = get_theme_mod( 'tz_disable_header_right_sidebar', 0 ); 
$tz_header_right_sidebar_class = ($tz_disable_header_right_sidebar == 1 && $tz_disable_search_header == 1 ) ? 'header-right-sidebar' : 'search-box';


echo '<div class="col-md-4 col-sm-4 col-xs-6 fl-right '.$tz_header_right_sidebar_class.'">';
    $contact = '+555-555-555-555';
    echo '<div style="float: right;height: 100%;color: #0066bf;font-size: 18px;line-height: 51px;padding: 0px 1px;">'.$contact.'</div>';
    if( $tz_disable_search_header != 1 ){
        get_search_form();
    }
    else{
        if (!empty($tz_header_right_sidebar) && $tz_disable_header_right_sidebar == 1) {
            dynamic_sidebar( $tz_header_right_sidebar );
        }
    }
echo '</div>';

hope it helps.

EDIT (3):

copy and paste that code and it should work.

now it's showing the same as social buttons, bold, and by changing the font-size value, you could get the result you want (i have made it 24px)

added link option to call for mobile, also the style, to make italways the same color as social icons.

<?php 
// Exit if accessed directly. 
if ( !defined( 'ABSPATH' ) ) { exit; } 
$tz_disable_search_header = get_theme_mod( 'tz_disable_search_header', 0 ); 

echo '<div class="col-md-4 col-sm-4 col-xs-6 fl-right search-box social-icon">'; 
// start code added for contact
$contact = '+555-555-555-245';
echo '<div style="float: right;height: 100%;color: #0066bf;font-size: 24px;font-weight: bold;padding: 0px 1px;">';
echo '<style>a.tel:link, a.tel:visited, a.tel:hover, a.tel:active {color: #0066bf;}</style>';
echo '<a href="tel:'.$contact.'">'.$contact.'</a>';
echo '</div>';
// end code added for contact
if( $tz_disable_search_header != 1 ) : get_search_form(); endif; echo '</div>';

This will do it,

you only need to add changes to "templates/header/header-search.php"

i think this changes will do it:

    $contact = '+555-555-555-555';     
    echo '<div style="float: right;height: 100%;color: #0066bf;font-size: 18px;line-height: 51px;padding: 0px 1px;">'.$contact.'</div>';

here is full page code, copy and paste it there:

<?php
// Exit if accessed directly.
if ( !defined( 'ABSPATH' ) ) { exit; }

$tz_disable_search_header = get_theme_mod( 'tz_disable_search_header', 0 ); 
$tz_header_right_sidebar = get_theme_mod( 'tz_header_right_sidebar', '' );
$tz_disable_header_right_sidebar = get_theme_mod( 'tz_disable_header_right_sidebar', 0 ); 
$tz_header_right_sidebar_class = ($tz_disable_header_right_sidebar == 1 && $tz_disable_search_header == 1 ) ? 'header-right-sidebar' : 'search-box';


echo '<div class="col-md-4 col-sm-4 col-xs-6 fl-right '.$tz_header_right_sidebar_class.'">';
    $contact = '+555-555-555-555';
    echo '<div style="float: right;height: 100%;color: #0066bf;font-size: 18px;line-height: 51px;padding: 0px 1px;">'.$contact.'</div>';
    if( $tz_disable_search_header != 1 ){
        get_search_form();
    }
    else{
        if (!empty($tz_header_right_sidebar) && $tz_disable_header_right_sidebar == 1) {
            dynamic_sidebar( $tz_header_right_sidebar );
        }
    }
echo '</div>';

hope it helps.

EDIT (4):

copy and paste that code and it should work.

now it's showing the same as social buttons, bold, and by changing the font-size value, you could get the result you want (i have made it 24px)

added link option to call for mobile, also the style, to make italways the same color as social icons.

added a missed class, to show same color always (i miss copied the correct code, but i made it blueish from the beginning ;p )

<?php 
// Exit if accessed directly. 
if ( !defined( 'ABSPATH' ) ) { exit; } 
$tz_disable_search_header = get_theme_mod( 'tz_disable_search_header', 0 ); 

echo '<div class="col-md-4 col-sm-4 col-xs-6 fl-right search-box social-icon">'; 
// start code added for contact
$contact = '+555-555-555-245';
echo '<div style="float: right;height: 100%;color: #0066bf;font-size: 24px;font-weight: bold;padding: 0px 1px;">';
echo '<style>a.tel:link, a.tel:visited, a.tel:hover, a.tel:active {color: #0066bf;}</style>';
echo '<a class="tel" href="tel:'.$contact.'">'.$contact.'</a>';
echo '</div>';
// end code added for contact
if( $tz_disable_search_header != 1 ) : get_search_form(); endif; echo '</div>';
Winning solution