Tutorials Code social media buttons for WordPress Create great social media buttons using the WordPress menu tool, built-in icon fonts and a little CSS 60 DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/webdesigner
Tutorials S ocial media is a huge part of our internet identity, so most websites have links to your sites of choice in a header, footer or sidebar. Engaging your audience and encouraging them to click on these links, let alone drawing attention to them in the first place, can be a tricky business. In this tutorial, we’ll cover how to make icons that stand out, using just the tools that WordPress provides for us. You don’t even need to know any coding, just be a copy-paste master! We’re opting for moderately sized buttons that will look great on mobile and desktop, with subtle hover states, coloured backgrounds, gradients, and even support for IE 9+ (with a graceful IE8 fallback). By using WordPress’s powerful menu, a plugin and customisation tools, we can accomplish this all through the Admin panel without digging into background code. There’s no need to crack open your theme, and all the changes made will be saved in the WordPress Admin panel. This tutorial breaks down into three easy steps: set up a menu, install the FontAwesome icon font using a plugin, and add CSS to the customisation panel. If you’re CSS-savvy, you can easily scale these buttons to be smaller, larger, and change the icon and background colours to match your theme. 1. Create menu in WordPress The first step is to set up the menu using the WordPress menu options. Go to your Admin panel, and open Appearance>Menus. Click ‘Create a new menu’ next to the Select dropdown. This will open a blank menu, now name your new menu and then click Create Menu. 2. Add menu items Click the Custom Links dropdowns on the left-hand side. Add each social media link by inserting the URL and name into the fields provided and click Add to Menu after each one. You should end up with a list on the right-hand side. To reorder the list simply drag and drop. 3. Set email mailto link For an email link, you can use the mailto link. Instead of a URL, in the URL box type mailto:example@email.com, with your contact address instead. When clicked on, this link will open a visitor’s email client, with your email automatically in the To field. 4. Enable CSS Classes field We also need to assign CSS classes to our menu items so, if it isn’t already enabled, go to Screen Options in the top right and turn on the CSS Classes. Title Attribute and Link Target will also be useful, so turn those on too. Doing so will add more options to edit your menu items below. 5. Add CSS classes and titles Add a title in Title Attribute, eg, ‘Find us on Facebook’. Check the ‘Open link in new tab’ box. Assign two classes in CSS Classes, a shared and a unique class with spaces between, eg ‘social-button facebook-button’, ‘social-button twitter-button’. Do this for each link and then click Save Menu. 6. Assign the menu to a location Assign the new menu to a theme-defined location at the bottom of the menu edit page by selecting one of the Display Location options. Alternately put the new menu into a widget by going to Appearance>Widgets, drag a Custom Menu widget into the sidebar and select the name of your new menu. 7. Install FontAwesome WordPress has its own built-in font icon set which you can enable, but currently (WordPress Version 4.7.3) only packs Twitter and Facebook icons. For a more complete range, we can install FontAwesome, a free font icon set. For quick installation, get the Easy FontAwesome Plugin. Edit link options You can edit link configurations at any time. Expand link options with the dropdown arrow on the right of each bar. If you later need to change a link or remove one, you can do that here too! Left Adding a title will, by default, add a small hover state that shows the title so users know what to expect when clicking the link Top left Check the ‘Open link in a new tab’ option to turn on the target=”_blank” attribute for links, so clicking them will not take users away from your main site Top right Adding classes will give us something easy to hook onto with CSS later. Make sure there’s a space between each class, and use something memorable 61
Change language