Add Instagram Icon in Header

Hey awesome staff,

I’m stuck trying to do something i can’t find the solution to. I’m currently designing the mobile version of my website and i want to add the instagram icon of “theme x” to the header. I would like to add it on the left side, where i made space for it (where normally the logo of a brand is). And i woud also like the place a dividing line between the icon and the .x-brand (FEDDE WESTERA). Is there any possible way to do this?

Site: feddewestera.com

Hey Awesome @Fedde,

Thank you for writing in!

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

You’ll want to copy this file to your child theme: x\framework\legacy\cranium\headers\views\global_brand.php

Then you can add the second image at the bottom. So the code will be something like:

<?php

// =============================================================================
// VIEWS/GLOBAL/_BRAND.PHP
// -----------------------------------------------------------------------------
// Outputs the brand.
// =============================================================================

$site_name        = get_bloginfo( 'name' );
$site_description = get_bloginfo( 'description' );
$logo             = x_make_protocol_relative( x_get_option( 'x_logo' ) );
$site_logo        = '<img src="' . $logo . '" alt="' . $site_description . '">';

?>

<?php echo ( is_front_page() ) ? '<h1 class="visually-hidden">' . $site_name . '</h1>' : ''; ?>

<a href="URL_TO_WEBSITE" class="logo-aside-image"><img src="IMAGE_URL" alt=""></a>

<a href="<?php echo home_url( '/' ); ?>" class="<?php x_brand_class(); ?>" title="<?php echo $site_description; ?>">
  <?php echo ( $logo == '' ) ? $site_name : $site_logo; ?>
</a>

Just change the “URL_TO_WEBSITE” with the one you want to point and “IMAGE_URL” to the URL of your uploaded image.

If you need to style it, you can simply use the “.logo-aside-image” CSS class in Customizer > Custom > CSS, like:

.logo-aside-image {
   /* Styling goes here */
}

This code could not be perfect however you could use it as a guide for what you want to achieve.

Hope it helps.

Let us know how it goes.

Thank you.

Thanks for the fast reply!

After adding the code to my functions.php of the child theme i get this error:

Your PHP code changes were rolled back due to an error on line 11 of file wp-content/themes/x-child/functions.php. Please fix and try saving again.
Call to undefined function x_make_protocol_relative()

This is line 11:
$logo = x_make_protocol_relative( x_get_option( ‘x_logo’ ) );

Did i do something wrong?

Hello @Fedde,

The code should be put into the global_brand.php file into your child theme. Please remove it from your functions.php as it may cause error to the whole page.

Please follow the steps written above by my colleague.

Let us know how it goes.

Thank you!

Thanks for the reply.

The only files i see in the dashboard > appearance > editor for the child theme is the style.css and the functions.php file. When logging into my hosts File Manager it does not go further than x-child/framework/views/.
Do i need to manually create new folders so that there will be a x-child\framework\legacy\cranium\headers\views\global_brand.php?

Fedde

Yes, you have to create the x\framework\legacy\cranium\headers\views\global(this is the correct one) directory and the _brand.php file.

Let us know how it goes!

That worked great! Thanks alot.

Only thing that i can’t figure out now is how to customize the image with the class. I need to make the image smaller and add an dividing line.
I’ve tried styling the class with max-width and max-height, but that does not seem to work. I’ve also tried changing the scale of the picture, but than alot of pixels are lost and the image starts to look blurry. Changing the size in photoshop could do the trick, but than it would look good on mobile but blurry on desktop.
For now i’m using the blurry image to show the progress of the dividing line.

As far as the dividing line goes, i’ve added this line but can’t figure out how to style it correctly. Right now it pushes the logo and the image down.

Is there a way to fix these two things?

Thanks in advance!

Hi there,

If you have this line in the code:

<a href="URL_TO_WEBSITE" class="logo-aside-image"><img src="IMAGE_URL" alt=""></a>

Then you could target the image by using the selector .logo-aside-image img. You could then create a media query to target the image on mobile so that you can adjust its dimension.

As for the diving line, try adding a right border to the image.

Thats alot guys! Got it the exact way i wanted it! :grinning:

Glad we could help.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.