Social media icons for Sela theme

  • Unknown's avatar
    mariannabebu1 · Member ·

    Hi there,

    I previously read an old post which asked about adding the social media icons to the main sidebar rather than just adding them to the bottom of the page. I would be really interested in knowing how this could be done.

    Any advice on how to do so would be really helpful! Thank you!

    Marianna @ happinessinacupcake.com

    The blog I need help with is: (visible only to logged in users)

  • kokkieh · Staff ·

    Hi there. To add social icons to the sidebar you’ll need to add the social media icons widget, instead of using the social menu that’s available in Sela. See here for using the widget: https://en.support.wordpress.com/widgets/social-media-icons-widget/

  • Unknown's avatar
    mariannabebu1 · Member ·

    Hi, thanks for your comment.

    I read previously it can be done on this thread (https://en.forums.wordpress.com/topic/sela-theme-social-media-icons?replies=41) which would allow me to use the social media icons from the Sela theme. As you can see from the thread, I need some sort of code to add to a text widget. I’m pretty stuck on finding the code – do you have any ideas?

    Many thanks again!

  • kokkieh · Staff ·

    As those links include stuff like your email address I’ve pasted the code you need into a text file, rather than pasting it here in the public forum. You can download it from Dropbox via this link: http://tinyurl.com/otklcqt

    Once you’ve downloaded the file, let me know and I’ll disable that link so potential spammers can’t get hold of your email that way.

    I’ve already trimmed the unnecessary code for you as described in the other thread and tested it for you. It works on my test site, so it should work on yours as well.

    Note that this will only display the icons as you currently have them in the footer menu. If you want to add or remove icons at a later date, you’ll have to first add them to the footer menu, and then get the new code for the widget.

    To get the code, right-click on your blog and select View Source Code (it differs somewhat depending on browser). This will show you your site’s html. Then search for the section of code that looks like the one I gave you here, and copy everything between the two div-tags to the text widget again.

    Or post in the forum again if that’s too complicated :)

    Either way, I suggest you bookmark this and the other thread for future reference should you want to make changes to this later.

    And thanks for asking your question. You’ve actually helped me discover a cool trick I didn’t know was possible :D

  • Unknown's avatar
    mariannabebu1 · Member ·

    That’s so great – thank you ever so much, it’s worked perfectly! One quick question, do you know how I can centre the icons? It’s no biggie if there’s no way. It’s amazing the possibilities of HTML – something I really need to get my head around!!!

    Thank you for helping and your time solving the problem – I really appreciate it! It’s something I’ve seen around other pages and always wanted but thought I couldn’t do so… until now! :) Thanks again and have an awesome weekend!!

  • kokkieh · Staff ·

    To center the icons, look for the very first div-tag in the code in your text widget. It currently looks like this:

    <div class="social-links">

    Edit it to look like this:

    <div class="social-links" style="text-align:center;">

    Then save the widget and view your blog. The icons should now be centered in your sidebar.

    If you’re interested in learning more about html (and the centering is actually done with CSS), I can recommend Lorelle’s WordPress School. Lorelle teaches college level courses on WordPress, but has been running a free course on her blog this year. The posts dealing with HTML and CSS start with this one: https://lorelle.wordpress.com/2015/04/10/wordpress-school-html-and-css-tutorial/ What’s nice about this series is that Lorelle includes practical exercises you can do to practise the code discussed in the tutorials.

    WordPress Tips is now an inactive blog but also has some good tutorials on using html in WordPress.com. Start here: https://wpbtips.wordpress.com/2012/02/05/introduction-to-html-for-wordpress-com-users/

    I’m deactivating that link now, but if you need any more help be sure to ask :)

  • The topic ‘Social media icons for Sela theme’ is closed to new replies.