Question 165971 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can I add width & height HTML props to a logo on WordPress header?

I’m using WordPress (Astra theme + child) to build this website and these properties are missing from the logo (width and height), but I don’t know how to add the properties. I tried to see the "header.php" file in the theme but I’m not at all familiar with php. This is the code in the header.php file:

<?php
/**
 * The header for Astra Theme.
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package Astra
 * @since 1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

?><!DOCTYPE html>
<?php astra_html_before(); ?>
<html <?php language_attributes(); ?>>
<head>
<?php astra_head_top(); ?>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">

<?php wp_head(); ?>
<?php astra_head_bottom(); ?>
</head>

<body <?php astra_schema_body(); ?> <?php body_class(); ?>>
<?php astra_body_top(); ?>
<?php wp_body_open(); ?>
<div 
<?php
    echo astra_attr(
        'site',
        array(
            'id'    => 'page',
            'class' => 'hfeed site',
        )
    );
    ?>
>
    <a class="skip-link screen-reader-text" href="#content"><?php echo esc_html( astra_default_strings( 'string-header-skip-link', false ) ); ?></a>
    <?php 
    astra_header_before(); 

    astra_header(); 

    astra_header_after();

    astra_content_before(); 
    ?>
    <div id="content" class="site-content">
        <div class="ast-container">
        <?php astra_content_top(); ?>
Tags:

2

Answers


  1. 0

    If you are trying to resize your logo, you don’t need to get into the theme editing option, you can easily do it by customization option.

    Go to WordPress Dashboard > Appearance > Customize >
    From the left panel, Go to Header builder > Logo, here you can easily size your logo.

    Check out the attached image for a better understanding.

    Astra Theme Logo sizing option

    Login or Signup to reply.
  2. 0

    If you use the custom logo / site identity element in customizer with the Astra Theme you can use the "get_custom_logo" filter to add the dimensions.

    With this filter, you can alter the HTML code of the logo that will be rendered on the front end.

    So we can use a str_replace to add our width and height parameters.

    With the $width and $height variables, you can specify the width & height of the logo:

    add_filter( 'get_custom_logo', function ( $html ) {
$width = '151';
$height = '49';

return str_replace(
    '<img src=',
    '<img width="' . $width . '" height="' . $height . '" src=',
    $html
 );
} );

    You can put this code in functions.php in the child theme. Tested this myself using the Astra theme and an SVG logo.

    If it doesn’t work, you may need to adjust the str_replace function’s "needle" to target the precise HTML code line where you want to target the replacement of the specific HTML code of your logo.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search