Adding a Hyperlink to Wordpress' Simplicity-Li

Question

I'm building a site for one of my very first clients using Wordpress' Simplicity-Lite Theme. I'd like to alter the theme somehow so as to hyperlink my images in the featured-boxes position (Right below the slideshowshow) to open up a page in the same window. The problem is that the images are automatically generated/fetched by a PHP script that picks them up from the media gallery and so one script does it all for all the eight images. I want to make each of these images as fetched by PHP link to its own page to add interactivity to my site but I've tried several things but all in vain both in the style.css and the featured-box.php files. I think it's because I can't find element to hyperlink since it's auto-generated. Below is a section of the PHP script in the featured-box.php file that fetches the 8 images and places them in the featured-boxes positions:

<div id="featured-boxs">
<?php foreach (range(1,8) as $fboxn) { ?>
<span class="featured-box"> 
<img class="box-image" src="<?php echo of_get_option('featured-image' . $fboxn,    get_template_directory_uri() . '/images/featured-image' . $fboxn . '.png') ?>"/>
<h3><?php echo of_get_option('featured-title' . $fboxn, 'Simplicity Theme for Small   Business'); ?></h3>
<div class="content-ver-sep"></div><br />
<p><?php echo of_get_option('featured-description' . $fboxn , 'The Color changing   options of Simplicity will give the WordPress Driven Site an attractive look. Simplicity   is super elegant and Professional Responsive Theme which will create the business widely   expressed.'); ?></p>
</span>

Here is the code in the style.css file that renders the images:

#featured-boxs{padding:0 0 10px;display:block; margin: 0 -30px; text-align:center;}
.featured-box{width:210px;margin:0 15px 10px; display:inline-block; text-align:left;   vertical-align:top;}

.featured-box h3{font-family:Verdana, Geneva, sans-serif;font-weight:100;font-   size:15px;color:#555555;}
#featured-boxs h2{font-family:Verdana, Geneva, sans-serif;font-weight:100;font-  size:19px;color:#555555;}
.featured-box-first{padding:20px 0;width:210px;margin:0;}
#featured-boxs img.box-image{border:3px solid #EEEEEE;width:202px;height:100px;}
#featured-boxs img.box-image:hover{box-shadow:0 0 11px 0px #555555;}
#featured-boxs img.box-icon{width:50px;height:50px;}
h3.featured-box2{width:140px;float:right;}

Below is the partial solution I got from the first response to this challenge. It's partially working because it lets me specify a page to or any other resource to hyperlink to in the theme options. However, when I link to a resource, I'm instead taken to that very media element(image itself) and not the hyperlink specified. I've tried some other way of linking a particular image used to a page using the media id that the theme assigns the image used in the permalink but I've failed to pull it off too. The permalink looks like this in the media library: http://www.---.com/?attachment_id=281 . I was thinking of noting down these Ids and use them in the featured-box.php file that fetches the images so that if it fetches the image and its Id is equivalent to the one specified, it automatically hyperlinks it to the page specified. Below is the current solution that I'm at. However, it's not fully working as noted above:

1. Adding a Hyperlink Option for Simplicity Lite Add this hyperlink option into line 89/90 of simplicity-lite/inc/options.php

   $options[] = array( 'name' => 'Hyperlink', 'desc' => 'Input the link for the Featured Areas.', 'id' => 'featured-hyperlink' . $fbsinumber, 'std' => '#', 'type' => 'text', );

   Save the file and you'll see a new option in your theme options. Output the link You can pull the info from your settings using this function which comes with the theme options: of_get_option(). This functions accepts two parameters: name and default value. You can find out more about it in simplicity-lite/inc/options-framework.php, line 383. Lets wrap each of the images with an a tag and href it to the stored string in your settings.

   simplicity-lite/featured-box.php, line 12 "/>

Answer 1

Please try this:

<a href="<?php the_permalink (); ?>"><img class="box-image" src="<?php echo of_get_option('featured-image' . $fboxn,    get_template_directory_uri() . '/images/featured-image' . $fboxn . '.png') ?>"/></a>

Instead of

<img class="box-image" src="<?php echo of_get_option('featured-image' . $fboxn,    get_template_directory_uri() . '/images/featured-image' . $fboxn . '.png') ?>"/>

It should work.