On my last tutorial I went over the process of changing the logo image when scrolling down the page. If you missed it check it out here.
During the process, I discovered that I also wanted to have the second header logo link to a page other than the homepage.
For example on the site I use for live demos for my tutorials, I wanted to have a link back to my tutorial page.
It turns out all it took was a little modification to the header.php file. So here it is.
Lets Get Started
If you are working with a child theme you can go to Appearance>Editor and open your header.php. If not, I strongly recommend you create a child theme for this as any modifications to your header.php will be erased when your Divi theme is updated. Here is a tutorial on creating a child theme.
1. Find this code in your header.php file
<div class="logo_container"> <span class="logo_helper"></span> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"> <img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" /> </a>
And replace it with this. Be sure to replace “INSERT YOUR URL HERE” with your actual url.
<!---------------------------------> <!---------- Custom URL -----------> <!--------- by Quiroz.co ----------> <!---------------------------------> <div class="logo_container"> <span class="logo_helper"></span> <a href="INSERT YOUR URL HERE"> <img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" /> </a>
And if you want it to open in a new page/tab, then add this instead but still replacing YOUR URL with the actual url
<!---------------------------------> <!---------- Custom URL -----------> <!--------- by Quiroz.co ----------> <!---------------------------------> <div class="logo_container"> <span class="logo_helper"></span> <a href="INSERT YOUR URL HERE" target="blank"> <img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" /> </a>
And that’s it! Have fun!
By the way. I love providing these tutorials for free but for those of you who use these to your financial gain, might you consider buying this poor guy a coffee? Every penny helps me to continue to provide these Divi tutorials free for all to learn and grow 😉
Well that’s all for now. I hope you find this article useful.
Great Tutorials 🙂
Would you be willing to share how you made the nav bar float in like here http://montereypremier.com/
I am working on a tutorial for that.
Brilliant cant wait, that effect is awesome.
Cheers
Hi Geno I have looked every where and can’t find anything on my problem. I would like the shopping cart symbol (I use woocommerce) to show in the header on mobile devices. It is added to the menu list rather than being in the header. Do you know if there is a fix for this? Thanks so much! 🙂
This seemed simple to follow and I thought I did as instructed. Double and triple checked that I followed the given sequence and directions. Unfortunately, my logo did not link up to the desired page. I received an error that the page could not be found (even though I could readily pull the page up using the url). Any suggestions or things to check?
This is GREAT and WORKS if you want a link within your site pages… but What if you want the logo to link to a page that is not in your wordpress but to an outside link?? How would you go about doing that?
Actually this tutorial allows you to use any url you want. See here http://screencast.com/t/ZSBRAYy0
By the way how didyou make your header move back and forth like that??… super neat!
This doesn’t seem to work with 2.6.1?
Yes it does.
This seemed simple to follow and I thought I did as instructed. Double and triple checked that I followed the given sequence and directions. Unfortunately, my logo did not link up to the desired page. I received an error that the page could not be found (even though I could readily pull the page up using the url). Any suggestions or things to check?
I would double check the html in the header.php. Check for an error in the syntax.
This seemed simple to follow and I thought I did as instructed. Double and triple checked that I followed the given sequence and directions. Unfortunately, my logo did not link up to the desired page. I received an error that the page could not be found (even though I could readily pull the page up using the url). Any suggestions or things to check?
Hi Steve! I can’t think of anything specific to suggest that you check besides what is in the tutorial. If you’d like to provide a link to the site you are working on I can take a look at it and see if I can spot the issue.
If you get the error page when you click the logo try to write the url down with the http:// and not only the www. This solved my error page. And thanks for the help Geno!
Thanks for sharing!
Now i successfully linked my inner page in the header logo image. thanks for sharing this useful tips.
The steps are clear and easy to follow, it works without any issue, Thanks for sharing and explaining the Tips.
Awesome. Glad you like it 🙂
Is it possible to link the header to a different page, currently its directed to the homepage.
Hi Halen. Yes it is. This tutorial shows you how to do it. Check out my example of it in action here: http://montereydev.com/demos/menucta-and-logoswap/
I determined that I also desired to have the second one header logo link to a page apart from the homepage.
Cool.
I discovered that I additionally wanted to have the second one header logo connect to a page separated from the landing page. Professional Essay Writers UK
Beautiful website. Nice work.
Thanks for every tutorial, always on point! I was wondering if it was possible to change the URL of the logo on a single page only?
It is possible but probably requires it’s own tutorial and approach.
Very nice but what i have to do i want any link on logo ? Thnaks
Try removing this line
and this at the end
Thank you for putting this info, now the logo seems to be linked to the homepage
Hey Geno,
Thank you for sharing these amazing tips!
You are welcome 🙂
Hey!
Thanks for putting up this tutorial Geno. Very helpful tips.
Thanks for sharing the great stuff… Your tips will be helpful for me to link the pages from header logo..
Glad to help.
Excellent post..! Hardly found this type of collection. Thank you for sharing this post with us.
we are working on a new SEO website that links back to our website IT Plus, this is what I was exactly looking for…thanks mate…
I have been searching for this solution a while. Thanks for sharing it on your website.