Get all themes with lifetime updates for 95 USD. View all promotions

Create your social icon menu

The Start Blogging theme uses menus for social icons and then uses menu locations that are already predefined within the theme template files…one in the header.php file and the other in the footer.php file.

The top social icon group looks like:

social top

The bottom social icon group looks like:

social bottom

You have the option to make two separate menus, or you can make one and assign it to both locations.

Here is a list of what social network icons are available in this theme:

  • RSS Feed
  • Deviant Art
  • Dribbble
  • Facebook
  • Flickr
  • Google+
  • GitHub
  • Instagram
  • LinkedIn
  • Pinterest
  • Reddit
  • Stumbleupon
  • Tumblr
  • Twitter
  • Vimeo
  • Xing
  • VK
  • Mailto:

Create a Social Menu

  1.  Go to Appearance >> Menus, then click on the “create a new menu” text link:
    create menu link
  2. Name your menu anything you want:
    menu name field
  3. Click on the “Create Menu” button:
    create menu button
  4. Once created, you will then see a Menu Settings group of options…choose the Social locations that you want this menu to show. For this theme, you can choose “Social Menu” (which is the bottom one), or the “Top Social Menu” location(s).
    menu locations

Adding Social Links

These are the links to your social profiles.

  1. After you made your social menu, open the “Custom Links” tab and add in the link to your profile and then the name of the network:
    menu custom link
  2. Click on the “Add to Menu” button
  3. Repeat for each social network you want to show
  4. Click the “Save Menu” button
    save menu button

Add Your Own Social Icon

If you need more, you can use the Font Awesome icon set as a reference to add any of their available icons by doing your own custom CSS. Using the Twitter icon as an example, you can use it as a template to add your own icon; just replace the link part and the content “\f099” to the one you are going to use:

.top-social-icons a[href*=""]:before,
.social-icons a[href*=""]:before {	
     content: "\f099";

The Font Awesome website will show you want content ” ” code to use and then add the code above with your changes to the customizer’s Additional CSS tab. Once done, you can then continue adding your social icons to the social menu.