Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

MDW WordPress Tutorial Footer

Chapter III – Footer


Written by Michał Krawczyk ,


  1. If you have set the Footer already, go directly to the 7th step. If not, start from the beginning.
  2. Click Appearance, then Customize.
  3. In the Customizer click on the Footer settings.
  4. Select the Basic in the Footer Type.
  5. ClickSave & Publish. Go back to the Widgets.
  6. Your Footer is ready, but if you want to add there some additional text and/or social buttons, here what you have to do.
  7. Go to the Appearance and Widgets.
  8. Find Text widget and drag and drop it into Footer widget area. Edit the Title.
  9. Now you can add extra content below the title and/or the social buttons. I will show you how to add both so that you can choose yourself.
  10. If you want to add only text - just add it. But you may also separate the title and the content with a horizontal line. To accomplish that add in the first line the following tag: <hr>. Look at the example below:

  11. Preview:
    Edit:
  12. If you want to add and social icons, it is a bit more complicated, but not much. You also have to add and modyfi the a code. Firstly, open a Notepad or any other text editor and copy the following code:
  13. <hr>
    	<div class="social-section wow fadeIn" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeIn;">
        	    <ul>
            	    <li><a href="YOUR_FACEBOOK_LINK" class="btn-floating btn-large btn-fb waves-effect waves-light"><i class="fa fa-facebook left"></i> Facebook</a></li>
                	<li><a href="YOUR_TWITTER_LINK" class="btn-floating btn-large btn-tw waves-effect waves-light"><i class="fa fa-twitter left"></i> Twitter</a></li>
                	<li><a href="YOUR_GOOGLE_PLUS_LINK" class="btn-floating btn-large btn-gplus waves-effect waves-light"><i class="fa fa-google-plus left"></i> Google +</a></li>
          		</ul>
    	</div>
  14. Replace the YOUR_FACEBOOK_LINK with your Facebook link, and repeat those steps for the Twitter and Google Plus. You may also get rid of one of them, by deleting the whole row. To do that, find the line with a social media you want to delete. Then select the whole line between <li> and </li> tags.
  15. If you've done that, copy the edited code and paste it into the Content area in the Text widget. Save the changes. You should receive following message:
  16. You may also add a content between the title and the social buttons.
  17. Copy the following code, and replace the Insert your content here line with your content:
  18. <hr>
    Insert your content here
    <hr>
    	<div class="social-section wow fadeIn" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeIn;">
        	    <ul>
            	    <li><a href="YOUR_FACEBOOK_LINK" class="btn-floating btn-large btn-fb waves-effect waves-light"><i class="fa fa-facebook left"></i> Facebook</a></li>
                	<li><a href="YOUR_TWITTER_LINK" class="btn-floating btn-large btn-tw waves-effect waves-light"><i class="fa fa-twitter left"></i> Twitter</a></li>
                	<li><a href="YOUR_GOOGLE_PLUS_LINK" class="btn-floating btn-large btn-gplus waves-effect waves-light"><i class="fa fa-google-plus left"></i> Google +</a></li>
          		</ul>
    	</div>
  19. If you've done that, copy the edited code and paste it into the Content area in the Text widget. Save the changes. You should see something like this:
  20. Don't forget to save the changes.


Do you want to share?


About author


Michał Krawczyk

Digital Marketing Analyst at MDW with a strong Research and Consulting background, former student of Interfaculty Individual Studies in the humanities at the best university in Poland

Comments 3

  • Prakash

    can we also use our own social media icons ??

  • Suraj Shrestha

    Can we use our own social media icons?? Also how is it possible to change the theme color other than your theme colors??

      • Michał Krawczyk

        Yes, you can, however, you need to do it by adding the HTML code inside the content area. Of course, it's possible to change the theme color to one you prefer, but, to accomplish that, you need to change the CSS. If you don't know how to do that, feel free to contact with our support, they will help you.

Leave a reply

Card image cap

Stay up to date


Subscribe to our newsletter

Rapid change in the world of web development is its inseparable quality. New updates and features are being constantly released, almost every week. Don't forget to be up to date.