The Problem

The Contact Header of our Dynapack framework of business/ecommerce themes comes with a limited set of social link options. When originally designing that feature in late 2012, our designer chose to limit the options to the kind of social networks business sites used most based on published statistics and our own experience. We simply cannot add all of the networks in existence or predict which networks all of our customers want, so this option may not include the networks important to you, or newer networks that have gained popularity since, such as Instagram. This article provides options for adding networks other than those available in the Theme Options to the header of the site.

 

The Solution

The November 214 update of Retail Therapy/Loft/Store/Dynamo/Flatpack/Capital/Department and Stylist contain a change to the Social Icons, replacing them with iconfonts for easier customization via the WordPress customizer. The below can still work to replace them with images, but you may need to adjust padding or widths depending on the size of your icon relative to the default font size for the icon.

Option 1: Use a Plugin Instead

We provide the Social Links widget for use in the footer or other widget areas as an alternative, however if you want your links to be at the top of the site, a Social Links plugin is the best option and easiest to manage.  Review the available options in the free plugin repository and look for a plugin that is recently updated, highly rated, and provides functionality to allow you to choose where the plugin is positioned. The following article contains plugins we have tested or that our customers have used with success which may provide some recommendation:

What plugins are compatible with Obox Themes?

Option 2: Use Custom CSS to replace the icon of an existing option

If you prefer to customize the theme’s options to maintain the position and styling, you would need to upload your own 16×16  icon to the media library, then replace one of the existing options’ icon using CSS.

For example, if you are not using the Google+ field and want an Instagram icon instead:

  1. Go to flaticon.com and search for the icon you want and download a 16×16 size version (or download the high-res version to color and resize yourself)
  2. Upload the icon to WordPress using the Media Library. When complete, click Edit and copy the File URL.
  3. Go to Theme Options and add the following code to the Custom CSS box:
.header-social .header-gplus a {
   background: url(file-url);
}
You would then simply add your Instagram profile URL to the Google+ URL field.
The method above is the same for whichever field you wish to replace, you would just replace the “gplus” part of the CSS class name with the other field name, such as .header-pinterest or .header-twitter and so on.
You cannot use this method to replace the phone or email fields! These are specially coded to work specifically with telephone numbers or email addresses and will not properly link to another webpage.

Do you have plans to add  other networks?

Our Dynapack framework reached the end of its development cycle in early 2013. This means we cannot add or change any further functionality, only update the code for compatibility or bug fixes.  Our next framework promises to have far more options for personalization.


WooCommerce