How to Create Social Media Follow Buttons in GeneratePress without Plugin?

What if we can Create Social Media Follow Buttons in GeneratePress without plugin? Indeed yes, we can add social media buttons to WordPress without any external fancy plugin that adds extra requests to our website.

In this tutorial, you will learn to

  • Insert Social Icons on GeneratePress Menu.
  • Create Social Media Follow Buttons on Footer.
  • Display Social Media Icons in GeneratePress Sidebar.
  • What is SVG? & Advantages of Using SVG.
  • SVG & Inline URL.
  • Use of Hooks & Elements.

Why Create Social Media Follow Buttons in GeneratePress without Plugin?

How to Create Social Media Follow Buttons in GeneratePress without Plugin

The main reason to create social media follow buttons without a plugin is to totally avoid the uses of social media plugin in WordPress.

Though with the help of plugin you can achieve your goal faster. But this manual method helps you to get your goal without affecting your site’s performance.

Also Try: Create Social Sharing Buttons in GeneratePress without Plugin

What is SVG?

SVG stands for Scalable Vector Graphics. It is a vector-based graphics written in XML Languages. Unlike PNG, JPEGs, GIF – SVG is an image file format.

Sites like Google, Amazon, Alibaba, Netflix, YouTube are using SVG images in their sites. According to w3techs, SVG Images Technology is used by 23% of all the sites.

Benefits of using SVG

So, what are the benefits of using SVG over JPEG, PNG, GIF, etc.?

  • SVG images are smaller as compared to JPEGs, PNG, GIF.
  • SVG is a vector file so it is easily scalable.
  • Google Index SVG files.
  • SVG images use vector so it can be upscale without losing any quality.
  • CSS can be used with SVGs.

Adding SVG Icons to WordPress

SVG is an Extensible Markup Language (XML)-based vector format and XML is vulnerable compared to other images format. By default, WordPress doesn’t permit SVG files for security reasons. so, if you are going to upload SVG Icons to WordPress sites then it is not possible without an external plugin.

SVG Support and Safe SVG are two plugins that help us to safely upload SVG images in WordPress sites.

In this tutorial, we are going to use SVG Inline code rather than uploading SVG images in WordPress. Also, we are going to use social media inline code from iconmonstr.com.

You can find different icon styles in iconmonstr and use the code accordingly.

List of Social Media SVG inline code

Facebook

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z"/></svg>

Twitter

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z"/></svg>

Instagram

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M14.829 6.302c-.738-.034-.96-.04-2.829-.04s-2.09.007-2.828.04c-1.899.087-2.783.986-2.87 2.87-.033.738-.041.959-.041 2.828s.008 2.09.041 2.829c.087 1.879.967 2.783 2.87 2.87.737.033.959.041 2.828.041 1.87 0 2.091-.007 2.829-.041 1.899-.086 2.782-.988 2.87-2.87.033-.738.04-.96.04-2.829s-.007-2.09-.04-2.828c-.088-1.883-.973-2.783-2.87-2.87zm-2.829 9.293c-1.985 0-3.595-1.609-3.595-3.595 0-1.985 1.61-3.594 3.595-3.594s3.595 1.609 3.595 3.594c0 1.985-1.61 3.595-3.595 3.595zm3.737-6.491c-.464 0-.84-.376-.84-.84 0-.464.376-.84.84-.84.464 0 .84.376.84.84 0 .463-.376.84-.84.84zm-1.404 2.896c0 1.289-1.045 2.333-2.333 2.333s-2.333-1.044-2.333-2.333c0-1.289 1.045-2.333 2.333-2.333s2.333 1.044 2.333 2.333zm-2.333-12c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.958 14.886c-.115 2.545-1.532 3.955-4.071 4.072-.747.034-.986.042-2.887.042s-2.139-.008-2.886-.042c-2.544-.117-3.955-1.529-4.072-4.072-.034-.746-.042-.985-.042-2.886 0-1.901.008-2.139.042-2.886.117-2.544 1.529-3.955 4.072-4.071.747-.035.985-.043 2.886-.043s2.14.008 2.887.043c2.545.117 3.957 1.532 4.071 4.071.034.747.042.985.042 2.886 0 1.901-.008 2.14-.042 2.886z"/></svg>

