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.
child theme
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;
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!