Highlighting in WordPress Menus, current pages and parent pages

This is another post written because I was struggling for a while with an issue, so I thought I would post my solution here.

Often on a WordPress site you want to have a menu that highlights the current page. Assuming you are using the WordPress custom menus, then WordPress is smart enough to add classes to the menu items that represent where they fit in the scheme of things.

For instance:

  • li.current_page_item = The page that you are currently on (Obviously)
  • li.current-post-ancestor = Any page above in the hierarchy of the current page

What threw me for a few hours was the use of underscore _ and dash – at differing times.

If you are having trouble I would suggest going back and checking these linking symbols.

For the record, I usually set the basic color for an unselected menu item: #nav li a{ color:#fff} and then I use the following with a feature color to cover the current page, the hover state and any pages that may fall into this like parents and ancestors:


#nav li a:hover,
#nav li.current_page_item a,
#nav li.current-menu-item a,
#nav li.current-menu-parent a,
#nav li.current-post-ancestor a  {
color: featurecolor;
}

Using less.js with WordPress

Over the last few weeks I have been reading more and more about speeding up your workflow by using augmented CSS.

For those of you not familiar with LESS, or {less} as its branding suggests, it is a ‘Dynamic stylesheet language’. Allowing you to use variables, mixins, operations and functions with in your CSS. There are plenty of article preaching the advantages of using less.

There are a couple of different flavours of LESS. Server side, an osx app (LESS.APP) and a client side alternative, using less.js.

Most of my work is with in WordPress on a development server, I decided that the best option for me was to use the client side less.js while developing sites and then compile the css stylesheet before launching a clients site.

The problem I ran into was that WordPress needs a Style.css file for the theme to be accepted. I tried installing the theme with this file and then swapping it out for a style.less file, however I kept running into issues and theme would break.

After googling and trying all sorts of things, @importing and all sorts of work arounds, I finally came up with a solution. I thought I would post it here in case there are others struggling with this.

In order for less.js to work it must be downloaded and installed on your server.

For non WordPress sites you can then in the <head> you reference your less file, followed by calling the less.js:

<link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>

For WordPress all you need to do is have a style.css as normal with all the theme information, and then a separate for for .less. We will call it main_styling.less.

As follows:

Style.css

/*
Theme Name:Your Theme
Theme URI: http://testing.com
Description: A Theme
Verision:1.0
Author:Matt Edwards
Auther URI:http://www.emptyhead.dev
*/

Then in the <head>:


<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css">
<link rel="stylesheet/less" type="text/css" href="<?php bloginfo('template_directory'); ?>/main_styling.less">
<script src="<?php bloginfo('template_directory'); ?>/js/less-1.1.3.min.js" type="text/javascript">

and its all up and running.

Hope this saves you some time if you were stuck where I was.