Podcast Episode

238 – Add Social Buttons to a WordPress Menu

Announcements

Is there a plugin for that?

With more than 50,000 plugins in the WordPress repository, it’s hard to find the perfect one. Each week, I will highlight an interesting plugin form the repository.

For more great plugins, download my 50 Most Useful Plugins eBook.

HTML5 Maps and Interactive World Map are free plugins for WordPress displaying an interactive map of the world with clickable regions. The map features customized links and popup balloons.

Listener Feedback

Question from Chris about Backups.

Can I back up my website by just copying my code from my server via FTP to my computer?

While, yes, this is technically true, I still recommend using a plugin for backing up your site for two reasons:

  1. By backing up your files manually, there is a good chance that you will forget to do it at some point. The backup plugins make it really easy to set it and forget it.
  2. Copying the files from your FTP client does not back up the WordPress database, only the theme / plugins / uploads folder; along with your WordPress software. You can manually back you for database, but again, there’s a good chance that you may forget.

Add Social Buttons to a WordPress Menu

I read an article this week on WPBeginner.com on how to add social media icons to menus and I thought it would make a great topic for this week’s show.

In the past, I’ve added Facebook and Twitter icons to a WordPress menu, but it was quite messy. You had to upload your image to either your theme or your media library and write a special class to get the image to display instead of the text.

The Menu Social Icons is the slickest plugin I’ve seen for awhile. With this plugin, you can easily add your social icons from the most popular social accounts. And if there’s an icon that you need that’s not included, you can use the Menu Image plugin to add custom ones.

Alternatively, you can use the Font Awesome library to add additional icons for the plugin. You will need to add some code like the code below to add new font icons to your site.


add_filter( 'storm_social_icons_networks', 'storm_social_icons_networks');
function storm_social_icons_networks( $networks ) {

$extra_icons = array (
    '/feed' => array(                  // Enable this icon for any URL containing this text
        'name' => 'RSS',               // Default menu item label
        'class' => 'rss',              // Custom class
        'icon' => 'icon-rss',          // FontAwesome class
        'icon-sign' => 'icon-rss-sign' // May not be available. Check FontAwesome.
    ),
);

$extra_icons = array_merge( $networks, $extra_icons );
return $extra_icons;
}

Call To Action

Sign up for next webinar

Full Transcript

Business Transcription is provided by GMR Transcription.

Hello, everybody. Welcome back to another episode of Your Website Engineer podcast. My name is Dustin Hartzler and I am back from my worldwide journey across over to Spain. I spent a couple weeks over there. My wife had a pharmacy conference and we did some sightseeing as well. So we spent some time in Madrid was a lot of fun and then one day in the city of Toledo.

It was a really neat, ancient city that we got to explore and walk and travel like 10 miles or 12 miles on foot walking up and down hills all throughout the town and then we spent the couple days in Valencia down by the beach and we spent some time at the beach there as well. So now I am officially back. I am back into the driver’s seat if you will and I’m here to bring you another great episode filled with WordPress information.

As I was building up this show tonight, putting the notes together, I thought that it was going to be a very quick show, but I think I’ve got a lot to cover so we’re just going to go ahead and dive right in. The first thing that I want to share with you is about the WordPress webinar that’s happening next Friday. That would, let me look at the calendar here, July 3. That is going to be how to properly add Java script and other types of scripts to a WordPress theme or plug in.

Now there’s a right way to do it and there’s a wrong way to do it and we’ll be definitely talking about the right way and I’ll highlight some of the incorrect ways to do that as well just to make sure that our themes in our plugins are building things exactly the way that WordPress recommends that we do and so that’s going to be what the webinar is all about. You can register over at yourwebsiteengineer.com/webinar and that will be on July 3 at 10 am Eastern.

