So, I received an email from a user asking how I did the full width header image and menu on the blog. I have set up this post especially for this purpose and I will try and explain what to do.
For this tutorial, I have manually set the top and bottom menu items that must be displayed. One could use the normal thesis menu if you really wanted to. One would have to edit the CSS styling then for menu.
You will have to set your site to be full width. You can go to ‘Thesis Design‘ and change ‘Framework Options‘.
So, what’s with my menu’s:
- Top menu (pages) – show page links and a search form to the right. When hovering over link, show line underneath.
- Bottom menu (categories) – show certain category links. When hovering over link, highlight background colour.
Please remember to backup your custom_functions.php and custom.css files.
The CSS details are for the header and title area as well as for the two menu bars that appear (above and below the header). This must be copied to your custom.css file. You can change the font and background colours to match up with your site.
The function I used must go in the custom_functions.php file. This is a very simple function. You will see I removed the normal thesis navigation menu as I have created the menu within the function.
Download:
Thesis Tutorial - Full Width Header and Top and bottom Menu
The download was made available on 25 November 2009 and is in zip format. The file size is 1.63 KB and has currently been downloaded 473 times.
I have put all the details in in the zipped file above, you can download it and then have a better reference .
Thesis Tutorials
I have a few other thesis theme tutorials that you could have a look at to help you make your site/blog as unique as possible. I know there are many posts by other sites also explaining what one can do, so make sure to do a search via Google.
Final Thought
I hope this tutorial has helped you understand what to do and how easy it is to make changes. Let me know if you need any additional help, I’m here to help.
I am the proud owner of Serradinho Blog and have made this my second home. I'm into blogging, downloads, WordPress, meeting and helping others, etc. Basically the internet in general :) Serradinho Web Services is my own company whereby I offer my services to clients. This ranges from web design, website upgrades, theme customizations, support, premium WordPress plugins and many more .....
View all posts by George Serradinho, there might be other posts that interest you.
{ 36 comments }
Very nice tip, thanks for sharing
.-= Tinh´s last blog ..How to Optimize Your Images To Reduce Blog Loading Time =-.
It is a nice tutorial for people that want to change up their Thesis theme. Greg Ellison
.-= Greg Ellison´s last blog ..Blog Income Report for October 2009 =-.
i didn’t use thesis, but this tutorial also can be implement on other theme.
@izzat aziz – you could do that, but it depends on how your theme is.
Hi George,
I like the header section of your blog you have added recently.
It’s looking cool…..
I am launching my new blog on young habits.I’ll try to make it simple like yours.
.-= Surender Sharma´s last blog ..Wordpress Plugin Compatibility Beta Integrated With WP Plugin Directory =-.
@Surender – thanks man, will see what you come up with
Let me know when it’s live
Thanks for the tutorial. It really looks kewl. I always follow thesis tutorials to implement it on my design.
I was looking such a thing as fixed size banners are not that attractive and flexible are.
.-= Dinesh´s last blog ..Translate Text Into 72 Different Languages With Tradukka =-.
George cool one but I guess you lost the multi level page nav with this one??
But still its looking good
.-= Harsh Agrawal´s last blog ..Halloween Special Wordpress Theme Offer : Grab 10 Premium Theme for Price of 3 =-.
I was about to say the same Harsh! Thanks you George for this great Thesis Tutorials!
.-= Hesham´s last blog ..Why Famous Bloggers using Thesis Theme for Wordpress? =-.
@Hesham – one could use the thesis nav menu instead of the top or bottom menu, the choice is yours.
wow another great thesis tutorial, I’m going to try this for my blog. Between, thanks again for your help in email Serradinho, appreciate it!
Regards,
Lee
.-= Lee Ka Hoong´s last blog ..Huzzer Blog Commenting Contest Win Up To $600! =-.
@Lee Ka Hoong – no problem man, some of it is easy and others not. Your site is coming along well now.
Thanks Serradinho, I will remember that you helped me a lot in my thesis theme customization. I’m poor in design, don’t have design mind or “brain”, I’m trying to improve.
Between, you typed too fast and my name was wrongly typed, it’s Lee Ka Hoong instead of Lee Ja Hoong. haha!
.-= Lee Ka Hoong´s last blog ..Huzzer Blog Commenting Contest Win Up To $600! =-.
@Lee Ka Hoong – thanks for pointing it out, I have changed it now and it’s correct.
I’m also no expert, that’s why my design changes a lot. I try a few things and I usually get a few emails about what users like and dislike. I’m also in contact via other methods with other high profile users who give me feedback and assistance. Thesis just takes time to understand the power.
Nice tut. Thanks for sharing
.-= steppinout´s last blog ..Top 5 Free Image Hosts =-.
George I love your Thesis tutorials (I bet your getting tired of hearing that), but I really do. I think I might have to try this on my Tanning blog.
.-= Extreme John´s last blog ..Halloween Costume Contest Pictures and Voting =-.
@Extreme John – well, try it out if you want. Let me know if you do try it, want to see what you can do now.
Hi there,
I have a question on this tip. I want to keep my header such as Blog Title as it is, not like yours, How can I do that with this tip. I am bad at coding so, your support is really helpful. Thanks in advance
.-= Tinh´s last blog ..2 Simple Ways To Restore Your PageRank =-.
@Tinh – there is a setting whereby you can select (Thesis Options – Header). Set it to show both and then you will have to check how it displays.
Thanks, I will try this again and ask you later if problems happen
.-= Tinh´s last blog ..Historic Thesis Skin for FREE =-.
@Tinh – what problem are you having? Please let me know if I can help.
This is exactly what I have been trying to do on my site! Thanks so much for posting this reference.
.-= passive family income´s last blog ..10 Secrets to Staying Focused When Writing Content =-.
@passive family income – it does help when we post tutorials, makes other users happy
Nice tutorial!
I tried out to copy&paste the code to a clean wp/thesis installation. Everything works great and your code is a great way to understand Thesis, but the Search Box is displayed in the logo image header area instead of the right side of the top menu? Why is that?
@janabetis – do you have a website address so that I can check and see what the problem is.
Not sure if it is going to work, I am experimenting locally.. but give it a go:
thx in advance
@janabetis – I tried it and it displays details, but it seems the css styling is not there. I will send you a blank email and you can send me your thesis folder zipped and I will test it on my PC. I have installed WP locally as well, so I will be able to see whats happening.
@janabetis – I checked your site and saw that I forgot the styling for the search form. I have updated the post to include it. Thanks for bringing this to my attention.
Thank you for all the support and for this awesome tutorial! It has helped me learn a lot about Thesis! Will keep in touch!
Thanks George, Thanks allot..I was searching for this thing from many many days..dont know how i skipped your blog for this.I am going to add this now..Hope it will work like ur prev tutorials
.-= ankit @ All About India´s last blog ..Famous Tourist Places in Mumbai =-.
@ankit – let me know if you run into any trouble, you should not, but just in case
George, I tried the same code with Thesis 1.6 theme. I am getting roughly 1 px white space at the image bottom, and 8px image whitespace towards the right side. Is there a way to correct this?
I can send you the screenshots to show what I mean
@Vikas – please do send me screenshots as it will help me. Make sure to check outer page padding in your Thesis design.
Hi George,
When I tried to copy your code in custom_functions.php, I am getting this error –
“Parse error: syntax error, unexpected ‘}’ in /home/singh321/public_html/easycpamarketing.com/wp-content/themes/thesis_17/custom/custom_functions.php on line 118″
Anything I am doing wrong? I am not technically good so please help me to get out of this error and tell me how to use it properly.
@sumer – please email me a copy of your functions file so that I can help you. It’s a bit hard for me to see what has been done.
Comments on this entry are closed.