How to: Add Social Media menu to Header

Featured Theme Forums Bootville Lite How to: Add Social Media menu to Header

This topic contains 6 replies, has 2 voices, and was last updated by  zeaks 2 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #17927

    zeaks
    Keymaster

    Social Media Menu

    Bootville Lite comes with a social links menu that displays in the header area to the right of the site title. Here’s how you can use it.

    1. Visit Appearance > Menus
    2. Create a new menu, name it whatever you like ( social menu works )
    3. On the left click “Custom Links” type in the URL to your Facebook profile for example, in the Link text add whatever you like it is the facebook URL that tells the menu what icon to display.
    4. Save the menu and add it to the “Social Links menu” area and save.
    5. Refresh your site and you should see a Facebook icon in the header area.

    Here is a list of available icons you can add to the social menu.

    • plus.google.com
    • instagram.com
    • linkedin.com
    • pinterest.com
    • twitter.com
    • github.com
    • wordpress.com
    • facebook.com
    • youtube.com
    • mailto:
    • feed/

    If you don’t see one that you would like to have added to Bootville Lite leave a comment and I’ll make sure to include it in the next update and show how you can add your own!

    #18053

    qmagnet
    Participant

    I am brand new to wordpress and trying to figure out how to use it. I installed the Bootville Lite theme which is very nice. I was surprised I could not simply add my own icons.

    Anyway, could you add an icon for twitch.tv?

    #18054

    zeaks
    Keymaster

    You can add any Font Awesome icons that are available here https://fortawesome.github.io/Font-Awesome/icons/

    Twitch.tv is one that’s included. You can create a child theme to do this or add it using a Custom CSS plugin, or add it to the style.css. Adding it to style.css will not protect it from being overwritten during an update but I will add this service to the next update anyways.

    Add this CSS using one of the above methods.

    #menu-social li a[href*="twitch.tv"] { background:#6441A5;}
    #menu-social li a[href*="twitch.tv"]:before { content: "\f1e8"; }

    Then just add your twitch TV link to the social menu ad you would any other.

    #18055

    qmagnet
    Participant

    Hmmm, the youtube and twitter icons appeared automatically but twitch did not. I will have to see what I missed.

    #18056

    zeaks
    Keymaster

    Visit Menus > your social menu that you created,on the left click “custom links” add your Twitch URL to the url section, and Whatever you want as the Link Text, click “Add to Menu”, then save it and refresh your website.

    If you can’t get it to work and want me to log in and take a look use the Contact link at the top of this page to email me.

    #18057

    qmagnet
    Participant

    Ah I added your code and it worked! Thank you zeaks. I was confused when you wrote “Twitch.tv is one that’s included.” I assumed that meant the code was included.

    I really enjoy the design. The only I didn’t like was not being able to remove the top Nav Menu, since I personally have no use for it. But I was able to remove the code in header.php

    #18060

    zeaks
    Keymaster

    Glad you got it working. The nav menu is almost required in a theme, usually if there are two menus I’ll add an option to disable either one but if you edited the header and removed it that’s fine. Just remember when there is an update your modifications will be overwritten if you didn’t use a child theme http://zeaks.org/how-to-create-a-wordpress-child-theme-and-why/

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.