I have been testing the new Twenty Twelve responsive WordPress theme. It’s very nice but I don’t like the way the responsive menu works. So I figured out how to replace the existing menu with a Select list.
Currently, when you view 2012 on an iPhone, you get a Menu button. If you click the menu button, the whole menu expands below the button and has no hierarchy. It’s simple. It’s clean. And it’s clunky if you have a large menu with pulldowns. The image below shows the default Twenty Twelve responsive menu on the left and the responsive select menu on the right.
To add a responsive select menu to Twenty Twelve
The following procedure explains how to add a select menu to the WordPress 2012 template. I used the SelectNav.js script to make this modification. You can find instructions and a github file link on this site.
- Install the Twenty Twelve theme if you don’t have it. You can download it here.
- Create a child theme for 2012. To do so, create a new folder in /wp-content/themes/
called twentytwelvechild. You can call it whatever you like, but for this tutorial, I’ll use twentytwelvechild.
Click here for a detailed and excellent explanation of how to create a child theme.
- In your twentytwelvechild child folder, create a file called style.css and add the following code:
/* Theme Name: Twenty Twelve Child Theme URI: http://example.com/ Description: Child theme for the Twenty Twelve theme Author: Your Name Author URI: Your URL Template: twentytwelve Version: 0.1.0 */ @import url("../twentytwelve/style.css");
- In your twentytwelvechild child folder, create a file called functions.php and add the following code:
- From WordPress admin menu, select Appearance > Themes. You should see the Twenty Twelve Child theme you just created. Click Activate. Now, the Twenty Twelve Child theme should be your active theme.