If you cannot make it, feel free to sign up and then you’ll get an email later that day with a webinar reply and you can watch it at your own leisure. I’m excited to share news today because the last couple had no WordPress news, but after being gone for a couple weeks things have kind of piled up just a bit. So let’s go ahead and talk about something that is going to be officially merged into WordPress 4.3 and that is called the menu customizer and basically if you remember and I don’t know how long ago that the customizer came out from WordPress.

So if you go under appearance and then customize, that gives you the ability to – it kind of opens up this customizer it’s called and then it has on the left hand side it has all these different areas that you can manage and change your website. So right I believe you can do widgets. You can do custom CSS if you have a certain plugin installed. You’ve got all these different options of all the different things that you can do. Well, the new part is in WordPress 4.3, you’re going to be able to manage your menus right here inside the customizer which is really nice.

So essentially, they’re taking all the pieces that are found under the appearance menu in your WordPress dashboard and those are all getting kind of rolled into this customizer thing. It’s really cool. It’s responsive and it gives you the ability to see things immediately. If you’re familiar with the current WordPress system, now you have to – you drag and drop your menus in order. Then you have to click save and then you have to open up another tab or go to in view your site and see if the changes have been made and they look good exactly how you like them.

Well, now, inside the customizer, you can just drag them exactly where you want and you’ll see them in a preview window right beside the customizer and they’ll update immediately and you can see them and then you can click save and then you’re completely done. So that’s really nice. That is going to be one of the big features that’s coming in WordPress 4.3. I believe, let’s see, there is – it looks like there’s no official timeline for removing the menus link inside of WordPress.

So you can still manage them in the same place, but it’s transitioning to make everybody start to use the WordPress customizer just a little bit and so I’m not sure exactly when the first beta of WordPress 4.3 is supposed to be coming out. I believe it’s at the beginning of July. So keep your eyes and ears open for that and then we can start playing with that and seeing how that will actually work. Another thing that I wanted to let you know about today is something that they’re looking for in the WordPress community.

They’re looking for people to volunteer some time to build a screencast or make videos tutorials on how to use WordPress. There’s a link in the share notes for this, but this was posted over on make.wordpress.org and it’s coming from wordpress.tv. They’re trying to kind of build out their video database and instead of like right wordpress.tv just has tons and tons of Word Camp presentations, but they’re looking for short videos for people to – how to add custom menus or something like that. Just a short three to four minute video highlighting that exact thing.

So the thing with documentation, especially with WordPress, it’s very, very hard to keep updated and it takes many, many hands to keep updated and it takes many, many hands to keep things updated and do things along the way as well. So that’s why they’re reaching out and they’re asking for people to volunteer a little bit of time to go out and make a video and all the details on how to do that can be found over in the links for – in the show notes for episode number 238.

Another thing real quick that I want to highlight and I’m kind of wanting to put in just a small little segment right here at the beginning of the show of what you can do this week for your WordPress website and if you are running I Themed Security which used to be Better WPC Security, that plugin, you can actually lock out any person that’s trying to log into your website with the admin user name and so if you’ve been following me for any given amount of time, you know that I highly recommend changing your WordPress user name from admin to anything else.

Admin is the one that gets the hack the most because then if somebody knows that the user name is admin then all they have to do is guess the password, but if you have a very difficult user name and a difficult password, it’s going to make it very, very hard for somebody to log into your site. Even if you have a simple user name, as long as you – if you activate this piece of WordPress or the Better WPC Security or I Theme Security plugin, you can say that anybody that tries to use the user name admin gets automatically locked out forever and that blacklists their IP address and whatnot and so I recently turned this on and it has helped turn down the number of people that are actually trying to login to my account.

I used to get notifications all the time that people were trying to login. Now it just automatically just shuts them down and they can’t get in at all once they try that user name once and then they’re completely wiped out because I know that I’ll never try to use that user name because I know that that’s not the user name for my site. So that’s one little last piece of thing. If you are using that plugin, go ahead and activate that, turn that on today. It’s in the settings for I don’t remember off the top of my head, it’s down a little ways and it just talks about how to block people from logging into your website. So go ahead and check that out.

