Twenty Eleven WordPress Theme

Twenty ElevenI’ve been doing a lot of work with some WordPress sites lately, including migrating some older CSS sites to WordPress. One of the things I always look for when moving sites or setting up new ones are themes. WordPress themes are the color and layout of your website, in other words the look and feel. I have used a lot of themes, but one that I have liked lately is the Twenty Eleven theme. Twenty Eleven has a nice, clean look to it and provides very standard functionality. This is important as it is one of the more standard WordPress themes it means it is also one of the most supported. But while being standard, it allows for a lot of customization in the header, background, and color of the website. This means I can use this theme for multiple sites while keeping each one looking unique. That is a lot of wins in the theme category, but Twenty Eleven isn’t great out of the box. I had to do some tweaking to get it to work and look right.

One of the first things I noticed and did not like about the Twenty Eleven theme was when you went into a page or post, the side bar would disappear. This was done on purpose to give more room and make the post easier to read. I did not like this at all, as I depend on the side bar on my sites for navigation, even more so than the top menu bar. Luckily I was not the only one who feels this way and was very quickly able to find the Twenty Eleven Theme Extensions plugin for WordPress. This adds back some of the functionality into the Twenty Eleven theme, such as locking the side bar so it is always shown no matter what post or page you are looking at. If you are going to use the Twenty Eleven theme, you are definitely going to want to use this plugin. Once you install the plugin, it adds a Theme Extensions option under the Appearance tab in WordPress. Here you can make several changes, including enabling the Widget Sidebar on all your pages and posts.

Something that was kind of a turn off for me with this theme was how much space it used up in the header, or top of the site. It will display your site’s name, its tagline, and a search bar all at the top before it even displays a very large header image. This is a lot of overkill in my opinion and wastes a lot of space, making users have to scroll down just to get to the body of your site. Luckily the Twenty Eleven theme has an option for this too. If you go into Appearance and click on the Header option, you can turn off Header Text, so it only shows the header image. This will also move the search box down onto the menu bar, so if you have a lot of menu items you may not want to do this. The other unfortunate thing it does is remove the name of your site, but this can be easily fixed by finding a new header image and putting the name of your site right into the header image. Programs such as Adobe Photoshop, GIMP, and Photoscape are examples of programs that you can use to accomplish this.

Another problem I noticed with the Twenty Eleven theme was the way it behaved on mobile devices, such as tablets or smartphones. The theme is responsive, which means it will change its layout depending on the width of your device. The intent is to make sure that everything is larger and more readable by moving the menus and sidebar underneath the posts. This is great, but can mean a lot of scrolling to get to some of the menu links. And while I can accept this on my iPhone, I was less impressed when it was doing this on iPads as well, which do have enough width for the sidebars. After some online searching I found a way to fix this, however it should be warned that this meant directly editing the header.php of the theme. If you are going to do this, you should always make a child theme and then edit the file so as to not damage your install of the theme. Once you do that, it is a simple matter of going into the Appearance section and select Editor near the bottom. Once in there click on the header.php file, you will see the actual code for the header.php file for the theme. Look for a line that says the following and delete it, <meta name=”viewport” content=”width=device-width” />. Once you are done click Save Changes, now if you refresh your site on a mobile device, it will display the full site with sidebar just as if you were sitting at a regular computer. The downside of this though is, the text will be smaller on mobile devices, so if you would rather keep things more readable in exchange for your sidebar, then you may not want to perform this step.

So while my initial view of the Twenty Eleven theme was not very good, I found that after doing some customizations and installing some plugins, this theme quickly became my favorite. If you have a WordPress site and are looking for a theme, with some of the tweaks I have mentioned here, I have no doubt that Twenty Eleven would be a good fit for your WordPress site.