Adding New Icons for Lensa Theme

Hello there!

This time i want to share something great to modify your Lensa theme. What i want to share is how to add more icons on your Lensa footer section.

Untitled

To do it is very simple, you have to modify only 2 files: theme-functions.php and theme-options.php.

Before we do this modification, you have to know first the lists of icons you can use. You can check it at a file named framework.css (FTP > wp-content > themes > lensa > includes > css) start from line 1556 to line 2569.

Once you decide which icon(s) you want to use, we will proceed to the next step.

Step#1

At this step you have to modify a file named theme-options.php. At this file you have to create a code for you to fill your social URL links. You can find out the file at: FTP > wp-content > themes > lensa > includes. Open it and find out this code:

$options[] = array( "name" => __("Facebook","colabsthemes"),
					"desc" => __("Enter your Facebook profile URL","colabsthemes"),
					"id" => $shortname."_social_facebook",
					"std" => "",
					"type" => "text");

Copy that code, those code is your base code. What you have to do is paste it below that code and change some information such as: ID, name and description. For example, if want to have a Pinterest code, then i will use this code:

$options[] = array( "name" => __("Pinterest","colabsthemes"),
					"desc" => __("Enter your Pinterest URL","colabsthemes"),
					"id" => $shortname."_social_pinterest",
					"std" => "",
					"type" => "text");

And you work is done. You can copy and paste those codes as many as you need.

Step #2

At this step you have to modify a file named theme-functions.php. At this file you have to call out what you have done at step #1. You can find the file at: FTP > wp-content > themes > includes. Open the file and find out this code:

<?php if (get_option("colabs_social_facebook")!='') : ?>
      <a class="facebook" href="<?php echo get_option("colabs_social_facebook"); ?>"><i class="icon-facebook"></i></a>
      <?php endif; ?>

Once again, those codes is your base code. You can copy and paste it as many as you need. What you have to do is paste it under those code.

For example, if i want to have a Pinterest icon then i can use this code:

<?php if (get_option("colabs_social_pinterest")!='') : ?>
      <a class="pinterest" href="<?php echo get_option("colabs_social_pinterest"); ?>"><i class="icon-pinterest"></i></a>
      <?php endif; ?>

And done your work is done. A new icon already created!

Advertisements

8 thoughts on “Adding New Icons for Lensa Theme

  1. Thank you so much for creating your Lensa theme tutorials. They have been a big help in customizing my site. Do you know how to add an icon for a social network that was not included in the frameworks? For example, I want to create an icon for my Etsy shop. Thank you in advance for any help you can give in pointing me in the right direction.

  2. Hi Tandamerah,

    Great site, very helpful. I’m trying to add a “goodreads” icon to my lensa site and was hoping you could give me some insight. For instance, once I have created the icons in photoshop (one for at rest, and one when the curser pans over it-highlighted), what do I do from there? I’m wondering where to upload the icon (what folder?) and how to link the image so that I can continue with process you mentioned above. Thanks for any help you can provide.

    • Hi,

      Yes you can do it, simply by copying the code that available on header.php that used to displaying the logo and put it on footer.php. The height of the footer image logo is up to you since the footer is fluid, it will follow the height from any item available on footer.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s