How to Customize Your Header in WordPress
Home >> Blogging >> WordPress Header Tutorial
Wouldn't you love to be able to create a custom header for your blog or add elements like AdSense code, social media icons, etc.?
In the video below, I'll show you how to customize your header using several different methods. Choose the one that is best depending on your theme.
If you'd rather read the tutorial, I've summarized the contents below the video.
If you enjoyed the video, please rate it at the end. Thanks!
Header Widgets
Some themes like the Genesis Lifestyle Theme, come with widgets. So when you go to Appearance >> Widgets from the admin panel, look to see if your theme already has a widget for the header.
Now you can just drag any of the available widgets to that area and customize that section.
For example, if you want to add an AdSense unit to your header, you would just drag the Text widget to the widget on the right and then paste the AdSense code into the space provided.
Hooks
Themes like Genesis and Thesis have free hook plugins (named Simple Hooks and Thesis Open Hook respectively). When you install these plugins, you can now update any part of your WordPress site by simply adding text to the appropriate section.
So for example, if you want to add something to your header with Genesis, instead of manually editing the header.php file, you simply add your custom text/code to the appropriate hook box.
Upload and Replace
Most themes today have a section for you to upload and replace the existing header. You can usually find this option under the Appearance tab in WordPress or in the tab created by your theme (if applicable).
Be sure to watch the video at the top of the page to learn how to create a custom image if you haven't already.
Also, here's another video that shows you how to create a sleek, portrait header for your site using Photoshop. You can also apply these lessons to Paint.net (free).
If you enjoyed the video, please rate it at the end. Thanks!
Adding Elements to Your Header
If you want to add other elements to your existing header like AdSense code, banners, social media icons, etc., and you do not have a hook plugin like Genesis or Thesis, you'll have to do part of this manually.
As explained in the video above, first create an ID in your style.css file to tell the browser where to display the elements.
So your ID may look something like this.
#adsenseCode {
position: absolute; top: 10px; right: 25px;
}
This tells the browser to display the element exactly 10 pixels from the top of the element and 25 pixels to the right.
position: relative;
So you'll need to find the #header style in your style.css file and make sure that it has position: relative; as one of the attributes. If not, please add it or this will not work.
1) Now open your header.php file which is located in the Appearance >> Editor section, and look for the tag <div id="header">.
2) Paste the code for your AdSense banner or whatever you want to insert here after this tag.
It doesn't matter where you paste it inside the tag because you've already told the browser to position it absolutely by using those coordinates in the style.css file. Just make sure you are inside the <div id="header"> tag.
How to Edit an Existing WordPress Header
The only way to edit an existing header image is to open the file up in a graphics program like Photoshop or GIMP. Then you'll need to re-save the image and overwrite the filename. Then re-upload it.
To find out the name of the file, you can right-click the header image with your mouse in your browser and select "View Image."
This will give you the path to the image and show you where it's stored on your web server. This is important to know so you can successfully overwrite the existing image.
Learn more about managing and uploading files swith WordPress here.
Need a basic WordPress tutorial? Click here.
If you liked this, please share. Thanks!
Hi, my name is 