Applying CSS to links on current page

  • Resolved N4Nathan

    (@n4nathan)


    11 years, 5 months ago

    I’ve recently started working with wordpress and with the site up and running I want to add a few cosmetic changes. I’m using genesis with a fairly modified executive pro child theme. The issue I’m having is getting my side bar links to change background color when the page is current (visual feedback, so the user knows what page they’re on). I’ve tried multiple solutions posted by others on the forums but unfortunately none are working for me. Locally I write a very simple page to see if I could get it to work with the JQuery method.

    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function(){
  $('a').each(function() {
    if ($(this).prop('href') == window.location.href) {
      $(this).addClass('currentPage');
    }
  });
});
</script>

    And it works perfectly. So I decided to try it on my development wordpress site and unfortunately it’s not working. I added the scripts into the header box in the genesis tab, I’ve put all my sidebar links in a div tag with custom css class (sidebars are via genesis simple sidebars). And added the appropriate css classes/code into my theme.css file.

    .test a{
	padding: 10px 10px 2px 2px;
	color:#64C9EA;
	text-decoration:none;
}

.test a.currentPage {
	background:black;
}

    Any ideas?

    Thanks,
    Nathan

Viewing 7 replies - 1 through 7 (of 7 total)
  • lisa

    (@contentiskey)

    11 years, 5 months ago

    I’m using genesis with a fairly modified executive pro child theme.

    for Genesis framework I would suggest asking in the support forum for Genesis themes and/or the executive pro theme.

    Ghanshyam Khanal

    (@gskhanal)

    11 years, 5 months ago

    Don’t include jquery in this manner

    <script src=”http://code.jquery.com/jquery-1.8.3.min.js”></script&gt;

    It may not have worked due to 2 jquery embedded.
    Instead use wp_enqueue_script(‘jquery’) in header, which may already be there.

    I hope it helps.

    Cheers 🙂

    Thread Starter N4Nathan

    (@n4nathan)

    11 years, 5 months ago

    Hmm, still nothing. Maybe I implemented it wrong, how would you implement “wp_enqueue_script(‘jquery’) in header”? Here’s the page link in-case anyone’s curious..

    Thanks for the help 🙂

    Nathan

    Ghanshyam Khanal

    (@gskhanal)

    11 years, 5 months ago

    <?php wp_enqueue_script('jquery'); ?>

    put this code before <?php wp_head(); ?> and before closing head tag.

    Ghanshyam Khanal

    (@gskhanal)

    11 years, 5 months ago

    I think the problem is somewhere else. Also, try modifying your code to this.

    <script>
jQuery(document).ready(function($){
  $('a').each(function() {
    if ($(this).prop('href') == window.location.href) {
      $(this).addClass('currentPage');
    }
  });
});
</script>

    Thread Starter N4Nathan

    (@n4nathan)

    11 years, 5 months ago

    It works!
    Thank you so much, what exactly was different between the 2?

    Ghanshyam Khanal

    (@gskhanal)

    11 years, 5 months ago

    by default the dollar($) sign does not work so we passed from the function.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Applying CSS to links on current page’ is closed to new replies.