Rowan - Social Media Icons
In the Rowan theme, you can place your social icons in three different areas on your site: the footer, the sidebar, or the top navigation menu.
A “social profile link” is the direct URL to your profile on Facebook, Twitter, etc. To obtain your social profile link, visit your public profile in your browse and copy the URL from the address bar.
You must use a complete URL when setting up your icons, meaning your URL should include http:// and look something like this: http://www.facebook.com/17thavenuedesigns. If you only use "facebook.com/17thavenuedesigns," you will get a page error when you click on the icon.
Linking your Icons
- 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.
- 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.
- Be sure that you keep everything around your link the exact same, including the quotation marks. Sample code: <a href=”http://facebook.com/17thavenuedesigns.com/”>
- After you have added all of your links, highlight the code in social icons document and copy it.
- From here, follow the instructions below to place your icons in the Sidebar or Navigation Menu.
Go to Appearance > Widgets in your Wordpress dashboard. Drag a Custom HTML widget into the Primary Sidebar widget area. Paste your code from step 4 above. Save.
Navigation Menu Icons
For the social icons to display in the top bar, your Primary Navigation Menu must be active. If not, your icons won't appear. Click here for instructions on setting up your menu.
1. Go to Appearance > Widgets in your Wordpress dashboard.
2. Drag a Custom HTML widget into the Nav Social Icons widget area.
3. Paste your code in the text box from step 4 in the "Linking Your Icons" section.
4. Find this section at the top of the code and remove it:
Replace that line with this:
<div align="center" class="nav-social-icons">
5. Click Save.
Using navigation icons without a menu
If you do not want to display a menu in the top navigation bar but you still want the social icons, there's an easy trick you can use. Here are the instructions.
Icons not displaying correctly?
If your icons are not displaying or linking correctly, please see this article.