Time for action—configuring the Twenty Eleven theme
To configure the Twenty Eleven theme, perform the following steps:
- Activate the theme. At the moment, we have a bespoke theme activated, so we need to activate the Twenty Eleven theme. Let’s do that by clicking on Themes in the Appearance menu, as shown in the following screenshot:
So how does the Carborelli’s home page look now? First, we will see how it looks on a desktop, as shown in the following screenshot:
Next, we will see it on mobile devices with screens narrower than 480px, as shown in the following screenshot:
Hmm. It’s not quite right, but it doesn’t look bad. Can you spot the main changes Twenty Eleven has made to the site, compared to the original theme? They are as follows:
- The widgets are missing. The map has disappeared because it was in a widget. There is a search box but it’s in the header.
- A comments box has been added. We don’t want one of those on our home page.
- A wide image has been added at the top, which isn’t relevant to our site.
- So we’re going to fix those issues. Specifically, we will:
- Add our widgets to Twenty Eleven’s widget areas via the Widgets options page in the WordPress admin.
- Remove the comments box by changing the settings in the Discussions options page. This won’t affect existing pages, so we’ll have to change the comments settings on each of our individual pages, too.
- Replace the Twenty Eleven default image with an image more appropriate for our site, using the Header options page.
- Make sure our pages are set to use Twenty Eleven’s Sidebar template—the default template doesn’t display the sidebar. We will do this by configuring each page individually.
What just happened?
We activated Twenty Eleven as the theme for our site, and edited some of the options so that our widgets are displayed correctly and the header image is in keeping with the brand. We removed the comments box, as the site doesn’t need one on the home page.
Let’s see how the site looks on a desktop computer, as shown in the following screenshot:
The comments box is now gone, the widgets are correct, and the header image is appropriate to the brand. There is a problem with that image being repeated on the home page, but this could easily be fixed. By editing the home page and using a different image, or maybe removing those images altogether, we will now have a nice big banner image in place.
Let’s also have a look at how the site looks on an iPad in portrait mode, as shown in the following screenshot:
You’ll notice that the layout is different again. The sidebar has been moved to the bottom of the page like on mobiles, but the content area is wider so everything has more room to breathe.
And finally, on a mobile device the layout will be as follows:
Everything we need is there on mobiles too, and the widgets look great at the bottom of the page.
This gave us a site, which looks good on desktop, mobile, and tablet devices. Not bad for about half an hour’s work!
As you may have noticed, Twenty Eleven has a few options, which can be changed without diving into the code. However, if we really want to make the site our own, we could edit the theme’s stylesheet or header file for example or, even better, set up a child theme and make changes to that.
Have a go hero—making Twenty Eleven your own
Now that you’ve seen a bit of what can be done with Twenty Eleven as a responsive theme, try the following:
- Create your own site using Twenty Eleven and upload your own image to use as the header. Also on the Header screen, change the color of the text in the header. Avoid the temptation to go for something too garish, as this won’t be good for legibility!
- On the Background screen, change the background color to something that fits with your site’s overall design.
- Using the Theme Options screen, change the color of links within your site.
- If your understanding of WordPress and of stylesheets is up to it, create a child theme based on Twenty Eleven so you can edit the code, particularly in the stylesheet. It’s good practice to use a child theme, because if the parent theme is updated at any time in the future, you can apply that update without losing what you’ve done.
In your child theme’s stylesheet, change the background color of the navigation bar to bring it in line with your header and background colors. The selector you are looking for is #access.
Note
For more on parent and child themes, see http://codex.wordpress.org/Child_Themes in the WordPress codex.
The following screenshot shows what the Carborelli’s site looks like with the suggested changes, as seen on an iPad:
With a little work, the Twenty Eleven theme can be made to look much more individual—and with some more work on the CSS, the sky’s the limit!