Adding a telephone number to the header

  • VinceG


    Thank you for a great theme.

    Please could someone tell me how I could add our telephone number to the site like this image here?

    I have photoshopped the phone number onto a screenshot of my site to show you what I want and how I want it to look.




    Sorry, I made the image too big for it to show what I am looking for. Here’s a smaller image to show the phone number.




    You can do this many ways. I will say 2 that come to mind

    1.) Create the phone number with whatever special effects/ text in photoshop and save it as a png. or jpeg image. then upload it to your wordpress. – create a custom .div class in your child theme and then put the image inside a text box in your widgets with the div class and drag it under an action hook and place it into your prefered postion using firebug as a refrence …with postion absolute.

    2.) Do the same thing as above but instead of using an image you can just do normal text and change the font style and color etc. through your CSS in your child theme by changing the styles in the custom div class that surround your text again use firebug as a refrence.

    Hope that helps


    Kenneth John Odle


    You can use a Graphene action hook widget area, as well.



    Thanks for your replies guys, but that’s gone right over my head. I understand a bit of CSS and HTML, and a little php but am new to wordpress and it’s workings. Is this what you mean about about creating a custom .div class

    Is that like putting the following into my css


    Then call it somewhere in the php file of the header.php?

    I also don’t know what you mean by Dragging it under an action hook…

    Please could you explain it like I’m a 50 year old fogey… you’d be right.


    Kenneth John Odle

    Then call it somewhere in the php file of the header.php?

    Do not edit theme files. This is bad practice, for a number of reasons.

    Here is a tutorial of Graphene action hook widget areas. If you understand widgets, it’s fairly simple, actually:



    Have you created a child theme ? If not then I would make that a priority to do this before doing anything else with your website



    Thanks Kenneth, that link doesn’t work.

    Ian, thanks for your info, I’ll look into making a child theme.



    Thanks again for your replies guys.

    I have made a child theme and I am now trying to put the telephone number in the header where I want it.

    I have added this to my childs css file

    .vg-telephone {padding:10px;text-align:right;

    And I have added the following to the childs header.php

    <div id=”vg-telephone”>
    Telephone 0800 000000

    However, I still get the same dark grey text which is small, and it’s in the wrong place. I try moving it everywhere within the header file but to no avail. It seems that it’s not taking any notice of the CSS, see here this screen shot.



    Kenneth John Odle


    That’s because you are using .vg-telephone in your CSS. A dot designates a CSS class, but you are referencing an ID in your header.

    Use #vg-telephone in your CSS, instead.

    The link works. It really is better to use an action hook widget area, because using header.php in you child theme could have issues when you update the theme. If at all possible, you really want to use theme features before you use a child theme.



    Thanks Kenneth, I’ve sorted it now brilliant. Looks like I need to do some more reading up on CSS.

    I’ll be back, I’ve got more things bothering me…

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.