Pinterest

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm0 19c-.721 0-1.418-.109-2.073-.312.286-.465.713-1.227.87-1.835l.437-1.664c.229.436.895.804 1.604.804 2.111 0 3.633-1.941 3.633-4.354 0-2.312-1.888-4.042-4.316-4.042-3.021 0-4.625 2.027-4.625 4.235 0 1.027.547 2.305 1.422 2.712.132.062.203.034.234-.094l.193-.793c.017-.071.009-.132-.049-.202-.288-.35-.521-.995-.521-1.597 0-1.544 1.169-3.038 3.161-3.038 1.72 0 2.924 1.172 2.924 2.848 0 1.894-.957 3.205-2.201 3.205-.687 0-1.201-.568-1.036-1.265.197-.833.58-1.73.58-2.331 0-.537-.288-.986-.886-.986-.702 0-1.268.727-1.268 1.7 0 .621.211 1.04.211 1.04s-.694 2.934-.821 3.479c-.142.605-.086 1.454-.025 2.008-2.603-1.02-4.448-3.553-4.448-6.518 0-3.866 3.135-7 7-7s7 3.134 7 7-3.135 7-7 7z"/></svg>

YouTube

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.441 16.892c-2.102.144-6.784.144-8.883 0-2.276-.156-2.541-1.27-2.558-4.892.017-3.629.285-4.736 2.558-4.892 2.099-.144 6.782-.144 8.883 0 2.277.156 2.541 1.27 2.559 4.892-.018 3.629-.285 4.736-2.559 4.892zm-6.441-7.234l4.917 2.338-4.917 2.346v-4.684z"/></svg>

Linkedin

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z"/></svg>

WhatsApp

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.77-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.299.045-.677.063-1.092-.069-.252-.08-.575-.187-.988-.365-1.739-.751-2.874-2.502-2.961-2.617-.087-.116-.708-.94-.708-1.793s.448-1.273.607-1.446c.159-.173.346-.217.462-.217l.332.006c.106.005.249-.04.39.298.144.347.491 1.2.534 1.287.043.087.072.188.014.304-.058.116-.087.188-.173.289l-.26.304c-.087.086-.177.18-.076.354.101.174.449.741.964 1.201.662.591 1.221.774 1.394.86s.274.072.376-.043c.101-.116.433-.506.549-.68.116-.173.231-.145.39-.087s1.011.477 1.184.564.289.13.332.202c.045.072.045.419-.1.824zm-3.423-14.416c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm.029 18.88c-1.161 0-2.305-.292-3.318-.844l-3.677.964.984-3.595c-.607-1.052-.927-2.246-.926-3.468.001-3.825 3.113-6.937 6.937-6.937 1.856.001 3.598.723 4.907 2.034 1.31 1.311 2.031 3.054 2.03 4.908-.001 3.825-3.113 6.938-6.937 6.938z"/></svg>

Facebook Messenger

<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 0c-6.626 0-12 5.372-12 12 0 6.627 5.374 12 12 12 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12zm0 5.5c-3.866 0-7 2.902-7 6.481 0 2.04 1.018 3.86 2.609 5.048v2.471l2.383-1.308c.636.176 1.31.271 2.008.271 3.866 0 7-2.902 7-6.482 0-3.579-3.134-6.481-7-6.481zm.696 8.728l-1.783-1.901-3.478 1.901 3.826-4.061 1.826 1.901 3.435-1.901-3.826 4.061z"/></svg>

Facebook Group

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10.644 17.08c2.866-.662 4.539-1.241 3.246-3.682-3.932-7.427-1.042-11.398 3.111-11.398 4.235 0 7.054 4.124 3.11 11.398-1.332 2.455.437 3.034 3.242 3.682 2.483.574 2.647 1.787 2.647 3.889v1.031h-18c0-2.745-.22-4.258 2.644-4.92zm-12.644 4.92h7.809c-.035-8.177 3.436-5.313 3.436-11.127 0-2.511-1.639-3.873-3.748-3.873-3.115 0-5.282 2.979-2.333 8.549.969 1.83-1.031 2.265-3.181 2.761-1.862.43-1.983 1.34-1.983 2.917v.773z"/></svg>

Email

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 .02c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.99 6.98l-6.99 5.666-6.991-5.666h13.981zm.01 10h-14v-8.505l7 5.673 7-5.672v8.504z"/></svg>

