PHP / Loop Question + HTML

[kellyalan]

Hello - I hope I explain this clearly...

 

I have some php code that presently displays 4 boxes in a row with images. When you click on a box/image, you go to a web post. The code goes to the bottom, sets the link, then loops back for the next image and repeats the process.

 

 

What I'm trying to do is break this code apart so that that I can make each image go to a different link - basically set it up as html - image with link to a page. ( 4 of these)

 

However, I don't want to break the code or the page that it displays ( our home page ) 

 

Here's the code snippet:

 

     <div id="new-classes" class="carousel slide">

<!-- Wrapper for slides ufff-->

                        <div class="carousel-inner">

                        <?php

                            $pieces=array_chunk($gallery,4);

                                  $j=0;

                                foreach ($pieces as $slice)

                                  { echo '<div class="item '; if($j==0){echo 'active';}     echo '">';

                                  foreach ($slice as $i => $conte) {                ?>

            <div class="col-sm-6 col-md-3" >

                   <div class="new-class" >

         <img src="<?php echo $slice[$i]['image']; ?>" alt="//" />

           <div class="class-title" >

                     <div class="occult" >

                                     TEST this is where the specialities boxes link is  <a <?php echo colors('a');?> href="<?php echo $slice[$i]['link']; ?>" class="link" ></a> 

I duplicated the above line and put in a specific link but it makes all the images go to the same page <a <?php echo colors('a');?> href="https://www.absolutept.com/tendinopathy/" class="link" ></a> -->

                                                             </div>

                                        <h3 <?php echo colors('h3');?>><?php echo $slice[$i]['title']; ?></h3>

 <p <?php echo colors('p');?> class="occult" ><?php echo wp_trim_words(insert_br($slice[$i]['desc']),10,'...'); ?></p>

               </div>

                   </div>

            </div>

   <?php  } //end slice

                            echo '</div>';    $j++;

                                 } // end pieces

                           ?>

   </div>

 

 

our homepage is absolutept.com -- these images are the "specialties" section 3/4 of the way down

 

In the theme( wordpress) - there's an option to enter specialties ( custom post type ) which we did but we don't want these links to go to those special posts, we want them to go to the pages that the user can find in the main menu

 

I know this is breaking the set up of the theme but if it's doable, we'd like to try

 

First - any idea if it's doable and if so, thoughts on how? =) 

 

Thanks in advance.

 

 

[hansford]

 

 

When you click on a box/image, you go to a web post. The code goes to the bottom, sets the link, then loops back for the next image and repeats the process.

 

When I click on any of the boxes it takes me to the post. What do you mean the code goes to the bottom, sets the link, then loops back.....?

[cyberRobot]

I duplicated the above line and put in a specific link but it makes all the images go to the same page <a <?php echo colors('a');?> href="https://www.absolutept.com/tendinopathy/" class="link" ></a> -->

 

To get the links to go different website addresses, you'll need to run some sort of if test. Perhaps you could use the $j variable to determine which link to show. For example:

<?php
echo '<a ' . colors('a');
if($j    ==0) { echo ' href="https://www.absolutept.com/tendinopathy/" class="link">Tendinopathy</a>'; }
elseif($j==1) { echo ' href="https://www.absolutept.com/neuropathy/" class="link">Neuropathy</a>'; }
elseif($j==2) { echo ' href="https://www.absolutept.com/personal-training/personal-training-faqs/" class="link">Personal Training FAQ</a>'; }
else          { echo ' href="https://www.absolutept.com/blog/" class="link">Chad\'s Blog</a>'; }
?>

Just keep in mind that if you modify the WordPress theme files directly, you'll need to re-make all the changes every time the theme developer pushes an update. To minimize the effect, you could create a Child Theme:

https://codex.wordpress.org/Child_Themes

[kellyalan]

thanks for the replies

 

cyber - I'll try out your code today - appreciate the guidance 

[kellyalan]

I used the above code but had to change the variable to $i and it seems to work.  Huge thanks! I was worried I'd break the theme and our site would go down if I tried this on my own.

 

Set up in a child theme.

 

<div class="occult" >

                                        <!-- TEST this is where the specialities boxes link is  <a <?php echo colors('a');?> href="<?php echo $slice[$i]['link']; ?>" class="link" ></a> -->

<!-- This is the added in code to link specialities to web pages, NOT to classes - remove to set theme back to original -->

<?php

echo '<a ' . colors('a');

if($i    ==0) { echo ' href="https://www.absolutept.com/tendinopathy/" class="link"></a>'; }

elseif($i==1) { echo ' href="https://www.absolutept.com/back-pain/" class="link"></a>'; }

elseif($i==2) { echo ' href="https://www.absolutept.com/senior-fall-prevention-program/" class="link"></a>'; }

else          { echo ' href="https://www.absolutept.com/post-surgical-rehabilitation/" class="link"></a>'; }

?>

                                                             </div>

[cyberRobot]

No problem; glad to help!