How to Customize Logo Size on Twenty Nineteen Theme

Resolved danieldessinger
(@danieldessinger)

2 months, 3 weeks ago

I’ve already tried adding the code from another thread into the additional CSS field:

@media only screen and (min-width: 768px) {
.site-logo .custom-logo-link {
width: 100px;
height: 100px;
}
}

That’s great for increasing the size of the square logo, but I want to use my long logo that has the current square plus the site name beside it. How do I replace the current logo and text of the site name with a rectangular sized logo approximately 400 x 59 pixels?

The page I need help with: [log in to see the link]

Viewing 13 replies - 1 through 13 (of 13 total)

Joy
(@joyously)

2 months, 3 weeks ago
In the functions.php file, there is this code
```
add_theme_support(
	'custom-logo',
	array(
		'height'      => 190,
		'width'       => 190,
		'flex-width'  => false,
		'flex-height' => false,
	)
);
```
That controls what is allowed when uploading a logo.
smiranda
(@smiranda)

1 month, 3 weeks ago

That setting doesn’t seem to help. Cropping to a square is still forced.

jimmypowdrellcampbell
(@jimmypowdrellcampbell)

1 month, 3 weeks ago

I tried it in the child theme’s function.php and it didn’t work for me either but changing the height and width values in the main twenty nineteen theme’s functions.php did.
jimmypowdrellcampbell
(@jimmypowdrellcampbell)

1 month, 3 weeks ago
sorry – just to clarify, I meant changing the height and width values in that add_theme_support() function in the main twenty nineteen theme’s functions.php:
```
add_theme_support(
	'custom-logo',
	array(
		'height'      => 190, // change here
		'width'       => 190, // and change here
		'flex-width'  => false,
		'flex-height' => false,
	)
);
```
then adjust the css as required. To be honest, I just ended up commenting out the whole branding div (and its php) and hardcoding the logo html! 🙂
```
<div id="new_logo_div"><img src="..." alt="..." />

```
- This reply was modified 1 month, 3 weeks ago by .
Moderator Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

1 month, 3 weeks ago

Try using a Child Theme to remove this, then re-add it into your Child Theme’s functions.php file. https://codex.wordpress.org/Function_Reference/remove_theme_support

Twenty Nineteen is a core theme. If you edit it then you’re inviting many headaches down the line.

jeffmarbury
(@jeffmarbury)

1 month, 2 weeks ago

My theme is cropping to a circle. Am I missing something here?

Moderator Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

1 month, 2 weeks ago

Turning the logo into a circle is the theme design.
komiska
(@komiska)

3 days, 15 hours ago
Fighting with the same problem: there seems really to be an issue with custom-logo size setting 🙁
Created a TwentyNineteen Child Theme, and copied functions.php , edited the custom-logo function, but still the cropping is forced to the square 🙁
Adding this to the child theme functions.php didn’t work:
```
/**
 * Add support for core custom logo.
 *
 
 */
add_theme_support(
	'custom-logo',
	array(
		'height'      =>95 ,
		'width'       => 295,
		'flex-width'  => true,
		'flex-height' => true

	)
);
```
I’ve serached all the files in twentynineteen and there’s no other place the custom-logo is mentioned . i thought maybe some JS would keep it as is, but maybe the function itself is not working in child themes?

Thanks in advance for any help on this !
komiska
(@komiska)

3 days, 14 hours ago
THIS WORKED:
```
function company_customlogo() {
        add_theme_support( 'custom-logo', array(
             'width'       => 400,
			'height'      => 100,
        ) );
}
add_action( 'after_setup_theme', 'company_customlogo', 11 );
```
Answer provided by @imranaliweb

Obviously, as noted in the Codex, one has to write out the entire new function,
not only copy the add_theme_support part from the parent theme.

https://codex.wordpress.org/Theme_Logo#Example
Marie Mainguy
(@marie-mainguy)

1 day, 14 hours ago
I’m trying to achieve this but…I think I don’t understand enough coding…:(

Do I place this instead of add_theme_support in function.php ?

Do I have to change anything elsewhere ?

In the codex I don’t understand this part :

Use function_exists() wrapper to maintain backwards compatibility with older versions of WordPress.

To get the URL of the custom logo image:

$custom_logo_id = get_theme_mod( ‘custom_logo’ );
$image = wp_get_attachment_image_src( $custom_logo_id , ‘full’ );
echo $image[0];
or

$custom_logo_id = get_theme_mod( ‘custom_logo’ );
$custom_logo_url = wp_get_attachment_image_url( $custom_logo_id , ‘full’ );
echo ‘‘;

Thanks a lot for your time !
- This reply was modified 1 day, 14 hours ago by Marie Mainguy.
Moderator James Huff
(@macmanx)

Volunteer Moderator 🚀

1 day, 11 hours ago

You can add the code in komiska’s reply above: https://wordpress.org/support/topic/how-to-customize-logo-size-on-twenty-nineteen-theme/#post-11340255

into either your theme’s functions.php file, or a functionality plugin, like https://wordpress.org/plugins/code-snippets/

Personally, I recommend the functionality plugin option, it’s easier to maintain and you won’t lose it every time the theme updates.
Marie Mainguy
(@marie-mainguy)

1 day, 11 hours ago
Thank you @macmanx . I installed the functionality plugin as you suggested. I was able to upload a file at the size desired but it still appears small. Is there a way to keep the image at the size I uploaded it ? Many thanks again.

http://www.mariemainguy.com
- This reply was modified 1 day, 11 hours ago by Marie Mainguy.
- This reply was modified 1 day, 11 hours ago by Marie Mainguy.
- This reply was modified 1 day, 10 hours ago by Marie Mainguy.
Moderator James Huff
(@macmanx)

Volunteer Moderator 🚀

1 day, 9 hours ago

In the Code Snippets plugin, did you activate the snippet and set it to run on the front end?