Widget Links

If I understand you correctly, you want a site owner to be able to enter their phone number and then you want that number to appear as a click-to-call automatically.

You'd also like this phone number to appear in the sidebar?

I would suggest setting up a customizer option for a site owner to enter their number. Then, you grab that data and hardcode it into the theme. Place it where you want it. I would also use media queries to show a click-to-call version of the number on mobile only. Not much point having it there for desktops.

Treehouse has a course on using the Customizer API.

Here's what your code may look like if you're using a function to place your code:

<?php $phone = get_theme_mod( 'phone_number' ); ?>

<a class="click-to-call mobile-only" href="tel:1<?php echo $phone; ?>"><?php echo $phone; ?></a>
<span class="desktop-only"><?php echo $phone; ?></span>

How you actually get that where you want it depends on your theme. If you have access to the template files, you can forget the variable and do something like

<a class="click-to-call mobile-only" href="tel:1<?php echo get_theme_mod( 'phone_number' ); ?>"><?php echo get_theme_mod( 'phone_number' ); ?></a>
<span class="desktop-only"><?php echo get_theme_mod( 'phone_number' ); ?></span>

Nice ! Thank you.

I have access to website files so will be looking to implement your second solution into the theme. Its the idea of making the theme as less repetitive were possible as it will re used multiple times.

Thank you for the help, i have tried using the your code and was unable to get in working.

Here is the code for the widget

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
                                    <?php dynamic_sidebar('Telephone'); ?>
                                <?php endif; ?>

How you would go about adding a call link within this code?

Thank you.

Add this to your functions file ( You won't need the opening php tag I've added ) :

<?php 
function your_prefix_do_responsive_phone_number() {

$phone = get_theme_mod( 'phone_number' );

?>
<a class="click-to-call mobile-only" href="tel:1<?php echo $phone; ?>"><?php echo $phone; ?></a>
<span class="desktop-only"><?php echo $phone; ?></span>

<?php
}

then in style.css put something like the following:

@media only screen and (max-width:959px) {
.desktop-only{
display:none;
}
}
@media only screen and (min-width: 960px) {
.mobile-only {
display: none;
}
.desktop-only{
display: inline-block;
}

}

IMPORTANT:

The get_theme_mod( 'phone_number' ) won't work for you unless you've created a customizer setting with the ID "phone_number". So replace that ID with your customizer setting ID.

The actual media queries you use depend on your current style.css and whether it's mobile-first or not. I've written out the screen width explicitly to make it clearer.

The styles, of course, are just to toggle visibility. You'll have more work to do to get it to look good.

Then finally in your template file just put this where you want the phone number to appear:

<?php your_prefix_do_responsive_phone_number(); ?>

Depending on your template file you may want to wrap your phone number in another div and style that.