A lot of WordPress websites are built upon, and still use, the previous default WordPress Theme Twenty 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 through 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 Appearance -> Theme Options. You had 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 use 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, let's 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 it's a real static page, 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.
Uncheck 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, especially 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 © - <?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.
Other Twenty Eleven Theme customizations?
Above are the most request changes for the WordPress Twenty Eleven theme. Did they work for you? Or do you have extra needs or idea's or suggestions?
Please let us know in the comments below!
Is there a way to use an image (ex. Facebook “f” logo) instead of text for one of links on the horizontal navigation menu?
Hi Is thar a way to moove the topmenue from underneath the header to above the header?
@Orly: yes there is, but it will take some coding changes in the header.php file, so make sure you have a back-up to revert back if needed.
Go to Appearance -> editor and find the header.php file of your theme. Now look for the codeing starting with nav id=”access” role=”navigation” and ending with — #access — Copy all the code including the mentioned lines and move it up, placing it just under
hgroup after the top banner
Now you have two topmenu’s, and if you like the position of the top menu remove the origine code lines to have just one navigation menu.
You might also want to look at the plugin http://wordpress.org/plugins/twenty-eleven-theme-extensions/ to easily add a sidebar to your pages and posts :-)
Thank you so much! This completely solved all my WP problems!!! :D
Really greaet yours tips, thank you!.
Great stuff! Is there a woay to nly have a topmenu and no sidebar menu?
Hi do you know how to add a search box on the menu bar?
@Kim: A Search box in a menu is often build in into your WordPress Theme. Most theme’s will only provide a search widget that you can use in your sidebar
Thank you for your help! Great stuff.
Question: I often see the “Links” option on the left side menu typically below Media and above Pages but I don’t have that option on my WordPress 3.8 version. Do you know why this is and can you tell me how best to add a “Links” section somewhere i.e. in my side bar? Thanks!
@Paul: WordPress has removed the links option in the latest versions. You can easily get that back with the link-manager plugin. http://wordpress.org/plugins/link-manager/
Just published a post about how to add a slider on the front page and use featured images on all other pages otherwise the Custom Header is displayed.
Pretty simple modification.
Maybe useful for some Twenty Eleven theme users.
@Brad: Thanks, I always like your tutorials, very clean and easy to follow!
Hi I’ve found this so useful and I am building a site on the strength of your advice. I am having trouble setting the static home page, when I click on the home page it says “no posts to display so I think I missed something out there. What I would like to know is how do I put images in the widget sidebar (instead of search, archives, meta etc). I have successfully removed all widgets. My site is NOT live yet, I’ve got a few more pages to build before putting online. Thanks again, brilliant content.
AJ
@Aj, If you already have a page you want to use as the Homepage go to Settings -> Reading -> Choose the option Static Page and select the page you want. For images in your site bar you can use the Text widget and use HTML code to show the image and link out with that.
Thanks Herbert, I actually managed to figure out the static home page out, but as for the text widget, I did try that, but it seems to put the same side image on every page. What I’m looking for is relevant images for different pages and the occasional banner.
One last thing (promise), I cannot seem to get rid of the repeat Name of the page at the top of each page. I’m still building it and had to put it live so I could see how it looked. I would appreciate it if you could look at it to see what I mean.
I know it doesn’t have to look that way as I’ve seen and work on other WP sites, I just can’t get how to change it. Thanks again, your site has made it so much easier than I expected to create a static WP website.
@AJ: You can use the WordPress SEO title option to change the Title on a page. If you want to change the defautl title behavior, go to SEO -> Titles and Meta and change the Title option so is will not include the sitename.
As for the different widgets on different pages, try this plugin http://wordpress.org/plugins/advanced-featured-page-widget/
You will need to work per pages, but it does do the trick.
Thanks again Hertbert-Jan, will always return for updates and helpful tips!
Hello Herbert! I’ve been Googling for hours on a couple of issues with a site I’m building for a friend. I’ve been asked to use WordPress, and I have exteremly limited experience with it. I know how to get the things I need to work using HTML5 and CSS3, but with all the extra styles in the theme I’m using (Twenty Eleven, but copied and modded), I’m utterly lost on a couple of things that are probably simple.
1. How to get the ‘primary’ DIV to move up on all pages except the “Welcome” page which includes an image slider.
2. How to get my menu to lay out properly in all browsers. I made a few tweaks and then messed it all up by trying to get it to fix position directly below the header image.
3. How to set my footer (or ‘site-generator’ DIV) so that text is evenly spaced to the center and footer is fixed at the bottom of the page.
I know this is asking a lot, but I’ve read all the comments and I’ve really appreciated the kind way in which you have helped others. Thank you in advance!
Oh, the website name I used is the test site I’m using to test the theme, in case you want to have a peek at what I’m doing wrong.
@Jodi: 1. Take a copy of the page.php and name that home.php and put that into the The folder. This file is the first file WordPress looks for in the theme directory, even before the index.php. This home file can be completely different from the rest so you can use different div tags and lay-out. So you can change the primary div in you css and use something like home_primary for use in that home.php file.
2. I suggest you test your menu css using test tools. You can find some good tool suggestions on http://www.creativebloq.com/css3/4-tools-automatic-css-testing-7133777
3. For the footer text I use a simple < center > option in the php footer file
Hope this helps you taken it a step further.
Thanks for the Twenty Eleven Theme Extensions
now i will customize my blog, but how do I change the font type and size, especially for sub-headings (H3)
Regards,
Linda
@Cara Lind: If you go to appareance -> The Extensions, make sure to check the box Custom CSS. Once you have done that you will get an extra field where you can put in the css code for your H3 changes.
Default for Twenty Eleven is this:
.entry-content h3,
.comment-content h3 {
font-size: 10px;
letter-spacing: 0.1em;
line-height: 2.6em;
text-transform: uppercase;
}
So for a change the uppercase option you could remove that line.
More info on CSS can be found on http://www.w3schools.com/css/
Thank you for your reply, but I’ve changed the theme since I found a lot of errors when I check using Google Data structured testing tool, I got a lot of messages like this
Error: Missing required field “updated”.
Error: Missing required hCard “author”.
do you know how to fix it
Regards,
Linda
@Cara Linda: The missing fields will com form the theme itself so you need to check with the author. You could try the plugin WordPress SEO by Yoast to fill in the blanks, if that works you are ok without an Theme change / update.
Hi Herbert,
Thank you for the extensions plug-ins should now be able to shrink the logo but am unable to see how to get the Header photo’s to ‘shrink to fit’ the page as they seem to stay static??
Kind regards,
Emma
@Emma Winder: Twenty Eleven has a pretty static header option, file upload size for the header should be 1000 x 288. They do not change with the page, only via the header size option.
They do re-size for other resolutions, so you site does look good en has a responsive layout. You can check yourself on http://www.studiopress.com (aff)/responsive/
Awesome post dude. I have seen many sites which are customized from twenty eleven themes (aff). Will save this page for my future customization works
Thanks. Best tutorial! I still need to know if it is possible to write the main menue on the side. It is very clear how to deleat it from the top but it does not re-appeared on the side therefore nobody can navigate. What should I do?
@Dc: Yes, you can use a main menu on the side. Go to Appearance -> Menus and create a new menu (give it a name and click save). You can now add the pages you would like to show, save again.
Than go to Appearance -> Widgets -> Drag a Custom Menu widget to sidebar and you are ready to go.
Hello, many thanks for the most useful tips!!
I have an additional question and hope that you ll be willing to help me out.
How do I make sure ALL my categories appear on the side bar and not only the categories with a post?
Many thanks!!
Elisa
@Elisa: You can create a custom menu and put all your categories into that menu. The use a widget for Custom menu and show that menu.
I have html template purchased from themeforest, How can i integrate into wordpress
@Rajendra: I would start to look for a WordPress version of the HTML template you purchased. If you want to convert it your sefl this is a good starting point https://thethemefoundry.com/blog/html-wordpress/
Hi,
I have two questions that I hope you can help me with.
1. I would like to have less space in the header above the picture, where do I change this
2. On each page, I would like to keep the page name as it appears, but I think both the font size is too big and the space it akes up is far too much so I would like get the content closer to the menu/picture in the header
Thanks in Advance
/Saevar
Hi, I posted two days ago, but it seems that my post did not get through, or does it only show after first reply?
Anyway. I have two things that I would like to see if you can help me with.
1. The space above the header picture is to much, can you tell me where I can adjust the hight of that area?
2. I would like to keep the name of the page on each page, before the actual body appears. But here as well, I think it takes up too much space. So also here I am looking for the way to adjust both the font size and the height of this area before the actual content starts.
As I have started, maybee you can tell me if it is possible to let the page name appear on the top of the page only in some cases, so some pages would have this on top of it
Hope you can help me with this.
Thanks in advance
/Saevar
@Saevar: You can change the space above the header in the stylesheet / custom.css file. Here is an example on how to do that. Please make sure you have a back-up of the orginal files before you start experimenting.
/*————————————-
Reduce whitespace in header
—————————————*/
#site-description {
color: #7A7A7A;
font-size: 14px;
margin: 0 270px 1.65625em 0;
}
#site-title {
margin-right: 270px;
padding: 1.65625em 0 0;
}
For the space around the title you can try the h1. and .entry title size reduction in the style.css
h1.entry-title a {
font-weight:normal;
font-size:24px;
text-shadow: 1px 4px 6px rgba(0,0,0,0.2),0px -5px 35px rgba(255,255,255,0.3);
}
If you want to change the way the pages look on a seperate page, you might want to look at a special page template. See also http://codex.wordpress.org/Page_Templates
Hope this helps.
Thank you for your very useful tutorial.
But I still have 2 questions:
1. I would like to change the color for an active link in my top navigation.
Where can I find that in the stylesheet?
2. I use the plugin “quick event manager”.
This generates an overview-page for all events – here I can use the Sidebar Template.
But when I want to see the details of an event I can’t use any template.
Could you please help me?
Thank you very much in advance
Martina
Meanwhile I figured out how to change the color of an active link.
But I have no idea how to open an event site in the template.
Can anybody help me?
Martina
@Martina: Sorry for the late response, been out of the country for some work with very limited Internet access :-(. Good to see that you found the way to change the link color. According to the support site for this plugin you need to ad the widgets / sidebar to the default page / post template. That means you will always have a standard sidebar. If you place the widget on that standard sidebar it will show also on the event details page. Hope that helps.
I’m new to blogging and know nothing about computer but browsing the web. So far, I have been able to figure a couple of things out.
1 – I noticed that on mobile phones, my side menu is displayed on the bottom. Is there a way to fix that?
2 – Also, I would like to make an Engoish version of my page. Is WPML compatible with the 2011 Theme?
Thank you very much!!!
Ana
@Ana, the placement of the menu on mobile depends on the theme so in this case you need to look for a mobile theme or try the http://jetpack.me/support/mobile-theme/ plugin option.
The 2011 Theme can be used with WPML and http://wordpress.org/plugins/polylang/ which is also very good.
Be aware that you need to do your own translations, these are not automatic translation plugins.
Hello Herbert-Jan,
I am just another person in a long line of “Thankers” for all your work and all your help with the Theme!
My
Best Regards,
Kris
Hi,
can I do a slideshow in an article? I have one that is quiete long with many pictures, so I use the “continue reading” button (actually don’t know how it’s called in the English version). Still, there would be too many pictures, so I want a slideshow that dies not appear on the home / main page, but only if you click on the article. How is this possible?? :/
Regards, Christina
@Christina: Check the documentation of your slideshow plugin. Most of the gallery plugins have a shortcode you can use to show slideshow in an article.
Dear Herbert-Jan,
I am building a site with twentyeleven theme. For use on a mobile phone in portrait format I want to hide the header image. I also use a responsive menu plugin. That works fine. As I said I prefer to hide the default header menu for use on a mobile phone. How can I do that the best way?
Thanks in advance!
Bert
Netherlands
@Bert van Lith: I would keep them as it is! Check your site on http://www.studiopress.com (aff)/responsive/ and see how your header scales great on any resolution. But it’s a bit unclear if you want to hide the header image or the header menu. For the later you could check the settings on the responsive menu plugin.
Hi Herbert, thank you very very much for this post! Is very useful for all of us.
I have a question. In the top of the header there is like a border about 3 or 4 pixels. How can I delete it?
Thank you!
@Alex: Check your stylesheet (I do hope you use a Child theme or the custom css function!) and change the 2px to 0px in this code:
#branding {
border-top: 2px solid #bbb;
padding-bottom: 10px;
position: relative;
z-index: 9999;
}
How do I enable commentluv (aff) on my Twenty-eleven WordPress site? I don’t see anywhere that says “plugins directory”, where commentluv (aff) says to upload the zip file to. Am I missing it somewhere or does this theme not accommodate commentluv? Help!
@Sue Colletta: Looking at the source code of your site I can see you are on wordpress.com services with your blog.
You do use your own domain (aff) name, but to be able to install plugins you need to have your own hosting (aff) provider and a WordPress installation from wordpress.org.
On the free services from wordpress.com you cannot install plugins.
Hello Herbert how are you? Long time since I needed you assistance, I’ve been building my website. I have come across a problem which I cannot find the answer to within the WordPress.org forum etc. I want to create some pages but NOT have them show up in the navigation menu. I cannot figure out how to do this. Can you help? I am using WordPress 4.0.1 – Twenty Twelve theme.
Thanks
AJ
@AJ: With the new 4.x version you can create custom profiles and show only the pages that you want to show. Just go over to Appearance and choose Menus. It pretty easy to use and you can appoint. You can creat multiple menus if you want.
Hi Herbert, thanks for the reply but I still don’t understand the “How To” of removing certain pages from the main menu. My theme says it (supports 1 menu. Select which menu you would like to use)
I see the pages menu & and ALL my pages are in there. I created a new menu to place the pages I want in there but it still didn’t work. The only way I can make sure pages DON’T show up in the nav bar is to trash the page. I’m going to need the 1-2-3 steps of actually doing it because I cannot see how. Sorry
AJ
@AJ: When you go to the menu option under Appearance -> Menu then use the option to create a new menu.
Once you have created that you add the pages you want to show in the top menu. Now tick the box below the pages and the menu settings that says “Primary Navigation Menu”
Save the menu! This is important the you click that option. Now you should have the menu you want in the top navigation of your website.
Tip: Choose the option “View All” before selecting the pages. That way you also see the Home option. You can drag and drop the pages to sort them to your liking.
@Herbert, thank you very much for spelling it out for me. I have now created a primary Nav Bar & will add all new pages I want to show into it. Thanks again.
AJ
Hi Herbert, thanks for the info and the theme extension does help but when I placed the widget to the main sidebar it covered up the page content. How can we resolve this issue so that the widget will not cover the page content. Please advise, thanks for your time and help.
@Tom: Hard to say without an example, but something like this could happen if the content of you widget is set to too high width and height, of with an image that is to big. Please check the html code in the widget.
Thanks for the tip, but it is a drag and drop widget. So I activated the theme extension to get main sidebar to show on the page, then I dragged the widget to the main sidebar. When I view the page, the widget overlap the page content. I looked in the widget.php and can not see any code for width and height and I do not see html code for that widget since it is a drag and drop. please advise, thanks
@Tom: What is the Widget that you use? Is that a standard widget or a speciaal widget created by a plugin? In the later you should check the plugin settings and file to see how the output is created.
How do I change the size of feature image in each post. Also how do I make a thumbnail of the feature image appear on the home page?
Thanks
@Jay: The easiest way is to use the http://zeaks.org/nomnom-twenty-eleven-child-theme/ theme as child theme for TWenty Eleven. Once installed you have a tab in the Appearance -> Theme Options called NomNom Options. You can set the header / featured images size and have thumbnail images on your frontpage and archives.
Thanks for that Herbert-Jan. Do you know how to install child themes (aff) on wordpress 4.2.2 without using FTP?
@Jay: Yes, you can use a plugin like https://wordpress.org/plugins/child-theme-configurator/
Otherwise you can always use the theme upload function if you got a zipped download of that theme
Thanks again for the reply Herbert. I’m trying to work out how to upload that nom-nom child theme using that child theme configurator but can’t seem to find it on their instructions. Do you know how?
Thanks
@Jay: Upload the nom-nom theme via Appearance -> Themes (aff) -> Add New -> Upload Theme, browse to the downloaded .zip file, select that and then choose Upload and Install. Then active the theme and then go into the options to fit your needs.
Thank you so much. I was searching for just this information and I found it at your website. This is terrific and very, very helpful.
Thanks
RonD
When I Embed a Facebook Post the page does not show up in the right format. The lay-out is smaller and in left position. Not the right Size and not centered. Without the Facebook Post there is no Problem. I am using Twenty Eleven.
.
@Ruud de Bree, looks like your solved the problem already, when I look at the site with Chrome its fine. Aklso Edge, Firefox and Opera render fine now.
Did you check https://developers.facebook.com/docs/plugins/embedded-posts to make sure you got the Facebook code in the WordPress section?
This was a very useful post. I do have one question. How does one go about changing the white content “container” to a different color, for instance blue, or make it transparent?
Thank you in advance