RSS

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3.374 17c-.897 0-1.626-.727-1.626-1.624s.729-1.624 1.626-1.624 1.626.727 1.626 1.624-.729 1.624-1.626 1.624zm3.885 0c-.03-3.022-2.485-5.474-5.511-5.504v-2.406c4.361.03 7.889 3.555 7.92 7.91h-2.409zm4.081 0c-.016-5.297-4.303-9.571-9.592-9.594v-2.406c6.623.023 11.985 5.384 12 12h-2.408z"/></svg>

Add Social Media Icon in GeneratePress Menu

I suppose you already have at least one menu on your WordPress website. So let’s add social icons like Facebook, Twitter on the primary menu in GeneratePress Theme.

1. First, Go to Appearance > Menu > Your Primary Menu

2. Go to Screen Options and Enable Link Target, Title Attribute, CSS Classes, Link Relationship (XFN).

Screen Options in WordPress Menu

3. Again Go to Custom Links in WordPress Menu and Add your Social link in URL field and SVG Image with Anchor Tag in Link Text Field and Click to Add to Menu.

Custom Links in WordPress Menu

My Facebook Page link in URL Field: Replace it with yours

https://www.facebook.com/LogoutWP/

SVG Icon (Facebook) with Anchor Tag and CSS Class.

<a href="https://www.facebook.com/LogoutWP/" class="wplogout-social-fb-header"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z"/></svg></a>

4. Advance Menu Settings

Click on the social menu link you have added and make additional changes.

Link Target: Open Link in a new tab. Check it.

CSS Classes: Use menu-item-float-right if you want to make social icons to appear on the right side of the menu.

Link Relationship: Use nofollow if you don’t want to pass link juice. (SEO)

Advance Menu Settings in WordPress Menu

5. Style Social Menu Item.

The social icon in the menu isn’t align properly at my end. so, let’s style social menu item using the class used in above link.

Go to Appearance > Customize > Additional CSS

.wplogout-social-fb-header svg {
	position: relative;
	top: 5px;
	fill: #3b5999;
}
.wplogout-social-fb-header svg:hover {
        fill: rgba(59,89,152,.8);
}

6. Result

You will see social icons like this in primary menu. In a same way I have used Twitter icon

Social Media Follow Buttons in GeneratePress Primary

In a similar way, you add social buttons like Twitter, Instagram, Pinterest, YouTube, etc. in the primary or secondary menu of GeneratePress Theme.

Create Social Media Follow Buttons in GeneratePress Footer

Footer is a great part of the theme to show social media follow buttons. Generally, people use footer section to display copyright, to place secondary menu, etc.

Here, we are going to add social icons like Facebook, Twitter, Pinterest, Instagram, YouTube, Linkedin, WhatsApp, Email, RSS Feed, etc. with links to the respective pages.

To add social icons with links, we are going to use GeneratePress Hooks. It is only available in GeneratePress Premium Theme.

so, Activate the Elements Module first.

1. Go to Appearance > GeneratePress > Elements > Activate

2. Go to Appearance > Elements > Add New > Choose Element Type as Hook

Adding a New Hook in GeneratePress

3. Add a Hook Title

Social Media Follow Buttons Footer Hook Title

4. Copy and Paste the following code

Here is the code for some of the social icons, you can add or remove icons as necessary.

Don’t forget to change the link to your page/website in the code below

