Tag Archives: child theme

Saying goodbye to 2012.FFWD

Earlier today I updated my performance-centric TwentyTwelve child theme to fix a problem with the mobile navigation (due to the fact that TwentyTwelve changed the menu-button from a h3 to a button, which required the navigation JS which 2012.FFWD inlines to be updated as well). You can download the update here.

This update “officially” marks the end-of-life of this child-theme. Although a lot of optimizations can be done on a theme-level, I prefer focusing on tools like my own Autoptimize, which not only optimize code spit out by the theme but also any CSS/ JS introduced by plugins or widgets.

Quick tip; disabling WordPress author pages

I helped build a WordPress-site for a not-for-profit and they asked me to disable the author pages. Although I’m sure there are multiple plugin-based solutions, I ended up simply adding an author.php to my (child) theme with this in it;

<?php
header("HTTP/1.1 301 Moved Permanently");
header("Location: /");
?>

As author.php is used for all author pages (if available, else archive.php is used), every attempt to reach an author page will result in a permanent redirect being sent, effectively disabling the author archive. Keeping it simple stupid!

Tweaking WordPress’s Expound theme’s menu

I’m helping on a site for a not-for-profit for which we selected “Expound” as the base theme. I like Expound; it looks great, there’s no jQuery- or webfont-cruft to worry about and although the CSS comes with a seperate reset.css-file, it does (Auto-)optimize perfectly.

But I wasn’t happy with the menu color-scheme and with the fact that the menu lacked an indication that a child page of a main entry was being shown instead of the page of that main entry itself (confused much?).

Anyway, this is what I ended up with;
wordpress expound theme menu tweaked

For those wanting to do something similar, this is the relevant CSS in my child theme;

/* don't want no blue */
.navigation-main .current-menu-item > a {
        background: #557B47 !important;
}

/* triangle should not be blue either, need it to be a bit bigger */
.navigation-main ul > .current_page_item a:after, .navigation-main ul > .current-menu-item a:after, .navigation-main ul > .current-post-ancestor a:after, .navigation-main ul > .current-menu-parent a:after, .navigation-main ul > .current-post-parent a:after {
        border-top: 10px solid #557B47 !important;
        bottom: -14px;
        z-index: 1000;
}

@media screen and (min-width: 600px) {
  /* if page from submenu, add line under parent item to show your in that submenu */
  .navigation-main ul > .menu-item {
        border-bottom: 6px solid #3A3A3A !important;
  }
  .navigation-main ul > .current_page_item, .navigation-main ul > .current-menu-item, .navigation-main ul > .current-post-ancestor, .navigation-main ul > .current-menu-parent, .navigation-main ul > .current-post-parent {
        border-bottom: 6px solid #557B47 !important;
  }

  /* but not in submenu */
  .navigation-main .sub-menu > .menu-item {
        border-bottom: 0px !important;
  }

  /* less padding at the bottom to compensate for that extra line */
  .navigation-main a {
        padding: 10px 10px 4px !important;
  }

  /* except when in submenu */
  .navigation-main .sub-menu a {
        padding: 10px !important;;
  }
}

/* change color to default brown if child-item is active */
.navigation-main ul > .current_page_item, .navigation-main ul > .current-menu-item, .navigation-main ul > .current-post-ancestor, .navigation-main ul > .current-menu-ancestor, .navigation-main ul > .current-menu-parent, .navigation-main ul > .current-post-parent {
        background: #3A3A3A !important;
}

Have fun!