How to Add the Menu Beside a Custom Image Header
Welcome to the Build Your Own Business Web Site Tutorial Series. The goal of these tutorials is to show how you, with basic word processing and desk top publishing skills can develop, manage and maintain your own business Web presence.
In this tutorial we will learn to add a custom image and the navigation bar to the header of our Thesis 1.6 site. This method does involve using a limited amount of PHP and CSS although it’s easy enough to make a good introduction to Thesis hooks, PHP and Thesis navigation styling and the code used in this tutorial can be cut and pasted from the blog post on this site.
There are five steps in this process. The first step is to “unhook” the Thesis navigation menu from its default location; Step 2 is to upload a custom image for our header; Step 3 is to write a custom function that places the image in our Thesis header; Step 4 is to write CSS for the header; and finally Step 5 is to make some minor modifications to the styling.
I’ve created a demonstration site located at www.headertutorial3.byobwebsite.com, where you can see the finished product and it’s this Web site right here. Now this of course is not the finished product but this is the site that we’re going to work on and when we’re finished it will be the finished product.
Unhook the Thesis Navigation Menu
Let’s go ahead and start off by unhooking the Thesis navigation menu from its default location. By default the Thesis menu is attached to a hook that is located before the Thesis header. So we’re going to go ahead and detach that. Now the way that we do that is to first get a copy of our custom_functions.php file from our Web site. Let’s go ahead and open up our FTP client and sign into our site. This is for me the “header tutorial” so we connected up to that.
If you don’t know how to use FTP like this go ahead and take a look at Lesson 4 of the Start Here Now tutorial series on my Web site. It goes through the whole process of setting up your FTP client and making this connection.
So we’ll go over to “themes” and “thesis_16” and “custom”, and to make sure that we have the current copy of the custom.css and custom_functions.php I’m going to download those right now from my Web site to my local machine. And we’re going to overwrite. Now I have those on my local machine. I need to open those up in my favorite code editing software. I happen to like Visual Studio so that’s what we’re going to use for this but you can use anything including Notepad.
Open up that file. We’re going to open up the custom_functions.php and the custom.css files that we just downloaded. So for me that was “Tutorial Sites”, “custom”, and “custom.css” and “custom_functions.php”, open those both up.
First we’re going to unhook the navigation menu. Now you can see right here, this is the perfect place to do it. It’s very important in PHP to keep your opening and closing tags in place properly. They’ve made this nice little spot for you right here in the middle for you to place any custom functions. So we’re just going to go ahead and take that spot and delete it. And then we’re going to go ahead and unhook the navigation menu. The code for that is “remove_action, thesis_hook_before_header, thesis_nav-menu”. This takes the “thesis_nav_menu” and removes it from the “thesis_hook_before_header”.
If we go ahead and we save that and go back to our FTP program and upload that back to our Web site, then we can come back over here to our Web site and refresh it – and presto chango – our navigation is now gone.
Upload the Custom Image
Now we’ll move on to Step 2, and in Step 2 what we’ll do is we’ll upload the custom image. I’ve created a custom image and I put it under “thesis_16”, “custom”, “images” in my file structure on my local machine. And now I’m just going to go ahead and upload that to the same location on my Web site. Now this “banner-3.jpeg” has been uploaded to “header tutorial”, “wp-content”, “themes”, “thesis_16”, and “custom images”. Obviously because we haven’t done anything else with it, it doesn’t show up yet.
Write a Custom Function to Upload the Image
But that does bring us on to Step 3 which is to write the custom function which places that image in the header. Let’s go ahead and open up our code editing software again and here we are back in our “custom-functions.php” file. We’ll go ahead and enter a space. The first thing we need to do is define this function, so we’ll say function, here’s the name of our function, we’ll call it “mycustom_banner”. Give it the opening bracket and then close out the PHP and start HTML. We’re going to create a div with an id of “mycustom-banner”. Notice it’s different than “mycustom_banner” which is the name of the function. We’ve created this div and inside that div we’re going to put a link with an image as the link element.
So again using HTML a href= we’re going to type in the address of where we want this image to link back to which in this case is http://www. this then will bring us, every time you click on the image, back to the home page of this Web site. We’ll give it a title and we’ll close that tag. Then we’ll enter our image. This is where we put the address of where we started, so in this case it’s http://www/ wp-content/themes/thesis_16, custom, images and then banner-3.jpg.
We’ll give it a little bit of alt text. We’ll specify the width of the image which in this case is 475 pixels, the height of the image of 150 pixels and we’ll go ahead and close out the tag.
Then we’re going to go back into PHP and put the closing brackets of our function in. Okay so this is our function, it’s called custom_banner and it creates a div called mycustom_banner that makes an image link of 475 pixels wide and 150 pixels tall.
Now that we have a function we have to attach that function to a hook. So we will add_action, thesis_hook_before_header, and then enter the name of our function, mycustom_banner. Okay, so there’s our function attached. Now we’re going to reattach the navigation menu – _action thesis_hook_before_header, thesis_nav_menu, and we’re finished. And that brings us to the end of the first video.