There is a plugin for that section that has actually two plugins and it is called HTML5 maps and interactive world map and so these two are plugins that basically do the same thing. One of them is a newer version of the old one.

So the HTML5 maps is a mobile friendly, responsive, easy installation HTML5 maps and the other one is a – I’m not sure exactly the technology behind that, but basically it gives you an ability to build out a map that people can see and hover over and do different things with. I know that this isn’t going to be a perfect solution or even a plugin that’s used for most of the people that are listening to this show, but it was something that I found that was really cool.

Have you ever tried to build something with maybe the map of the United States and you wanted to show how many restaurants there are in each individual or anything along those lines? You can do all of that with either one of these plugins. So you can check out the links to that in the show notes for episode number 238 and then lastly before we get to the main segment of the show, I have a question in from Chris about backups and so he left me a voicemail. So let’s go ahead and listen to that and then I’ll answer that right after this question.

Speaker 2: I have a question. Hi Dustin, my name is Chris Hutchins and I’m calling today about backing up your WordPress site. I know you have been doing multiple episodes about this recently and I get the importance of it. I also get the importance of using plugins to be able to back up your website. I actually had a foundational question, though. Could I not simply just go to the FTP site for my website and actually just copy all and then paste all into Dropbox or something else.

Is there something that the plugins do that necessitate my using a plugin instead of just doing a copy paste via FTP using programs such as I think you’ve discussed Cyber Duck in the past? So anyways, if you could answer my question on that, that would be really appreciated. Once again, I’m a huge fan of your work. This is Chris Hutchins from the Voices of Canadian Leadership podcast. Thank you.

Speaker: All right, Chris. Thanks so much for your question and thanks for sending that over to me. He basically just sent over a WAV file or an MP3 file and just emailed it to dustin@yourwebsiteengineer.com and if you are interested in leaving a question or having a question answered on the show, you can do that as well. So two things came to mind as I was listening to this question, Chris. The first one being that it’s absolutely perfectly okay to do this. You can take any FTP client, Cyber Duck transmit, whatever you have, whatever program that works well for you.

You can use that and you can download all your files and then you can save them in a very secure place. Now the reason that I recommend using a plugin versus doing this manually is one, it’s manual and you have to remember to do it and I’ve always found that whenever I try to manually back something up, it seems like I forget once and a while or life gets in the way and it’s just not as important as it should be and so it may go two weeks and then it might go three weeks between backups and it may go four weeks between backups.

