SVG Logo Image

Hi there,

Is there a way I can use a SVG image as the logo? Say if I uploaded an svg to the cPanel file manager and pasted the link in the theme options somehow?

Any help would be greatly appreciated.

Many thanks,
Jack

Hello,

Thank you for contacting us.

The easiest way for you will be:

1. Upload your SVG logo to the server

2. Set up basel child theme

3. Override logo PHP function to get logo not from Theme Settings but set your path manually. Here is the code that you need to place into functions.php file in the child theme

function basel_get_logo() {
	$logo_src = 'http://YOURWEB_SITE/LOGO_IMAGE.svg'
	?>
		<a href="<?php echo esc_url( home_url('/') ); ?>" rel="home"><img src="<?php echo esc_url( $logo_src ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>"></a>
	<?php 
}

Don’t forget to set your actual path to the image.

Regards

Hi, thanks for the prompt reply.

How do I upload the svg file to the server? Do I just upload it into the theme basel child file in the cPanel ?

Yes, you can just upload your logo image through the cPanel.

ok, do I upload it to the child theme or the main theme?

So I go to the website public html, then wp-content, then upload to the theme?

Also, I was already running the Basel Child theme.

I just changed the functions php in the basel child theme folder (in the cPanel file manager section) like you said so it’d include the svg file link (http://sarakirkbyinteriors.com/wp-content/themes/basel/images/SaraKLogo4.svg) – I uploaded this to the images section of the Basel theme (not the child theme).

Should I be doing something else to override the current logo? And should I reload the child theme or will it already take into account I’ve updated the functions php?

Many thanks,
Jack

First: upload your logo not to basel folder but to child theme folder (basel-child/images/your-logo.svg)

After uploading and activating your child theme you will have the file wp-content/themes/basel-child/functions.php. So please add the code to this file and save it.

Afraid it still doesn’t work. I was already running the child theme – should I reinstall it? And will it mess up my site progress if I reinstall?

Please, provide your FTP access we will try to do it faster 🙂

Sorry, how do I do that?

Do you have FTP access so wee could connect your server and edit your files?

I’m not sure if I have FTP access. How do I find out?

And also try to place this code to the functions.php file instead of previous one

function basel_header_block_logo() {
	$logo_src = 'http://YOURWEB_SITE/LOGO_IMAGE.svg'
	$logo_img = '<img src="' . $logo_src . '" alt="' . get_bloginfo( 'name' ) . '" />'

	?>
		<div class="site-logo">
			<a href="<?php echo esc_url( home_url('/') ); ?>" rel="home">
				<?php echo ( $logo_img ); ?>
			</a>
		</div>
	<?php
}

tried that, it’s come up with this-

Parse error: syntax error, unexpected ‘$logo_img’ (T_VARIABLE) in /home1/jackbanister/public_html/sarakirkbyinteriors.com/wp-content/themes/basel-child/functions.php on line 17

In this case the only one way to help you is to edit functions.php file by ourselves. Could you please provide your FTP account or cPanel access?

Sorry again. Try to change code with the following 🙂

function basel_header_block_logo() {
	$logo_src = 'http://YOURWEB_SITE/LOGO_IMAGE.svg';
	$logo_img = '<img src="' . $logo_src . '" alt="' . get_bloginfo( 'name' ) . '" />'

	?>
		<div class="site-logo">
			<a href="<?php echo esc_url( home_url('/') ); ?>" rel="home">
				<?php echo ( $logo_img ); ?>
			</a>
		</div>
	<?php
}

Yes, it worked! Thanks so much!

… Now can I adjust its size?

Not to worry, just found it in the theme options section!

Thanks again for being so helpful!

ok, sorry I’m back to ask something else to do with the logo.

How do I change the white logo on the footer..

You can change your footer logo image in Appearance -> Widgets.

[Author]

Posts