Headway Themes — The Drag & Drop WordPress Theme

Layout

How to Put Social Media Icons in the Header for Headway 3.5.11?

Adding social media icons to your header is not difficult in Headway Themes with a little bit of CSS code. Using CSS code, you can position the social media icons anywhere you want to. In this example, we are going to utilize the space on the right side of the header to contain the social media icons.

how-to-add-social-media

  1. Log into your WordPress dashboard.
  2. Move your mouse over to the left panel and hover Headway.
  3. Click on Visual Editor and go to Grid mode.
  4. Draw a Widget Area block on top of the header block to contain the social media icons.
  5. Take note of the ID number of the Widget Area block as you will need to add in some content later.
  6. Once done, save it and move back to your WordPress dashboard.

Using Plugin – Social Media Widget for the Icons

We are not going to hard code and add in the social media icons individually but rather we need a more dynamic social media icon so that we can add in more social media icons easily in the future. Hence, we are going to utilize a WordPress plugin and the best plugin that fits this requirement is Social Media Widget from Blink Web Effects.

  1. At your WordPress dashboard, go to plugins and click Add New to install the Social Media Widget plugin.
  2. Once the plugin is installed and activated, move your mouse to Appearance at the left hand panel and click on Widgets.
  3. In the Widgets, look at the right hand side and look for the Widget Area that you have created in the Visual Editor previously.
  4. The Widget Area will show you the ID number so once you found it, drag the Social Media Widget from the Available Widget box into it.
  5. Click on the Social Media Widget, you can start entering the URL of your Twitter, RSS and YouTube. There are many options available so pick the social media you want and enter the correct URL.
  6. When you have finished, click save.
  7. Now, you can preview your blog/website in the browser, you will see the three icons appear.

Position the Social Media Icons

The next step is to position the three icons precisely as you wanted. In this example, we want to align them at the right hand side of the header and above the navigation bar.

  1. In your WordPress dashboard, click on Headway > Visual Editor > Design.
  2. When you are in the design mode, go to the top, click on Tools > Live CSS.
  3. Once the Live CSS box pops up, enter the following code:
    /*POSITION SOCIAL MEDIA ICON ON TOP OF THE HEADER*/
    #block-16 { position:absolute; top:25px;  }
    
    /*ALIGN SOCIAL MEDIA BUTTONS TO THE RIGHT*/
    #block-16 .socialmedia-buttons { margin-left:790px; margin-top:-10px!important;}
  4. Make sure you change the block ID number in the above code to your own block ID number.
  5. Click on the SAVE button at the top panel to save.
  6. You can now preview the result in your browser, the social media icons are aligned to the right hand side of the header.

If you want to change the setting of the social media icons for example its size, you can do it by going back to the Appearance > Widgets and click on the Social Media Widget. You can change the setting in the Icon Size under the General Setting. You can tweak the setting until you are happy with it.

How to Link Pinboard Pins to External URL?

One of my clients is interested to add a “Shop” section to her blog (made by Headway Themes builder) to sell affiliate products. She likes the Pinboard-style layout and fortunately Headway Themes has a Pinboard block which can turn her blog layout easily into a Pinboard-style layout. The only problem is that the client doesRead More




Why My Body Hyperlink Colors Are Not Changing?

One of the most frustrating problems for new Headway Themes users is after you have made all the changes and set the desired hyperlink colors but nothing happened; it still remained the same! You might think that changing the hyperlinks colors should be trivial but ended up hours of doing it. How agonizing! The mostRead More




How to add Different Box Shadows to Individual Content Block?

A user at Headway Themes was trying to achieve the above but was not successful. As per request, here are the steps on how to achieve it. Basically, we just need to declare the different type of shadow effects in Live CSS and then apply these shadows to the content. See the below picture forRead More




How to Display a Page in a Small Section in Home Page?

When you are building a web site on a wordpress platform, there might be a time where you need to display a page at your home page, for example, to display a promotion page. The promotion page can contain in a little box and has limited height, if you think it is difficult to achieveRead More




Alternate Way to Remove Category Archives Title in Headway 3

If you are looking for an alternate way to hide or remove the category archive title as shown as “Category Archives:Titles” in your archive pages, you got it here! This method is easier without the need to create a child theme and a functions.phpfile as suggested by the Headway support team. Hide the Category ArchiveRead More




How To Create 3 Columns Widgetized Footer In Headway 3?

In Headway version 2 and above, you might need to go through a number of steps before you could achieve a 3-column widgetized footer for your website but in Headway version 3.1.2, it is much simpler now. Basically, you just need to add a widgetzed block and set it horizontally and you got it! SeeRead More




How to Make Category Archive Page to Display as Formatted Normal Pages?

The other day, I was helping my client to add a News category to the main navigation bar and realized the archive section for the category is displayed as an excerpt. My client was not happy because he was seeing a lump of text unformatted and looked messy when he clicked on the news section.Read More




How to Create 3 Columns Widgetized Footer for Your Blog?

Thinking of adding a three-column widgetized footer to your blog while using Headway theme, here is a method suggested by Paul Coughlin in his blog. Basically there are few steps involved. In the wordpress dashboard under “Headway 2.0.7”, click on “Easy Hook”. Look for “footer open”, copy the following code and paste the code intoRead More




How to Add a Static Home Page to a Blog?

If you have already have a blog but then decided to add in some static pages to make it look like a normal website. Can you do that? Or, you are thinking to move your blog from root directory to a new directory called “blog” and the default home page is a static page withRead More