1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

HOWTO highlight current page link when using Flexi Pages Widget plugin in WordPress

Discussion in 'Blogging' started by Junkfood00, Jun 28, 2013.

  1. Junkfood00

    Junkfood00 Elite Member

    Joined:
    Sep 13, 2011
    Messages:
    1,949
    Likes Received:
    1,336
    Another issue that I came across is highlighting only the current page and not the child pages in the sidebar using Flexi Pages plugin widget in WP.

    For example:

    • List1 <- current page
      • sublist1
      • sublist2
    • List2

    or:

    • List1
      • sublist1 <- current page
      • sublist2
    • List2

    and NOT:

    • List1 <-current page
      • sublist1
      • sublist2
    • List2

    Why Flexi Pages plugin?
    - It's a plugin that supplies a much more flexible widget which lists the pages on your site.


    SOLUTION:
    Go the plugin folder and open flexi-pages-widget.php and do the following change:

    FIND:
    Code:
                $pagelist .= str_repeat("\t", $level+1).'<li class="'.$page['class'].'"><a href="'.$page['link'].'" title="'.$page['title'].'">'.$page['title'].'</a>'.$date;
                if($page['children'])
                    $pagelist .= flexipages_list($page['children'], $level+1);
                $pagelist.= "</li>\n";
    REPLACE:
    Code:
                $pagelist .= str_repeat("\t", $level+1).'<li class="'.$page['class'].'"><a href="'.$page['link'].'" title="'.$page['title'].'">'.$page['title'].'</a></li>'.$date;
                if($page['children'])
                    $pagelist .= flexipages_list($page['children'], $level+1);
                $pagelist.= "\n";

    Then you can style the current page link using the following CSS in your stylesheet:
    Code:
    .current_page_item {
      background:green;
    }

    I'm by no means a professional, I'm just on my journey building a website and learning.

    Hope it helped.