<div class="before-footer-social">
    <b>Connect with Us</b><br>
    <a href="https://www.facebook.com/logoutwp" class="wplogout-social-footer-fb" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z" /></svg></a>
    <a href="https://www.twitter.com/wplogout" class="wplogout-social-footer-tw" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z" /></svg></a>
    <a href="https://www.pinterest.com/wplogout" class="wplogout-social-footer-pin" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm0 19c-.721 0-1.418-.109-2.073-.312.286-.465.713-1.227.87-1.835l.437-1.664c.229.436.895.804 1.604.804 2.111 0 3.633-1.941 3.633-4.354 0-2.312-1.888-4.042-4.316-4.042-3.021 0-4.625 2.027-4.625 4.235 0 1.027.547 2.305 1.422 2.712.132.062.203.034.234-.094l.193-.793c.017-.071.009-.132-.049-.202-.288-.35-.521-.995-.521-1.597 0-1.544 1.169-3.038 3.161-3.038 1.72 0 2.924 1.172 2.924 2.848 0 1.894-.957 3.205-2.201 3.205-.687 0-1.201-.568-1.036-1.265.197-.833.58-1.73.58-2.331 0-.537-.288-.986-.886-.986-.702 0-1.268.727-1.268 1.7 0 .621.211 1.04.211 1.04s-.694 2.934-.821 3.479c-.142.605-.086 1.454-.025 2.008-2.603-1.02-4.448-3.553-4.448-6.518 0-3.866 3.135-7 7-7s7 3.134 7 7-3.135 7-7 7z" /></svg></a>
    <a href="https://www.instagram.com/wplogout" class="wplogout-social-footer-ig" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path d="M14.829 6.302c-.738-.034-.96-.04-2.829-.04s-2.09.007-2.828.04c-1.899.087-2.783.986-2.87 2.87-.033.738-.041.959-.041 2.828s.008 2.09.041 2.829c.087 1.879.967 2.783 2.87 2.87.737.033.959.041 2.828.041 1.87 0 2.091-.007 2.829-.041 1.899-.086 2.782-.988 2.87-2.87.033-.738.04-.96.04-2.829s-.007-2.09-.04-2.828c-.088-1.883-.973-2.783-2.87-2.87zm-2.829 9.293c-1.985 0-3.595-1.609-3.595-3.595 0-1.985 1.61-3.594 3.595-3.594s3.595 1.609 3.595 3.594c0 1.985-1.61 3.595-3.595 3.595zm3.737-6.491c-.464 0-.84-.376-.84-.84 0-.464.376-.84.84-.84.464 0 .84.376.84.84 0 .463-.376.84-.84.84zm-1.404 2.896c0 1.289-1.045 2.333-2.333 2.333s-2.333-1.044-2.333-2.333c0-1.289 1.045-2.333 2.333-2.333s2.333 1.044 2.333 2.333zm-2.333-12c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.958 14.886c-.115 2.545-1.532 3.955-4.071 4.072-.747.034-.986.042-2.887.042s-2.139-.008-2.886-.042c-2.544-.117-3.955-1.529-4.072-4.072-.034-.746-.042-.985-.042-2.886 0-1.901.008-2.139.042-2.886.117-2.544 1.529-3.955 4.072-4.071.747-.035.985-.043 2.886-.043s2.14.008 2.887.043c2.545.117 3.957 1.532 4.071 4.071.034.747.042.985.042 2.886 0 1.901-.008 2.14-.042 2.886z" /></svg></a>
    <a href="https://www.youtube.com/geekytuber" class="wplogout-social-footer-yt" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.441 16.892c-2.102.144-6.784.144-8.883 0-2.276-.156-2.541-1.27-2.558-4.892.017-3.629.285-4.736 2.558-4.892 2.099-.144 6.782-.144 8.883 0 2.277.156 2.541 1.27 2.559 4.892-.018 3.629-.285 4.736-2.559 4.892zm-6.441-7.234l4.917 2.338-4.917 2.346v-4.684z" /></svg></a>
    <a href="https://www.linkedin.com/company/wplogout" class="wplogout-social-footer-ld" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z" /></svg></a>
    <a href="https://wa.me/" class="wplogout-social-footer-wa" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.77-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.299.045-.677.063-1.092-.069-.252-.08-.575-.187-.988-.365-1.739-.751-2.874-2.502-2.961-2.617-.087-.116-.708-.94-.708-1.793s.448-1.273.607-1.446c.159-.173.346-.217.462-.217l.332.006c.106.005.249-.04.39.298.144.347.491 1.2.534 1.287.043.087.072.188.014.304-.058.116-.087.188-.173.289l-.26.304c-.087.086-.177.18-.076.354.101.174.449.741.964 1.201.662.591 1.221.774 1.394.86s.274.072.376-.043c.101-.116.433-.506.549-.68.116-.173.231-.145.39-.087s1.011.477 1.184.564.289.13.332.202c.045.072.045.419-.1.824zm-3.423-14.416c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm.029 18.88c-1.161 0-2.305-.292-3.318-.844l-3.677.964.984-3.595c-.607-1.052-.927-2.246-.926-3.468.001-3.825 3.113-6.937 6.937-6.937 1.856.001 3.598.723 4.907 2.034 1.31 1.311 2.031 3.054 2.03 4.908-.001 3.825-3.113 6.938-6.937 6.938z" /></svg></a>
    <a href="mailto:email@yourdomain.com" class="wplogout-social-footer-em" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path d="M12 .02c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.99 6.98l-6.99 5.666-6.991-5.666h13.981zm.01 10h-14v-8.505l7 5.673 7-5.672v8.504z" /></svg></a>
    <a href="https://www.yoursitename.com/feed/" class="wplogout-social-footer-rss" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3.374 17c-.897 0-1.626-.727-1.626-1.624s.729-1.624 1.626-1.624 1.626.727 1.626 1.624-.729 1.624-1.626 1.624zm3.885 0c-.03-3.022-2.485-5.474-5.511-5.504v-2.406c4.361.03 7.889 3.555 7.92 7.91h-2.409zm4.081 0c-.016-5.297-4.303-9.571-9.592-9.594v-2.406c6.623.023 11.985 5.384 12 12h-2.408z" /></svg></a>
