WordPress.org

Ready to get started?Download WordPress

Forums

Adding a Hyperlink to each of WordPress' Simplicity-Lite featured-box element (1 post)

  1. semwangajoshua
    Member
    Posted 1 month ago #

    0 down vote favorite

    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 including advice that I've received here before but all in vain both in the style.css and the featured-box.php files.
    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>`
    Below is the css code 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;}`

Reply

You must log in to post.

About this Topic

  • RSS feed for this topic
  • Started 1 month ago by semwangajoshua
  • This topic is not resolved
  • WordPress version: 3.9.1