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 (227) 1.63 KB
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.
Guest Posts
If you want to guest post on Serradinho, please visit our Guest Posting Guidelines
Bookmark/Share
Author Information
Article by George Serradinho
I am the proud owner of Serradinho and have made this my second home. I'm into blogging, downloads, WordPress and the internet in general. I also love meeting and helping others and learning new techniques.
Karen @ Blazing Minds
Kissie
Arafat Hossain Piyada
Christie
aviationMY
{ 32 comments… read them below or Leave your opinion! }
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