</div>

5. Now go to the Hook Settings and choose hook to display before_footer. If you want social icons to display after the footer widgets then choose after_footer_widgets.

Before Footer Hook in GeneratePress Theme

6. Go to Display Rules and Choose Location to Entire Site.

Display Rules in Entire Site in GeneratePress Theme

7. Hit Publish Button

8. Copy Paste the following CSS Code to style the icons.

Go to Appearance > Customize > Additional CSS

.before-footer-social {
    text-align: center;
    background: #fff;
    padding: 8px 0;
}

.before-footer-social svg {
    position: relative;
    top: 3px;
    padding: 5px;
}

.wplogout-social-footer-fb {
    fill: rgba(59, 89, 152, .8);
}

.wplogout-social-footer-fb:hover {
    fill: rgba(59, 89, 152, 1);
}

.wplogout-social-footer-tw {
    fill: rgba(29, 161, 242, .8);
}

.wplogout-social-footer-tw:hover {
    fill: rgba(29, 161, 242, 1);
}

.wplogout-social-footer-pin {
    fill: rgba(189, 8, 28, .8);
}

.wplogout-social-footer-pin svg:hover {
    fill: rgba(189, 8, 28, 1);
}

.wplogout-social-footer-ig {
    fill: rgba(228, 64, 95, .8);
}

.wplogout-social-footer-ig svg:hover {
    fill: rgba(228, 64, 95, 1);
}

.wplogout-social-footer-yt {
    fill: rgba(205, 32, 31, .8);
}

.wplogout-social-footer-yt svg:hover {
    fill: rgba(205, 32, 31, 1);
}

.wplogout-social-footer-ld {
    fill: rgba(0, 119, 181, .8);
}

.wplogout-social-footer-ld svg:hover {
    fill: rgba(0, 119, 181, 1);
}

.wplogout-social-footer-wa {
    fill: rgba(37, 211, 102, .8);
}

.wplogout-social-footer-wa svg:hover {
    fill: rgba(37, 211, 102, 1);
}

.wplogout-social-footer-em {
    fill: rgba(51, 51, 51, .8);
}

.wplogout-social-footer-em svg:hover {
    fill: rgba(51, 51, 51, 1);
}

.wplogout-social-footer-rss {
    fill: rgba(238, 128, 47, .8);
}

.wplogout-social-footer-rss svg:hover {
    fill: rgba(238, 128, 47, 1);
}

9. Results

Here is the results of social icons on GeneratePress footer.

Social Media Follow Buttons in GeneratePress Footer Section

Add Social Icons in GeneratePress Sidebar

Sidebar is another great place to show your social profiles and if you are a blogger, then you know the value of sidebar.

Here, we are going to use widgets to add social icons in the sidebar of our WordPress Theme.

1. Go to Appearance > Widgets

2. Choose Text Widget, Drag and drop to your sidebar.

Text Widget in WordPress

3. Go to your Text Widget and Click on Text View

Text Widget in Sidebar

4. Copy and Paste the following code.

Replace the link with your link.

