How to Use WordPress Headers to Add Functionality on Your Site

When people go to a website, the header is often the first thing to be noticed. Based on how your header looks, a user can make a quick decision of whether or not they’d like to stay on your website or blog.  That’s why the first impression is extremely important. This is a kin to people being judged according to how they dress and look. The judgment may be far from the reality, but this reaction is an almost psychologically automatic process that our brains make. This is why it is important to have different options for manipulating the look and feel of a header in order to give the impression that matches the content and feel of your website.

Below you will find characteristics of WordPress headers and several possibilities of how you can manipulate them

WordPress Headers

WordPress is very robust because it is possible to use it by simply changing some out of the box settings to manipulate different elements such as headers. In addition, it allows you more control by allowing you to change code that manipulates the elements.

Also on TechWyse

Top 15 Plugins To Use WordPress As Your CMS
Why Build Your Company Website Using WordPress?

A WordPress header is a very simple code that you can change either:

1. By automatically going to the general administrative settings to change the title and its description or
2. By changing the code through a HTML tag that features a template tag

The template tag has two different parameters or options including:

1. An option to manipulate the description and title of the website/blog through the general administrator setting panel.
2. An option to display the websites URL in a link.

Essentially, these two header options do the same thing in different ways.

1. They make the header a hyperlink to aid easy navigation of the site.
2. They give information in the header and the option of using a header graphic (i.e. either, a header image or header art).

Changing a Header Style

Depending on the theme you are using, if you want to style the header you will have to manipulate tags found in either the style.css file or the header.php file. You can do this by manually looking for the tags or elements to change in one of these two files.

The tags or elements you would be looking to change are:

• The H1 tag
• The header
• The header image/graphics
• The stylesheet description selectors

Header Graphics

Two header graphics commonly used to change the look and feel of the header are the:

1. Header images
2. Header art

Below is a brief description of how to edit them.

Header Images

You can change header images rather automatically through the Kubrickr utility. All you have to do is browse through the utility to the new image that you want to use. You could also choose to have more options and control in manipulating a header image by manually altering code in the header.php and style.css files.

Header Art

Header art as a type of header graphic is quickly gaining popularity. Header art are graphics used to describe images that are manually crafted using shapes, text, images, symbols and color.

The benefits of using header art include:

1. Manipulation of the image into anything you could possibly desire, with the clarity and exact feel that you want.
2. The header art can be unique and blend with the rest of your webpage in a way only designed manually.

Header art can be very laborious to make on your own and this has created an opportunity for artists to create header art from user specifications or through their own artistic inclinations. This album art can be for sale or can be available free on some websites. Acquiring ready-made album art can be of advantage because:

1. All the laborious work has been done for you and the image is ready to use.
2. The image has been customized into a specific size to fit your website or blog.

Manipulating header art through code is through the same way as it is for header images.

Get a Clean Look by Hiding Header Text

In order to get a cleaner look, you may want to use only the header graphic without any default text. Your header graphic could also have your desired text and therefore the default header text will not be required. You could achieve this in two ways:

1. Hide the text but still leave it in the code. Do this by changing only the CSS “Adddisplay:none”  to selectors you don’t want to appear.
2. Totally remove the template tag that generates the text that you do not want to appear.

Make the Header Responsive

Whatever you choose to do to your header, whether you use an image or art you can make it responsive by making it click-able. To do so, put the image or art in a link by:

1. Using a CSS style sheet to define the hyperlink size area that is responsive on the header graphic and
2. Manually putting the image or art directly into a WordPress theme

Rotate a Header Image

There are several scripts for example the “Random Image Rotator” script that can help you rotate images within the header, on a template file or on the sidebar.

Add Navigation to a Header

You could add a navigational element to your header by adding a horizontal menu. To do so, create a division within the header to gain control of and style your desired navigational elements. You could also simply displaying categories across the header.

Different Headers on One Website

Another option to make your header dynamic is to have different (more than one) headers on one website. You could achieve this in two ways:

1. You could do it automatically using a plug-in called Dynamic headers
2. You could change some code to get the desired effect.

Conclusion

As shown above, you could manipulate the WordPress headers in several different ways to get your desired effect. This will not only entice users to your website/blog but also give your header more functionality.

1. You will get the results you want by changing some code, usually in a PHP file or on a CSS file
2. You might be lucky if someone has already created a plug-in to achieve the result that you want automatically.

Post By Jack Dawson (1 Posts)

Jack Dawson is a web developer and UI/UX specialist at BigDropInc.com. He works at a design, branding and marketing firm, having founded the same firm 9 years ago. He likes to share knowledge and points of view with other developers and consumers on platforms.

Website: → BigDropInc

Connect