Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Nathalie C
Nathalie C
2,594 Points
Posted by Nathalie C
Nathalie C
2,594 Points

Using svg instead of png for logo

I have been able to successfully place a logo graphic as a .png file using bloginfo('template_directory') as discussed in How to Build a WordPress Theme - Preparing to Code WordPress Templates - Theme Images Directory. But I am also working through Build A Responsive Theme at the same time. I've just replaced the .png file with .svg file. Is it really that simple, because in the Responsive Theme lesson placing an svg seems a more complicated process.

4 Answers

Nathalie C
Nathalie C
2,594 Points
Nathalie C
Nathalie C
2,594 Points

Thanks John. What about a fallback though? I'm stumped with trying to implement one. I tried just lifting the fallback straight from static html page but that doesn't work, I just get a duplicated logo, one for svg and one for png. Should the fallback be placed on the functions php with a custom tag to hook in the correct place on the header file?

John Faught
John Faught
3,484 Points

Try looking at this and see if it helps you. I haven't worked much with SVG's

http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/

John Faught
John Faught
3,484 Points
John Faught
John Faught
3,484 Points

Thats about all it takes! If you are wanting it to be responsive you may need to open the SVG file in a text editor and delete the height and width if it includes it.

Nathalie C
Nathalie C
2,594 Points
Nathalie C
Nathalie C
2,594 Points

Thanks John that's a really useful link and another to add to my twitter follow list : ) I think I have found a solution using a simple tutorial on creating and implementing custom action hooks into WordPress - so now I have a custom hook placed right after my svg logo in the header.php, which is defined and then assigned a function using echo on the functions.php to write the png fallback into the correct place within the html.

http://digwp.com/2009/09/wordpress-action-hooks/

John Faught
John Faught
3,484 Points

Glad I could help!

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Are you putting a hook in the header or in the functions.php file to hook into the header?

Nathalie C
Nathalie C
2,594 Points
Nathalie C
Nathalie C
2,594 Points

Hi Matthew I've defined the hook on the functions.php with associated function and placed the hook in the header. Had trouble getting it to work at first because I couldn't get the image path right. In the end I had to state the full url as the echo wouldn't work if it contained a php tag for bloginfo('template_directory'). Just need to test it on an old browser now once I upload the site. I don't know how to put code on here, otherwise I'd show what I've done, but I haven't a clue if its correct, I'm guesstimating as I work through the two projects.