By using a plugin, all you have to do is you tell it how often to do it and so I don’t remember what my website, the last time I checked. I might have the website itself backed up like once a month and then the database backed up every week because I normally only post once per week and that comes to the second part of the question is when you are backing up[ everything via FTP, that’s basically you’re backing up WordPress which is awesome.

You’re backing up plugins and you’re backing up your themes and all of your uploads, so all of your media files, but you’re not backing up the content of your website which is what changes the most regularly and the most frequently and actually you need to use a plugin or you can go in and you can actually use the control panel from your web post, but it’s the same thing. If you are doing this manually than you have to remember to do it regularly. So that’s why I really like a plugin and a plugin allows you to not have to really know anything by backing up.

There’s Back WTP Up and there’s Backup Buddy. There’s Backup WordPress to Dropbox. Those are three of the most used ones I’ve used in the past and those ones work really, really well because they just do everything for you. You click a button. You do a few little configuration things and then it remembers to do it and it does it very, very regularly based on the time you specify. So you don’t have to remember to go ahead and backup and then you can also send where – or you can also tell these plugins where you want to send your backup to.

So some of them you can back up to Dropbox. You could send it Amazon S3. You could email your database to yourself. You have a lot of options and you can do multiple backups and you can send them multiple places. So that’s another reason why I like using the plugins. So, Chris, thank you so much for your question. I hope this helped and again if you have a question that you’d like me to answer on an upcoming show, send over a WAV file or an MP3 file over to dustin@yourwebsiteengineer.com. Okay.

So today’s main section of the show comes from an article that was recently published over on wpbeginner.com and I’ll have a link to this in the show notes as well, but this is basically like I saw the title of the post and I’m like oh my goodness, why have I never talked about this before? And mainly the reason was because it was ridiculously hard and it was going to be very difficult to talk about on a podcast because of all the different things that you had to do to get icons to show up in your menu and you may be thinking why would I want to do that? Well, a lot of websites have social icons that show up in their menu and it makes it really nice. It kind of compacts your menu down a little bit.

You don’t have to have the words like Facebook and Twitter and LinkedIn that take up space on your menu bar, things along those lines. So – and the way that you had to do it in the past, the way that I’d always done it, was you had to upload the – you had – save these icons somewhere and then you had to use some special classes. You had to write a little bit of code to get them to display where you wanted them to.

It was just kind of a headache and a hassle, and so I saw the title of the article and when it said how to add social media icons to WordPress menus and I got really excited because I thought hey, maybe this would be a good step by step way to do this the hard way. Well, it turns out that this is not the hard way. This is the actual easy way and I’m really excited to share this with you because I took some time and I installed two different plugins. There are two plugins that can allow you to do this.

I guess there’s one that does all the work for you and then two if you need a little extra images added and so we’ll talk about that in a second, but basically what this is is this is a plugin that will allow you to create a custom menu and use custom links to go to your different social accounts. So how does this work? Let’s go ahead and talk about this just a second. So the plugin is named menu social icons and it is a free plugin in the WordPress repository. There’s only two in the show notes and it basically – their tagline is icons in an instant.

It allows you to easily create menu items that are the images whether it’s the image for GetHub or Instagram or Facebook or LinkedIn or Pinterest or an email box or like a little email envelope, anything like that. You could easily add this to your WordPress menu with very, very few steps and so what you need to do, obviously you need to go to the WordPress repository and download it and install or you can use it from the search inside of WordPress in the plugins area and then you add this plugin and it maybe a little confusing at first.

It was a little confusing to me, but basically what you want to do is once you have the plugin turned on, activated, then you go to the menu section which makes sense. You want to add a new menu and then you go to the section that’s called custom links and this is kind of different because it works really cool and it’s really, really neat. So you go to the custom links areas. So there’s post pages, categories, all of this area, the custom links now just has some new functionality.

Before the custom links area just had the ability to add – it added the menu name and then the link. Well, now when you do it, it gives you the URL and the link text and you can basically just click on one of the social icons that show up underneath the sections. So it basically has expanded the custom links section of the menu area and now there’s the social icons there. So if I click on the Facebook icon, now it basically tells – it gives it the link text to Facebook and it puts a URL of Facebook.com and you have to go up there and you have to edit and add your own Facebook URL obviously.

You don’t want to direct people just to Facebook.com, but then you can go ahead and add the menu and that just basically adds that right to the menu which is super slick and super easy. So you don’t even have to really do anything. You just – you click on the image that you want to add and then you add your custom URL and add it to your menu and you’re done. You can save it. It’s really, really cool and the cool part about doing it this way in the menu structure is then you can move them around.

You can drag them and drop them if maybe one day you want them in alphabetical order, you can put them that way. If you want them in a different order, you can do that as well. So I really like that and it makes it really, really flexible. Another reason to make these in a menu structure is that you can use the custom menu widget that’s inside of WordPress, that’s built in and then you can display that menu as well.

So if you go over to widgets or you could actually do this in the customize section which we talked about earlier, buy right now we’ll just do it in the – I’m just going to do it in the widget area, but you could just go to custom menu and you could add your custom menu to whichever side bar that you want and then you select the menu and you can select the social menu. That’s the one that I chose for this particular instance or this example.

So if you wanted to have a different menu appear in your sidebar or in your footer than what’s in your main navigation, you would just go ahead and create a new menu and then select that menu as your custom menu inside your WordPress dashboard or within your widgets which is really nice. It’s really, really cool and very, very simple and then it gives you the ability – then they’re actually using font icons which are the ability to – you can customize these with custom CSS.

You can make them different colors. You can make them different colors based on hover, all these different things and if you don’t have – if you don’t want to do any of that, they come out as the default color as the same – it’s the same color as your links in your main menu which is really, really nice and so that’s the plugin. It’s really, really simple and it makes it so nice and so easy. Menus social icons. So you may be thinking, okay, this plugin actually has – it’s got maybe 20 or 25 icons built in, but what if I want to do something that’s not built in? Well, how do I do that?

Well, there’s a way to do that as well. You can actually upload your own images if you’d like to. So maybe you don’t like the color. Maybe you don’t like the icons that the plugin has actually used and selected for each individual site. You can actually add another plugin that’s called menu image and that plugin will give you the ability in the menu structure itself to upload an image and you can upload up to two images. One is the menu item and one as the hover item.

So if you wanted to really customize and really control what your website looks like, you can upload a custom icon, maybe it’s a black and white icon or the main menu and then when somebody hovers over it, it turns into the color icon or whatever. You can do that as well. So that’s really cool. You can do that as well and you can upload any custom image that you have or anything that you’d like to do as well.

So that’s a really neat solution to conquer a very difficult problem that used to take a long time to figure out because also when you were using the old school way, when you actually had to program it and do a bunch of things, you also had to get the padding right, the spacing right top to bottom, and left to right and it was really kind of a headache and a hassle, and so you can do all of that now with these two plugins, and then the other thing that I wanted to mention if you need to do some custom control, you could always add a class and then add a little custom CSS to make it the spacing that you like.

Maybe the – I guess the reason that I would do this is because most of the menu icons are spaced out kind of evenly so they may have 25 pixels of padding on the left and right to make them kind of centered, but then you might not need that much padding on both sides for individual social icons. So you could go ahead and you could write a little custom CSS to kind of nudge those icons just together just a little bit so they look aesthetically just a little bit more pleasing and so that’s what you can do there.

Another thing that you can do if you want to dive into just a little bit of code, you can actually use – you can use some of the font awesome library icons and you can use those and add those actually to the plugin itself as well. So basically what you want to do is there’s just a little bit of code that you need to add and there’s a link to that in the show notes.

You can see that code and basically what it is is you’re basically just adding more of these icons from the font awesome icon library and so it’s pretty simple. It’s some code that you can put in your functions.php file or your custom – some sort of custom plugin that you’ve created and it basically – you can just go and say oh, say for this example, this example is the RSS feed and so you just add the RSS. You add the class name.

You say what the icon is and that’s basically it and then that will – that icon image will appear with all the rest of them that show up inside the WordPress dashboard in the menu section. So that’s the easy way to add menu items to a WordPress menu and so there’s two plugins like I said before, the menu social icon. That’s the main plugin that’s going to do the bulk of the work, but then also if you need to have a little bit more function and you want to upload your own custom images, you’ll need the menu image plugin as well and all of these things are listed in the share notes for episode number 238.

So that will wrap this episode. Thanks so much for tuning in. I was excited to share with this week and this is actually like an actual thing that we do with WordPress and just kind of like a how to. I know it’s a little difficult being all-audio, but I think if you go and install those two plugins, you’ll figure it out and it’s very, very simple. All the work happens in the custom menus area. So that’s what I wanted to share.

Don’t forget to sign up for the WordPress webinar July 3 at 10 am Eastern and we’ll be talking about Java script and how to get it all properly into your sites and plugins. That’s all I got for you this week. Take care.

Leave a Reply