When using a navigation menu on WordPress, you’ve probably seen the various HTML classes that are added on active elements, such as current-menu-item, current-menu-parent, current-menu-ancestor

While that kind of classes are fine if you must fully reflect the navigation hierarchy on the menu element, there are some times that you just need a more simple approach, such as just knowing when a certain menu element must look like the active item —for instance, when using Bootstrap.

For these kind of situations, you can use a simple filter to add such a class; something like:

<?php

add_filter('nav_menu_css_class', function ($classes, $item, $args, $depth) {
    // filter by some condition... for instance, only on the "main" menu
    if ( $args->theme_location !== 'main' ) {
        return $classes;
    }
    // all the different "active" classes added by WordPress
    $active = [
        'current-menu-item', 
        'current-menu-parent', 
        'current-menu-ancestor', 
        'current_page_item'
    ];
    // if anything matches, add the "active" class
    if ( array_intersect( $active, $classes ) ) {
        $classes[] = 'active';
    }
    return $classes;
}, 10, 4);

Generar sprites CSS/LESS automáticamente con Grunt

La utilización de sprites en CSS es una de las técnicas más básicas pero a la vez más necesarias en el desarrollo front-end. Aunque es posible crear y mantener un sprite de forma manual, te tomará tiempo y esfuerzo que probablemente podría tener un mejor uso (sobre todo cuando tienes que incorporar nuevas imágenes al… Continue reading Generar sprites CSS/LESS automáticamente con Grunt

Compilar archivos LESS automáticamente en Linux

Un tip pequeño pero muy útil: si estás trabajando con archivos LESS en Linux y necesitas un método rápido para compilarlos automáticamente al hacer modificaciones, puedes lograrlo con el compilador para node.js más inoticoming. En primer lugar, es necesario instalar node.js y su gestor de paquetes además de less. Luego, toca instalar inoticoming, la utilidad que… Continue reading Compilar archivos LESS automáticamente en Linux

5(+2) recursos: por qué NO justificar textos en la web

Para aquellos momentos en que a alguien se le ocurre la brillante idea: pero este texto quedaría mejor justificado… 5 links donde explican porqué no es buena idea usar texto justificado en la web Set ragged if ragged setting suits the text and page | The Elements of Typographic Style Applied to the Web Choosing Type… Continue reading 5(+2) recursos: por qué NO justificar textos en la web

Sitios web aún más rápidos

A propósito del post sobre la “sensación” de velocidad y los selectores eficientes que publicó recientemente Armonth en su blog, recordé una de las presentaciones de la Web 2.0 Expo en San Francisco de la que había visto sus diapositivas, y que hablaba más o menos del mismo tema. La presentación estuvo a cargo de… Continue reading Sitios web aún más rápidos

Personalizar la fuente del panel de administración de WordPress

Pueden decirme mañoso, pero detesto el uso indiscriminado de Verdana, y verla regada por todas partes en el panel de administración de WordPress apenas me era soportable. Así que puse manos a la obra, y recordando un pequeño truco para Firefox, me propuse cambiarla por una fuente que fuera más de mi agrado. Es bastante… Continue reading Personalizar la fuente del panel de administración de WordPress

eduStyle: inspiration for campus web designers

eduStyle es otra galería más de diseño web, pero con un énfasis bastante peculiar: sitios de universidades, programas de estudios y todo el mundo ligado a lo académico… lo que me viene como anillo al dedo. Mientras están por ahí, puede aprovechar de ver la ficha del sitio etnopsicologia.cl, uno de mis proyectos, que hasta… Continue reading eduStyle: inspiration for campus web designers