Adding a Bluesky social media icon to your WordPress Header or Top bar – The7

It can be tricky adding icons when your theme doesn’t include one by default.  But here are some steps you can follow to do it.

Step 1: Upload a Bluesky Icon

If The7 theme (or whatever theme you’re using) doesn’t include a Bluesky icon by default, you’ll need to upload one:

1. Find a suitable Bluesky SVG or PNG icon online.
2. Upload it to your Media Library via Dashboard → Media → Add New.

Step 2: Add a Custom Icon Link to the Header

1. Go to: Appearance → Customize → Header → Top Bar & Header Layout
2. Look for the Icons or Social Icons section (depending on your layout).
3. Click “Add New” and select Custom Icon.
4. If The7 has a Bluesky icon available, choose it. Otherwise, select “Image” and upload your custom icon.

Step 3: Link It to Your Bluesky Profile

1. Enter your Bluesky profile URL (e.g., https://bsky.app/profile/yourhandle).
2. Save changes and check that it appears in your header.

Optional: Add It Manually with Custom Code

If The7 doesn’t support adding an extra icon:

1. Go to: Appearance → Widgets → Custom HTML
2. Add this code snippet:
   html

   <a href="https://bsky.app/profile/yourhandle" target="_blank">
<img src="your-icon-url.png" alt="Bluesky" style="width:24px;height:24px;">
</a>

3. Adjust the size as needed and place the widget in your header section.

**If you have Megamenu installed, you can also create a link that is just a fullstop (period), style it to be the same colour as your header/top bar so that it isn’t visible, then add this HTML code to create the image icon link.

<a href=”https://bsky.app/profile/yourusername” target=”_blank”>
<img src=”https://YOUR URL/wp-content/uploads/2025/03/bluesky-1.png” alt=”Bluesky” style=”width: 24px;height: 24px”>
</a>

 

Now your Bluesky icon will appear in your header, linking visitors to your profile.