How to Add Social Media Icons to Your Header In StudioPress Genesis Framework (WP Basics 32 of 33)
Articles Blog

How to Add Social Media Icons to Your Header In StudioPress Genesis Framework (WP Basics 32 of 33)


Alright, so in this video I’m going to show
you how to add some social media icons to the header of your website so that way people
can visit your social media sites. Alright, let’s check it out! Okay so in order to begin here we are on our
homepage of our website that we’ve been working on and we want to basically move this logo
to the left and we want to add some social media icons on the top right so that way when
people land on our homepage they really get an idea of what our website is about and where
we are on social media. So in order to do that let’s go ahead and go back to StudioPress
and we’ll show you so cool plugins that are available for any WordPress members. So here
we are in StudioPress if you go to ‘MY STUDIOPRESS’ and click on this button. So you’re going
to go ahead and scroll down where you see ‘GENESIS PLUGINS’ go ahead and click on that.
So these are all the plugins that are available for you with StudioPress and Genesis. So go
ahead and scroll down till you see ‘SIMPLE SOCIAL ICONS’. Go ahead and click on that.
As you can see you’re going to get all these little buttons that have various social media
icons. We are going to want to go ahead and download that. Once you download that, save
it to your computer and we’re going to upload it. Okay so here we are back on our dashboard.
We are going to go ahead and install that plugin that we just downloaded. So we want
to go to ‘PLUGINS’ click ‘ADD NEW’, click ‘UPLOAD’, ‘BROWSE’ and we’re going to find
that widget that we just installed. Okay so now that we have that Simple Social Icons
downloaded, we’re going to go ahead and click ‘INSTALL NOW’ and we’re going to go ahead
and ‘ACTIVATE PLUGIN’. Okay fantastic, it’s already installed right here. So the next
step is we’re going to put it on the top of our header. So we want to go to ‘APPEARANCE’
and go to ‘WIDGETS’. You see the box right here that says ‘HEADER RIGHT’? If it’s not
open just go ahead and click on the arrow. We’re going to go ahead and drag this Simple
Social Icons into Header on the Right. Now they’re going to give us some options to set
this up. What I recommend is you click this ‘OPEN LINKS IN NEW WINDOW’. The reason why
is when someone clicks on the social media icon you’ll want them to open up a new page
just in case they want to visit your social media site but not have them complete log
out of your website. Okay so you see the social media icons right here. You can change the
size, border, alignment, and colors but before we do that let’s just go ahead and add in
some social media sites and then we’ll see what it looks like. Okay so now that we’ve
added some of our social media sites we are going to go ahead and click save. And now
we’re going to go back to our home page and we’re going to refresh it to see what it looks
like. Okay great, so now you can see the logo has moved to the left and here’s our social
media icons but we don’t want it right here, we want it some where on this side. We’re
going to go ahead and go back to the widget and change the alignment. As you can see here
it says “Align Left” we’re going to go ahead and change it to “Align Right”. Then we’re
going to go ahead and click ‘SAVE’ and we’re going to go ahead and refresh. Oh perfect!
Okay so now you can see the logo is on the left, social media icons on the right and
when we click on these social media icons they’re going to open up in a new window,
new tab and as you can see it shows up your social media website. It’s just a great way
to, once people come to your website they can automatically see this is what the name
of the website is. Here’s some social media sites, they have your navigation and your
content is front and center. So there we go, hope you guys enjoyed this tutorial and I’ll
see you guys in the next one. 🙂

12 thoughts on “How to Add Social Media Icons to Your Header In StudioPress Genesis Framework (WP Basics 32 of 33)

  1. So this video is useless to the 99% of users who don't have a Header widget area in their theme. You should specify that these instructions are specific to the particular theme you're using. 

  2. Hello, Anthony. I strictly followed every step of the video. But the section "Header Right" does not appear in the widget aerea. Here is a screenshot after uploading and activating the plugin "simple social icons" > http://agusaviacao.com.br/site/wp-content/uploads/Screenshot.png.

  3. Hi, It looks like i don´t have a right header? if i go to my widget page, i can only see header and my icons end up more or less in the middle.,

  4. Hi, great video, although I already have the icons setup I am wondering whether you can advise how I add the Facebook LIKE to the bottom of my post via site – where do I add the generated code?
    Also the Genesis Latest Tweets won't allow me to adjust settings – any thoughts?

  5. You are articulate and concise. That part is so helpful. Any chance you've done a tutorial on "how to add social media icons in your header area" for those of us who DO NOT have a header area widget in our StudioPress themes?

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top