Skip to main content
UNC School of Medicine | School of Medicine IT

Social Media Menu

A Social Media Menu displays linked social media icons in a widget area, most commonly in the site footer. This is useful when your department, center, or program has official social media accounts that should be available across the site.

Before adding social media links, make sure the accounts are official, active, and appropriate for your School of Medicine website.

Screenshot of a finished social media menu located in a site footer.

Create a Social Media Menu

  1. In the Dashboard, go to Appearance → Menus.
  2. Select the create a new menu link.
  3. Give the menu a clear name, such as Social Media.
  4. Click Create Menu.

Screenshot showing how to create a new menu.

Add Social Media Links

Social media links are added to the menu as Custom Links.

  1. In the Add menu items panel, expand the Custom Links section.
  2. In the URL field, enter the web address for the social media account.
  3. In the Link Text field, enter the name of the platform, such as Facebook, Instagram, or YouTube.
  4. Click Add to Menu.
  5. Repeat these steps for each social media account you wish to include.

Screenshot of the creation of a social media menu highlighting how to add links to the menu, links to full-size image.

Switch the Link Text To An Icon

By default, the social media links will display as text links. To display a social media icon instead of text, a CSS class must be added to each menu item.

Click to expand one of the custom links and enter the corresponding class in the CSS Classes field.

Below is a list of available social media icon classes:

  • facebook-ico – for Facebook
  • linkedin-ico – for Linkedin
  • twitter-ico – for Twitter
  • instagram-ico – for Instagram
  • snapchat-ico – for Snapchat
  • youtube-ico – for YouTube
  • vimeo-ico – for Vimeo
  • rss-ico – for RSS Feeds

Screenshot of a menu of social media links being created in WordPress.

If you do not see the CSS Classes field:

  1. Scroll to the top of the Menus screen.
  2. Click on the Screen Options tab in the upper-right corner to expand the available settings
  3. Check the box for CSS Classes.

Screenshot of the Screen Options settings.

Save the Menu

After all social media links and CSS classes have been added, click Save Menu.

Add the Social Media Menu to the Site Footer

If you followed the steps above, you have successfully created a social media menu, but it will not display anywhere on your site by default. To display the menu in your site footer, follow the steps below:

  1. In the Dashboard, go to Appearance → Widgets.
  2. Locate the Footer widget area.
  3. Add a Navigation Menu widget to the footer.
  4. In the widget settings, select your Social Media menu.
  5. Add a title if desired, such as Follow Us or Connect With Us.
  6. Click Save.

Screenshot of a social media menu that has been added to the Footer widget area.

After saving your changes, view the public site and confirm that the social media icons display correctly and link to the proper accounts.

Example of a social media menu displaying in a site footer.