0

I want the background-color of the selected box on this page to display gray color once the user lands on the corresponding page. My link is currently setup inside of the page template itself as a traditional link, and is not being displayed under the default Wordpress menu setup.

Do I need to add a CSS style to the "active" box, or do I need to create a PHP conditional that determines the activated page? I'm just a little confused.

Here's the boxes: http://richmindonline.com/virtual/solutions/

    <div class="product-wrapper">

                        <a class="products-box" href="/virtual/solutions/">
               <div class="product-left">
                  <?php get_sidebar('1-products'); ?>
                           </div>
            </a>


                           <a class="products-box" href="/virtual/solutions/">
                  <div class="product-center">
                 <?php get_sidebar('2-products'); ?>
                              </div>
               </a>

                              <a class="products-box" href="/virtual/solutions/">
                 <div class="product-center">
                     <?php get_sidebar('3-products'); ?>
                                 </div>
                  </a>

                                 <a class="products-box" href="/virtual/solutions/">
                    <div class="product-right"> 
                   <?php get_sidebar('4-products'); ?>
                                    </div> 
                     </a>

            <div class="clear"></div>

                        </div>
Improve this question
2
  • Do those boxes link to pages? Could you post how the links appear in your template? – Stephen Harris Jun 20 '12 at 18:34
  • Thanks for looking, Stephen. I just posted the page template code. The pages will actually link to different pages for each box, even though the links appear to be the same page here. – Rob Myrick Jun 20 '12 at 18:36
0

Each link would need a unique class. Then you can work from one of the body classes, eg page-id-7 to do this. Your CSS would look like:

.page-id-7 .1-products a {color: #333;}
Improve this answer
1
  • user1337, thanks that worked, although I would really like it for each page to be called dynamically, even if the user would delete the page and create a new one later. Any guidance on how to go about that? – Rob Myrick Jun 20 '12 at 20:25
1

Ok, so first set up array containing the page IDs corresponding to boxes 1,2,3,4 ( in that order). I've used the boxes position as the keys, and these double as a class to be added to the <div> elements.

The ID of the current page is compared with the ID of each of the pages, and conditionally the class 'current' is appended.

//The pages as $location => $page_id
$pages = array(
 'product-left' => 22, 
 'product-center-left' => 25, 
 'product-center-right' => 17, 
 'product-right' => 42);

//Current page ID
$current_id = (is_page() ? get_queried_object_id() : 0);
?>

<div class="product-wrapper">
  <?php $count=0; ?>
  <?php foreach ($pages as $position => $page): ?>
     <?php $class = ( $page == $current_id ? $position.' current' : $location); ?>

     <a class="products-box" href="<?php echo get_page_link($page);?>">
        <div class="<?php echo esc_attr($class);?>">
          <?php get_sidebar($count.'-products'); ?>
        </div>
     </a>

    <?php count++; ?>

  <?php endforeach; ?>
  <div class="clear"></div>
</div>
Improve this answer
5
  • Stephen, what you are saying makes sense, but I'm just a little confused as to transferring the sidebar divs in my original code to your example. How do I show that content in your example? – Rob Myrick Jun 20 '12 at 19:23
  • updated answer. I probably wouldn't use widgetised areas though. Or if you were - give them more descriptive names, i.e. like $position. – Stephen Harris Jun 20 '12 at 19:27
  • My page just went blank.....is there a syntax error somewhere? Is this formatted correctly based on my original code? `<?php get_sidebar($count.'-products'); ?> ' – Rob Myrick Jun 20 '12 at 19:37
  • Yes - a syntax error, but I can't see it at the moment. get_queried_object_id should be get_queried_object_id() though - that could be it. – Stephen Harris Jun 20 '12 at 19:45
  • Sorry, Stephen....it's not working for some reason. I'm not experienced enough yet to figure out the problem on my own, so I'm back to my old code and working from there. Let me know if you end up finding it out. I do appreciate your help. – Rob Myrick Jun 20 '12 at 20:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.