<div class="wplogout-sidebar-heading">Connect with Us</div>
<div class="wplogout-sidebar-social">
<a href="https://www.facebook.com/logoutwp" class="wplogout-social-footer-fb" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z" /></svg></a><a href="https://www.twitter.com/wplogout" class="wplogout-social-footer-tw" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z" /></svg></a><a href="https://www.pinterest.com/wplogout" class="wplogout-social-footer-pin" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm0 19c-.721 0-1.418-.109-2.073-.312.286-.465.713-1.227.87-1.835l.437-1.664c.229.436.895.804 1.604.804 2.111 0 3.633-1.941 3.633-4.354 0-2.312-1.888-4.042-4.316-4.042-3.021 0-4.625 2.027-4.625 4.235 0 1.027.547 2.305 1.422 2.712.132.062.203.034.234-.094l.193-.793c.017-.071.009-.132-.049-.202-.288-.35-.521-.995-.521-1.597 0-1.544 1.169-3.038 3.161-3.038 1.72 0 2.924 1.172 2.924 2.848 0 1.894-.957 3.205-2.201 3.205-.687 0-1.201-.568-1.036-1.265.197-.833.58-1.73.58-2.331 0-.537-.288-.986-.886-.986-.702 0-1.268.727-1.268 1.7 0 .621.211 1.04.211 1.04s-.694 2.934-.821 3.479c-.142.605-.086 1.454-.025 2.008-2.603-1.02-4.448-3.553-4.448-6.518 0-3.866 3.135-7 7-7s7 3.134 7 7-3.135 7-7 7z" /></svg></a><a href="https://www.youtube.com/geekytuber" class="wplogout-social-footer-yt" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.441 16.892c-2.102.144-6.784.144-8.883 0-2.276-.156-2.541-1.27-2.558-4.892.017-3.629.285-4.736 2.558-4.892 2.099-.144 6.782-.144 8.883 0 2.277.156 2.541 1.27 2.559 4.892-.018 3.629-.285 4.736-2.559 4.892zm-6.441-7.234l4.917 2.338-4.917 2.346v-4.684z" /></svg></a><a href="https://www.yoursitename.com/feed/" class="wplogout-social-footer-rss" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3.374 17c-.897 0-1.626-.727-1.626-1.624s.729-1.624 1.626-1.624 1.626.727 1.626 1.624-.729 1.624-1.626 1.624zm3.885 0c-.03-3.022-2.485-5.474-5.511-5.504v-2.406c4.361.03 7.889 3.555 7.92 7.91h-2.409zm4.081 0c-.016-5.297-4.303-9.571-9.592-9.594v-2.406c6.623.023 11.985 5.384 12 12h-2.408z" /></svg></a>
</div>

5. Style the Sidebar Social icons using CSS.

Go to Appearance > Customize > Additional CSS

.wplogout-sidebar-heading{
    margin: 5px;
    padding: 5px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
}

.wplogout-sidebar-social {
    text-align: center;
}

.wplogout-sidebar-social svg {
    position: relative;
    top: 5px;
    padding: 5px;
    height: 28px;
    width: 28px;
}

.wplogout-social-footer-fb {
    fill: rgba(59, 89, 152, .8);
}

.wplogout-social-footer-fb:hover {
    fill: rgba(59, 89, 152, 1);
}

.wplogout-social-footer-tw {
    fill: rgba(29, 161, 242, .8);
}

.wplogout-social-footer-tw:hover {
    fill: rgba(29, 161, 242, 1);
}

.wplogout-social-footer-pin {
    fill: rgba(189, 8, 28, .8);
}

.wplogout-social-footer-pin svg:hover {
    fill: rgba(189, 8, 28, 1);
}

.wplogout-social-footer-yt {
    fill: rgba(205, 32, 31, .8);
}

.wplogout-social-footer-yt svg:hover {
    fill: rgba(205, 32, 31, 1);
}

.wplogout-social-footer-rss {
    fill: rgba(238, 128, 47, .8);
}

.wplogout-social-footer-rss svg:hover {
    fill: rgba(238, 128, 47, 1);
}

6. Results

Check the results

Social Icons in GeneratePress Sidebar

At the End

Using the SVG method, you can Create Social Media Follow Buttons in GeneratePress without Plugin. Apply this manual method in any WordPress Theme, the coding placement may be different but the process is similar. Ignore the uses of the plugin if possible, use this method that doesn’t comprise your site performance.

Moreover, where are you going to display social icons in your site?

Are you try in header or footer?

Sidebar is also a great to display social icons with your custom links.

Also, change CSS, Social icons according to your need.

Finally, if you need help, Please feel free to comment below.

Share:

GET 100+ FREE SEO TOOLS

Quickly access over 100+ popular SEO/Marketing tools to Boost your website traffic.

Thank you for subscribing. Check your Email(Didn't receive? check Spam Folder)

Something went wrong.

I love things to do with WordPress, Digital Marketing. Blogging has been my Passion. In my free time, I enjoy watching Series and Movies.

4 thoughts on “How to Create Social Media Follow Buttons in GeneratePress without Plugin?”

  1. A great tutorial by Suraj. He is really very informative guy and helps with so many efforts. He came online to support me throughout and guided the way to implement these icons.
    Thanks man!

    Reply

Leave a Comment