How to Customize Logo Size on Twenty Nineteen Theme
-
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]
-
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.
That setting doesn’t seem to help. Cropping to a square is still forced.
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.
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="..." /> <!--<div class="site-branding-container"> <?php // get_template_part( 'template-parts/header/site', 'branding' ); ?> </div><!-- .layout-wrap -->
-
This reply was modified 6 years, 4 months ago by
jimmypowdrellcampbell.
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.
My theme is cropping to a circle. Am I missing something here?
Turning the logo into a circle is the theme design.
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 !
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 theadd_theme_support
part from the parent theme.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 6 years, 2 months ago by
Marie Mainguy.
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.
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.
-
This reply was modified 6 years, 2 months ago by
Marie Mainguy.
-
This reply was modified 6 years, 2 months ago by
Marie Mainguy.
-
This reply was modified 6 years, 2 months ago by
Marie Mainguy.
In the Code Snippets plugin, did you activate the snippet and set it to run on the front end?
Hi – komiska’s code worked for me. I just had to adjust my width and length. Here’s Komiska’s code:
function company_customlogo() { add_theme_support( 'custom-logo', array( 'width' => 400, 'height' => 100, ) ); } add_action( 'after_setup_theme', 'company_customlogo', 11 );
I added the code to the functions.php in my child theme.
Hi, also like to change the round logo to a 400x100px logo. Unfortunately, I am not a coder but normally find a solution like this forum. I read through the above messages and various links. Installed the code-snippets plug-in and pasted the ff code in the snippet (and activated the code).
function spasalon_customlogo() {
add_theme_support( ‘custom-logo’, array(
‘width’ => 400,
‘height’ => 100,
) );
}
add_action( ‘after_setup_theme’, ‘spasalon_customlogo’, 11 );The good news is that I noticed that now I can upload the logo image with 400x100px instead of the square format :-). Unfortunately, my rectangular logo does not (yet) show, its stays round as per the theme design.
I did find a reference to modify logo size in a CODEX post;
https://codex.wordpress.org/Theme_Logo#ExampleThe CODEX post is made of 2 sections. The above “function” code looks like it is the first part. Is the “output” custom code the required 2nd part? How and where do I add this missing code?
All assistance is appreciated!
-
This reply was modified 6 years, 4 months ago by
- The topic ‘How to Customize Logo Size on Twenty Nineteen Theme’ is closed to new replies.