By Neil on June 17, 2014
This is a quick tutorial showing you how to add text to the header area of the website. This WordPress tutorial is part of the TurboBikeTrainer.com case study where we are walking through how to build the live website from start to finish. Read more about this case study here and see more video tutorials.
This tutorial is on a website that uses the Genesis Framework with the Metro Pro WordPress theme. This child theme comes with custom widget areas that allow the header area to be modified easily.
In the WordPress dashboard navigate to Appearance/Widgets and drag a text widget into the Header Right widget area.
If you are copying this walk through exactly type into this text widget the words “Don’t let the weather stop you. Use your road bike indoors!” Put the second sentence on a new line and check the box at the bottom of the text widget that says Automatically add paragraphs.
This will add the text to the header area of the website, but it will not be formatted correctly. To get the same formatting the same as the live TurboBikeTrainer.com website we need to add a DIV around the text in the widget and then style it with CSS.
Create a DIV called taglinearea (you can call it anything you like) and wrap it around your text. Save updates. See Figure 1 below.
Figure 1 Wrapping text with in a DIV ready for styling.
Navigate to Appearance/Editor and make sure you are viewing your Style.css stylesheet. Scroll to the bottom of your CSS Stylesheet and add the commented out line shown below (this is just so you know what your code is later when you look back at it).
Custom formatting of header text widget
Now add the CSS styling code:
The #taglinearea indicates that you are targeting the DIV with the ID of taglinearea. This code is defining a font size of 30px, an italic font, and a text color of dark gray.
Save this CSS Stylesheet and go to your website homepage and refresh it. You should see the formatted text in the header region of your website.
If you have any comments or questions please leave them below or contact me via my contact page.