Harper - Social Media Icons

In the Harper theme, the social media icons are displayed in the following locations:

  • Top navigation menu
  • Sticky navigation menu

The icons can also be displayed in any other widget area, like the sidebar or footer.

Linking your Icons

  1. In your theme download file, go to the Custom Codes folder and open the “social-icons” file. This is an editable document where you’ll be connecting each social icon to your social profiles.
  2. Inside the file, you will see several spaces that say YOUR FACEBOOK LINK or YOUR TWITTER LINK. Paste the URLs of your social profiles to replace these text markers.
  3. Be sure that you keep everything around your link the exact same, including the quotation marks. Sample code: <a href=”https://instagram.com/17thavedesigns”>
  4. After you have added all of your links, highlight the code in social icons document and copy it.
  5. From here, follow the instructions below to place your icons in the theme.

Useful Tips

A “social profile link” is the direct URL for your profile on Facebook, Twitter, etc. The easiest way to obtain your social profile link is to visit your public profile in your browser and copy the URL from the address bar.

You must use a complete URL when setting up your icons, meaning your URL must include https:// and look something like this: https://www.instagram.com/17thavedesigns. If you only use "instagram.com/17thavedesigns," you will get a page error when you click on the icon.

Navigation Menu Icons

Before you can add the navigation social icons, you will need to turn on your Top Left Navigation Menu. Click here for instructions.

Go to Appearance > Widgets. Drag a Custom HTML widget into the  Nav Social Icons widget area. Paste your social icons code in the text box from Step 4 above. Save.

Sticky Navigation Menu Icons

This will depend on where you have menus configured.

  • If you're using the Header Right Navigation Menu, you'll add a Custom HTML widget to the Header Right widget area and paste your social icons code.
  • If you're using the Below Header Navigation Menu, your icons will automatically be pulled from the Nav Social Icons widget area (above).

Using icons elsewhere in your theme

You can add the social icons code almost anywhere in your theme.

  • In the sidebar: Add a Custom HTML widget into the Primary Sidebar widget area and paste your social icons code.
  • In the footer: Add a Custom HTML to Footer 1, Footer 2, or Footer 3 and paste your social icons code.
  • On a page: Add a Custom HTML block and paste your social icons code.
  • In a blog post: Add a Custom HTML block and paste your social icons code.

Icons not displaying correctly?

If your icons are not displaying or linking correctly, please see this article for troubleshooting tips.