Thesis WordPress Theme: Adding Custom Header With Thesis Openhook

How To Add Your Custom Header With Thesis Openhook Plugin In 60 Seconds!
This is an important post. I repeat. This is an important post. If you are about to build a WordPress Blog and are thinking of using the Thesis WordPress Theme as your framework, you can save yourself tons of customization frustration if you download the Openhook WordPress Plugin before you begin customizing your site. Why? Because it makes things so much easier. For example…

If you do a quick Google search on adding a custom Thesis header, you will find several tutorials by loyal Thesis users (such as myself:), teaching you how to customize your header by adding hook code either your custom.css file or your custom_functions file. These solutions still work but they can be messy if you don’t get the code right and you have to access those files via FTP or cPanel etc.

Instead, you can add a custom header with the Thesis Openhook plugin in about 10 seconds. No code to copy and paste, tweak, and publish. No touchy files to mess with. This is all you have to do.

1. First, this tutorial works for adding custom headers with a Page-Framework. You can check this by going into your Thesis Design Options, then clicking on site layout, and then checking the page framework button. (This is usually checked by default when you install Thesis, but go ahead and check just to make sure.)

2. Make sure you have downloaded and updated the latest version of the Thesis Openhook Plugin.

3. Make sure you have added your header image to your media files and that you copy the complete url for where that file is located. For example: http://your wordpressblog.com/wp-content/uploads/xxxx.jpg

Your header dimensions will vary based on the dimensions of your site. You may be using Thesis out of the box or you may have had some tweaking done. You also want to consider how much of your prime “top of the fold” area you want to dedicate to a header. I don’t want to give much, so the dimensions for my header are 1010 x 142 pixels. My header does not have a white background so I wanted it to reach completely from left to right. That’s why it’s so wide. Typical out of the box dimensions could be 959 x 150 pixels, but if your header has a white background you could actually play a lot around with the dimensions.

4. Click on the Thesis Openhook link and scroll to the Header hook. You can simply scroll down to find the header hook area or you can use the “select a hook” scroll down bar in the bottom right hand corner to find the header hook area.

4. Now here’s the easy part, all you have to do is add a little html code to establish the image location. Example: <img src=”http://your wordpressblog.com/wp-content/uploads/xxxx.jpg”>

5. If you want to make your header image clickable, just add a little more html code: <a href=”YourSiteLink.com”><img src=”http://your wordpressblog.com/wp-content/uploads/xxxx.jpg”></a> *(This step is optional)

6. To finish, click on the “Remove Thesis Default Header” box, so that your title and subtitle doesn’t appear on top of your new header image. Instead, your header takes the place of the header title and subtitle.

7. Click on the Little Save Button.

8. Ta-da! Your header image will appear and all is right with the world.