Fix for Broken Submenu on Twenty Thirteen for Tablet / iPad

You’ll need to insert the following java script to functions.js at line 53 before
// Better focus for hidden submenu items for accessibility.

// Fix sub-menus for touch devices.
if ( 'ontouchstart' in window ) {
menu.find( '.menu-item-has-children > a' ).on( 'touchstart.twentythirteen', function( e ) {
var el = $( this ).parent( 'li' );

if ( ! el.hasClass( 'focus' ) ) {
el.toggleClass( 'focus' );
el.siblings( '.focus' ).removeClass( 'focus' );
} );

Core wordpress developers coded the fix. Hopefully it will be in the next update of Twenty Thirteen.

Modifying the Twenty Fourteen WordPress Theme

I’m doing a new website for a restaurant and decided to use the new default WordPress Twenty Fourteen theme. It’s fairly clean and doesn’t seem too buggy. It’s magazine look is appropriate for a graphics dominated website.

Since there’s not much info out there about modifying the css on Twenty Fourteen I wanted to post how to make a few mods.

First off, create a child theme and do not modify the Twenty Fourteen theme itself!

The full width template flat out doesn’t work because the maximum width is set to 474px. So just change;

.page-content {
margin: 0 auto;
max-width: 474px;


.page-content {
margin: 0 auto;
max-width: 674px;

Change the menu bar color at;

.site-header {
background-color: #000;

Change left sidebar color;

.site:before {
background-color: #000;

Change footer color;

.site-footer {
background-color: #000;

That’s all for now. I’ll post more as I finish this site.