Add a Text Phone Number in Top Right Where Search Is Wordpress
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Want to add a text field for a phone number where the search bar is on the top right. www.timelessestatesales.com

I do not know if its in multiple php files or if its something else. Would like it to be styled similar to the icons on the top left.

Since this is a commercial theme, I need access to the WordPress site in order to make the changes.
kostasx 5 months ago
you could pass the theme files in order to add the changes
Chlegou 5 months ago
what do you mean pass the theme files?
MrG1130 5 months ago
Send us the theme package, so that we can check the theme's structure.
kostasx 5 months ago
exactly, we need to have the package to review it and apply changes
Chlegou 5 months ago
How do I send that? Sorry I am new here
MrG1130 5 months ago
you could share the theme package as ZIP archive by drive if you don't have experience with github.
Chlegou 5 months ago
Google Drive or Dropbox will do just fine...
kostasx 5 months ago
just zip the whole theme from the FTP?
MrG1130 5 months ago
If you have purchased the theme from ThemeForest, you can just download the package, unzip and share just the theme .zip file with us. Otherwise, yes, just zip the theme from the FTP.
kostasx 5 months ago
how do I share it on here? Have the file ready
MrG1130 5 months ago
If you have a gmail account you can use Google Drive to upload the file, make it shareable and share the link with us here.
kostasx 5 months ago
is it php7 template?
Chlegou 5 months ago
not sure, i do have most recent wordpress on it if that helps
MrG1130 5 months ago
Are you usign a child theme?
kostasx 5 months ago
yes the child theme is currently running, do you need that zip?
MrG1130 5 months ago
Since I am using a child theme, what differently needs to be done?
MrG1130 5 months ago
if you could, make a quick test for the code i gave you.
Chlegou 5 months ago
awarded to Chlegou

Crowdsource coding tasks.

2 Solutions


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;
    }
The file that you need to change is the searchform.php, which can be overriden, simply by copying and pasting the file from the parent theme to the child theme folder.
kostasx 5 months ago
Winning solution

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>';
there screenshots demonstrate it: https://ibb.co/8ccjpwF https://ibb.co/Vm2nc3B
Chlegou 5 months ago
this is showing as a different php file then the one when i look at it in wordpress editor, what I see is below: <?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">'; if( $tz_disable_search_header != 1 ) : get_search_form(); endif; echo '</div>';
MrG1130 5 months ago
ok then, paste first code in same order as showing here. it might wordpress hiding config variables.
Chlegou 5 months ago
paste the first code where?
MrG1130 5 months ago
i have updated the bounty, following the code you gave me in comment
Chlegou 5 months ago
can you look? I think it worked, only issue is the placement is off of where i would like it
MrG1130 5 months ago
where you would like it? you didn't specified where, also, it looks you have deleted the search box, could you describe your case scenario?
Chlegou 5 months ago
i deleted the search box as i did not want it but left it there to show the area where i wanted the phone number, i want it aligned how the left side with the social icons are, same height, same indentation from the edge of the page container and bold
MrG1130 5 months ago
ok wait a minute
Chlegou 5 months ago
i have updated the edit again, as always copy and paste and you will get the result you are looking for. i have made the font size 24px, you could resize it making it bigger or smaller as it looks prettier for you
Chlegou 5 months ago
ok i got it, much better, thank you, is there a way i can make that clickable so if your on your mobile device or computer that initiates a call
MrG1130 5 months ago
of course! wait a sec
Chlegou 5 months ago
i have added the call option
Chlegou 5 months ago
any updates?
Chlegou 5 months ago
Sorry had a meeting, much better, the call action does not work on mobile but it does on desktop. Also the text is black, can it start out as the same blue as the social icons, almost done, much appreciated.
MrG1130 5 months ago
i miss copied the correct code, now it color is always blue. for the call, this is what we could do, if i knew a better method for mobile, i will let you know.
Chlegou 5 months ago
for the call, according to this topic: https://productforums.google.com/forum/#!topic/chrome/Cp4txqhCX14 it may be an outdated navigator version, i have tested in chrome on android and worked for me. try to update your navigator app and test for it again. but it must work, since this is the only way to achieve that. that's the only protocol to launch a call from a webpage.
Chlegou 5 months ago
yea, i think im good, im good with this project, i appreciate it, i have a few other couple things that need to be done
MrG1130 5 months ago
thanks for rewarding it, you could contact me by email if you want, i could finish them faster since we have chat in google hangout. email: nicolastsue@gmail.com
Chlegou 5 months ago
View Timeline