7 Tips to Customize WordPress Twenty Eleven Theme

A lot of WordPress websites are built upon, and still use, the previous default WordPress ThemeTwenty Eleven. I will show you 7 tips that you can use to customize the Twenty Eleven Theme.

With most of the tips you don’t even need to know much about PHP coding, just how to install a special Twenty Eleven plugin.

Tip 1: Install WordPress Twenty Eleven Theme Extensions

Twenty Eleven Theme Extensions is the plugin you want as it can solve most of the problems people are facing with Twenty Eleven.

To install this plugin go to Plugins -> Add new -> Search Twenty Eleven Theme Extensions and select it from the list.

Click on install and confirm that you want to install it. After installation make sure you click the active option.

You should now see an extra option under Appearance called Theme Extensions. We will go though the options in this post as most of the options  you want to change.

Tip 2:  Twenty Eleven Sidebar on All pages

If you look at the default layout of the Twenty Eleven theme you will see that the sidebar is only visible on the Home page.

But you want to have that sidebar on all pages, including posts. If you only want it on pages, you can select that option via the  Page Attributes in the right side menu of your edit screen.

Unfortunately that means you have to do that on every page and you still wouldn’t have the sidebar on posts. To change this, click the upper two options in the extensions plugin settings.

 Tip 3:  Change the Header Image and Size on Twenty Eleven

The default header size for the Twenty Eleven Theme is 1000 width x 288 pixels in height.  Which is pretty high and takes a lot of space on your screen. You can easily change that with the extensions option Change the height of new images.

If you already have some headers installed, make sure you check the second option as well.

Better would be to create and upload new images in the right format or crop them upon upload.

You can upload new header images via Appearance -> Header -> Choose or Upload a new header file. Once you uploaded more than one header file you can switch the headers automatically by selecting the Random option.

Note: Did you know you can set a special header for each post or page? Create a special header in the same size as the standard one (here it is now 1000 x 175 pixels) 1000 x 288 is the Twenty Eleven standard format.

Now go to the page or post you want that header to show up and select the option Featured Image, upload or select the header and update the page / post.

Tip 4:  Twenty Eleven Theme Change Menu Color and More

One of the most asked questions on Twenty Eleven is how to customize the Menu Color and other items like the link colors and text color. With the extensions plugin you need to check the Custom Color option to get this done.

Once you activate that option you get new selections in the the Appearance -> Theme Options. You ahd a few options on that in the standard theme options, now you get a big list of things you can change.

For the menu color change look for Menu Background Color, Menu Highlight Color and if needed Menu Text Color.

You can select the colors from the button next to the color, or put in the hex (#de000a).  If you want color suggestions, check out http://www.colorhexa.com/ and http://www.colorcombos.com/

Tip 5: Remove Search from Twenty Eleven Top

As we have the last option in the extensions called Custom Style we can used that directly to remove / hide the Search Option in the top title area. Activate the Custom style option and place this code in it:

/* Search Form */
 #branding #searchform {
 display: none;
 }

So you should end up with this:

Tip 6:  Remove / Hide Twenty Eleven Topmenu  Navigation

Some people don’t like to have the Top Navigation menu below the header image and only want to use a custom menu in the sidebar.

If you also want to remove that menu, then this simple trick is for you. First create a custom menu, lets call it Blank. You leave that menu empty, so not even a Home link. Now set that Blank  as the primary navigation option and check your website, you should not see the navigation anymore.

Example, Twenty Eleven with smaller header and no main navigation bar.

Tip 7: Remove the Comment Function from Twenty Eleven Pages

On Twenty Eleven pages you can see that there is also the possibility to comment on that page.

If its a real static pages, like a contact form or a sitemap, you don’t want people to comment on the content of that page.

I only want comments on my posts, not on pages. So the option to disable all comments is not an option. Instead change the screen options display when you are in the edit screen for a page.

Start with the screen options tab (upper right corner)

On that screen enable the Discussion option by checking it, this will display the Comments option below your main content edit screen.

Un-check both options and the comments form will be gone from your page. You need to do this on all current and new pages!

Bonus Tip: Remove / Customize Proudly Powered by WordPress from Twenty Eleven Footer

In this case we do need to work on a core file from the Twenty Eleven Theme, specially the file called footer.php

It would be better to do this on a Child Theme, but for this purpose it will not be such a problem. You just need to make sure you do it again it there should come an update for the Twenty Eleven Theme.

Go to Appearance -> Editor -> Open the file Footer (footer.php)

Search for <div id="site-generator">

You need to replace the code between that code and the first </div> after that code. replace the code:

<?php do_action( 'twentyeleven_credits' ); ?>
<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentyeleven' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentyeleven' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyeleven' ), 'WordPress' ); ?></a>

With

<p>Copyright &copy; - <?php echo date('Y'); ?><a href="http://www.example.com" rel="nofollow"> Special Example Link Website</a></p>

Change www.example.com with your own URL and the text for the link to fit your website. All done, you should see your own text in the footer and it should link back to your homepage.