How to Add Social Media Icons to Header in WordPress

The new age internet is dominated by social media sites. Having a nice engaging website is not enough these days; you also need a solid social media following base to grow even further. It is necessary for interacting with your audience and increasing your online reach. 

The header section is the perfect spot for any buttons. And, by adding social media icons to your website’s header, you can easily integrate your social media profiles with your website, making it easier for visitors to find and engage with you on their preferred social platforms.

This how-to blog is all about WordPress site header design with social media icons. By the end of this tutorial, you will be able to add these icons to the header on your own. So what are we waiting for, let’s go right in!

Why Add a Social Media Icon to Your WordPress Header Menu?

Yes, you may ask WHY, and in short words, the answer is social media platforms are the future of branding. Everyone spends a good amount of time on different platforms, and having a large following on these social media platforms can help you stay relevant on the internet.

When you add your social media handles to your website, you are basically pushing people to visit your different social media profiles, which can lead to a growth in followers and engagement. You may promote a variety of profiles with them without taking up a lot of space on your header.

In short, you need to add your social media handles on your header if you want to step up your branding game. Now that it’s pretty clear why you should add them, let’s get to know how to do that as well.

Adding Social Media Icons To The Header In WordPress

Step 1: Go to your WordPress dashboard, then go straight to Appearance, then select Editor.

Step 2: Click on the header.

Step 3: Click on any text on the header (1) and then click on the three dots icon there (2). It will show you some options where you will find Add After, click on that as well (3). It will create a space for adding a button.

Step 4: Then click on the (+) icon and then search for the ‘Social Icons’ block and select it. 

Step 5: Once the block is added, click on (+) to add the social media icon you want. For example, to add a Facebook icon, type in Facebook on the search bar that appeared, and select it. 

Then you have to click a certain icon to enter the URL of your profile on that platform. To link your profile, simply put the URL in that small bar. You can add as many icons as you want by clicking the (+) sign again; just repeat the same process.

To customize the block, navigate to the ‘Block’ tab. You can change the layout of the block here. 

To avoid opening social media links in the same tab, enable the ‘Open links in a new tab’ toggle. Also, WordPress’s default setting only shows the icons. So, enable the ‘Show labels’ toggle to show texts alongside the icons. 

Then head to the ‘Styles’ tab. You can further customize the button style, color, dimensions, spacing, and other aspects here. 

Once you got the look you wanted, click ‘Save’ and you’re good to go.


Adding social media icons in your header is quite an efficient way to boost user engagement, expand your online reach, and build a consistent brand presence. You’ll make it easy for visitors to connect with you on their preferred social sites if you can add them effectively.

This was the A-Z of customizing WordPress header with social media icons. Thank you for sticking with me and getting to the bottom of this tutorial. Hope this helped and you learned what you needed to know.

Also, check out our other tutorials for customizing your WordPress website:

Introducing a New Table Block Plugin - Tableberg
This is default text for notification bar