Here’s a small update to the Three Column Twenty Eleven theme. I forgot to add support for the extra sidebar for the default layouts, it should no longer drop to the bottom of the page.
Gallery attachment page has also been fixed and GPL license included.
Please download the new copy.
Lots of people have asked how to create a three column Twenty Eleven, so I decided to take NomNom theme and strip it down for those who just need the 3 column layouts.
Simply install, and check Appearance > Theme Options to see 3 new 3 column layouts.
Gallery thumbnails look best at around 125×125 px because of the narrow content with new layouts and will allow 3 gallery thumbs horizontal.
Please comment if you notice an issue.
I’ve just finished a major update of NomNom child theme. There’s lots of changes and new features in this release. Nivo slider has been added to the header with options which is one of the new features.
Please see the Updated NomNom theme page NomNom Theme which has a full list of features and info.
I’ve also as of version 1.5 removed all shortcodes from NomNom theme. If you were using these shortcodes, don’t worry, I’ve created a plugin which will allow you to keep using them or start using them if you want. You can grab that here
Here is the changelog for 1.5
v1.5 8/31/11 -
Added Nivo Slider to header with options
Added by request author avatar on post titles with on/off option
Added as suggested on/off option for recent related posts
Added comment bubble on/off switch
Added searcform in header on/off switch
Added ajax to Custom CSS section and other areas, most options should not require page reload to save.
Added by request tidy comment CSS (Allows more comment area by using 1 column CSS on all layouts, edit at own risk)
Added tabbed layout options panel. (saves space when future options are added)
Added Site Preview in NomNom Options
Redesigned the comments for all layouts (had no choice it was either all or none, and they looked bad with the 3 column)
Removed all shortcode functions and created plugin
Added default options for all theme options (should look like twenty eleven after install)
Added a class to the body element for all custom layouts .custom-layouts, this will effect all custom layouts.
Fixed header resizing for narrow left/right layouts. (Changed width to max width)
Increased narrow sidebar left and right width by from 850px to 875px.
Adjusted recent related posts position.
Fixed comment list on attachment page.
Fixed attachment page layout for all layouts. *Thanks Steve for pointing that out
Set width and position of comments for custom layouts to match default.
Please post comments here NomNom twenty Eleven Child Theme
Since NomNom 1.5 all shortcodes in previous versions have been removed and added to this plugin instead. The reason for this is that if you decide to use shortcodes from a theme, you’re stuck using that theme if you want your shortcodes to keep working.
Just install this plugin like any other and use the same shortcodes you did before, instructions are in the readme file.
You can add tabbed content to any post or page and save valuable space. Instructions on using this shortcode are available on the NomNom Options page you’ll fine in your admin section after installing the theme.
|
1 2 3 4 5 6 7 8 9 10 11 |
[tabbed tabs="Tab1 | Tab2 | Tab3"] [tab] Tab 1 content [/tab] [tab] Tab 2 content [/tab] [tab] Tab 3 content [/tab] [/tabbed] |
are easy to create with this shortcode. Simply create a list and add
|
1 |
[checklist] Your List Here [/checklist] |
This members only shortcode comes in handy if you want to allow a file download or any other content just for registered members. To use it, create your content, then wrap it with this
|
1 |
[private] Your content here [/private] |
You should see a register/login link below if you are not logged in.
[private]This is only viewable to logged in members[/private]
You can display post content in two columns using a short code. Don’t confuse this with a two column post layout, it will change the actual content as displayed below.
Use
|
1 |
Use [half]Left content here[/half] [half_last]Right content here[/half_last] |
[half]Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.[/half] [half_last]Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.[/half_last]
look great on any site and it’s very easy to do with this theme. Simply add your quote, then wrap it with either of these tags.
|
1 |
[pull float="alignleft"]QUOTE[/pull] or [pull float="alignright"]QUOTE[/pull] |
[pull float="alignleft"]This is a left aligned pullquote[/pull]
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
[pull float="alignright"]This is a right aligned pullquote[/pull]
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
I find the comments in Twenty Eleven take up far too much room and it’s always bothered me. I posted some CSS on the forums here that tightened them up a bit, but it had a few issues.
Today while working on NomNom theme, I had it set to the single column layout and noticed the comment avatars were not pushed over the the left side, but instead placed inside the comment box and it looked really nice. I thought, this is just what I need for my narrow layouts and even 3 column layouts as the narrow comment area is precious and doesn’t need to be used up with a bunch of padding and an image.
Here’s before and after screenshots while using my left/right sidebar layout of NomNom.
Anyways, I haven’t decided if I will add this to all the layouts for NomNom, or just for the ones that need it, I try to keep the look of NomNom the same as Twenty Eleven, and just offer options and easy on/off features.
This should work perfectly with any Twenty Eleven theme that hasn’t modified the comments. However, NomNom theme will require a few CSS edits because I adjusted the comments, if you don’t want to risk doing them, just wait until the next version.
Leave a comment and let me know if you think I should add these to all layouts in NomNom, or just the extra ones I’ve added. (I’ve had to edit this code 3 times, if you notice an issue, please report it.)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
/* Tidy Comments ---------------------------------------------- */ /* remove the talking arrow, unless you want it */ .page-template-sidebar-page-php .commentlist > li:before, .singular .commentlist > li:before, .single .commentlist > li:before { content: none; } /* Make comments as wide as possible*/ .page-template-sidebar-page-php .commentlist, .single .commentlist { width: auto; } /* Make sure we have room for our comment avatars */ .page-template-sidebar-page-php .commentlist > li.comment, .singular .commentlist > li.comment, .single .commentlist > li.comment { margin-left: 102px; width: auto; } /* Talking avatars take up too much room at this size */ .page-template-sidebar-page-php .commentlist > li.comment, .singular .commentlist > li.comment, .single .commentlist > li.comment { margin-left: 0; } .page-template-sidebar-page-php .commentlist > li.comment .comment-meta, .page-template-sidebar-page-php .commentlist > li.comment .comment-content, .singular .commentlist > li.comment .comment-meta, .singular .commentlist > li.comment .comment-content, .single .commentlist > li.comment .comment-meta, .single .commentlist > li.comment .comment-content { margin-right: 85px; } /* fix the margin for narrow content in threaded comments */ .commentlist .children li.comment .comment-content, .commentlist .children > li.bypostauthor, .commentlist > li.bypostauthor { margin-right: 0; } .page-template-sidebar-page-php .commentlist .avatar, .singular .commentlist .avatar, .single .commentlist .avatar { background: transparent; display: block; padding: 0; top: 1.625em; left: auto; right: 1.625em; } .page-template-sidebar-page-php .commentlist .children .avatar, .singular .commentlist .children .avatar, .single .commentlist .children .avatar { background: none; padding: 0; position: absolute; top: 2.2em; left: 2.2em; } .page-template-sidebar-page-php #respond, .singular #respond, .single #respond { width: auto; } .singular #respond {width: 62.9%} /* comment fix for single pages and attachment pages */ .image-attachment .commentlist{width: 68.9%;} .image-attachment #respond {width: 62.9%;} /* Change the post author comment look as well */ /* Post Author threaded comments background */ .commentlist .children > li.bypostauthor, .commentlist > li.bypostauthor { background: #efefef; } /* Lightened the background color of postauthor and highlighted the avatar instead */ .commentlist > li.bypostauthor .vcard img, .commentlist .children > li.bypostauthor .vcard img { border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-bottom: 5px solid #F5D800; padding-bottom: 2px !important; } |
Ignore the posts the slider images are linked to, they are just for the purpose of displaying the slider so I can test it on a live site. If anyone notices any strange issues with it or any other part of the theme, please let me know by leaving a comment. I’ll be using this on Zeaks.org for a few days before I release it.
- Added Nivo Slider to header with options
- Added by request author avatar on post titles with on/off option
- Added as suggested on/off option for recent related posts
- Removed all shortcode functions and created plugin
- Added default options for all theme options (should look like twenty eleven after install)
- Fixed header re-sizing for narrow left/right layouts. (Changed width to max width)
- Increased narrow sidebar left and right wdth by from 850px to 875px.
- Adjusted recent related posts position.
- Fixed comment list on attachment page.
- Fixed attachment page layout for all layouts. *Thanks Steve for pointing that out
- Set width and position of comments for custom layouts to match default.
If you would like to test new versions of NomNom before I release them, email zeaks @ live.ca (remove spaces)
Adding a secondary menu to Twenty Eleven theme is really easy. This feature is available in my NomNom Child Theme and I’ll show you how I did it. We’ll be doing this by making a child theme and creating 3 files.
Create a folder and pick a name for your theme.
Create a style.css file
Create a functions.php file
Copy header.php from Twenty Eleven theme and add it to your theme folder.
Upload everything to wp-content/themes, all files should be inside your new theme folder.
We will start off by adding the function to create a new menu. Open functions.php and add this to it.
|
1 2 3 4 5 6 |
<?php // Add a second menu register_nav_menus( array( 'secondary' => __( 'Top Menu (Above the Header)', 'yourtheme'), 'primary' => __( 'Primary Menu', 'yourtheme' ), ) ); |
Save and close functions.php. This bit of code registers a second menu.
Next we need to add the code to the header in the proper place to display the menu, so open header.php that you copied from Twenty Eleven and around line 76 find
|
1 2 |
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2> </hgroup> |
Below this line add
|
1 2 3 4 5 6 |
<!-- Begin secondary menu #access2 --> <nav id="access2" role="navigation"> <?php // This is where the menu is added wp_nav_menu( array('container_class' => 'menu-top', 'theme_location' => 'secondary', 'fallback_cb' => '') ); ?> </nav><!-- end of #access2 --> |
Save and close header.php. This is basically a copy of the primary navigation code with the ID access2 used instead of just access. We’ve also used fallback_cb which as it says on the codex “Given a theme_location parameter, the function displays the menu assigned to that location, or nothing if no such location exists or no menu is assigned to it. ” This will prevent the new menu from listing pages as most people will not want the top and bottom menus to show the same menu items. If we create a menu and add items to it, it will display them, otherwise it will not appear.
The last thing for us to do is style the menu, so open your style.css file. Since we’re creating a child theme add this top the top of the file.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* Theme Name: My Menu Theme Theme URI: YourThemePage.com Author: Your Name Author URI: YourSite.com Description: A Twenty Eleven child theme secondary menu Version: 1.0 License: GNU General Public License Tags: dark, light, white, black, custom-header, custom-menu Template: twentyeleven */ @import url("../twentyeleven/style.css"); |
This tells WordPress that this is a child theme of Twenty Eleven. You’ll probably want to select a different name and URL for yourself.
Now below that add the CSS below for the menu and save style.css. This is basically the same CSS the original menu uses, but using our new #access2 ID.
Log into your admin, appearance > themes, select your new child theme and check appearance > menus, create and add a new menu to your new menu area.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
/*------------------------------------------------ The second navigation menu ------------------------------------------------*/ #access2 { background: #222; /* Show a solid color for older browsers */ background: -moz-linear-gradient(#252525, #0a0a0a); background: -o-linear-gradient(#252525, #0a0a0a); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */ background: -webkit-linear-gradient(#252525, #0a0a0a); -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; clear: both; display: block; float: left; margin: 0 auto 0; width: 100%; } #access2 div { margin: 0 7.6%; } #access2 ul { font-size: 13px; list-style: none; margin: 0 0 0 -0.8125em; padding-left: 0; } #access2 li { float: left; position: relative; } #access2 a { color: #eee; display: block; line-height: 3.333em; padding: 0 1.2125em; text-decoration: none; } #access2 ul ul { -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2); box-shadow: 0 3px 3px rgba(0,0,0,0.2); display: none; float: left; margin: 0; position: absolute; top: 3.333em; left: 0; width: 188px; z-index: 99999; } #access2 ul ul ul { left: 100%; top: 0; } #access2 ul ul a { background: #f9f9f9; border-bottom: 1px dotted #ddd; color: #444; font-size: 13px; font-weight: normal; height: auto; line-height: 1.4em; padding: 10px 10px; width: 168px; } #access2 li:hover > a, #access2 ul ul :hover > a, #access2 a:focus { background: #efefef; } #access2 li:hover > a, #access2 a:focus { background: #f9f9f9; /* Show a solid color for older browsers */ background: -moz-linear-gradient(#f9f9f9, #e5e5e5); background: -o-linear-gradient(#f9f9f9, #e5e5e5); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */ background: -webkit-linear-gradient(#f9f9f9, #e5e5e5); color: #373737; } #access2 ul li:hover > ul { display: block; } #access2 .current_page_item > a, #access2 .current_page_ancestor > a { font-weight: bold; } |
Here’s the new version of NomNom theme. This version features 3 new 3 column layouts, left and right sidebars, 2 left or 2 right with a 1000px width. A new widget area had to be added for this, on 2 column layouts that widget will display under the primary sidebar widget.
For those who want to show only the top menu, there’s now an option to turn the lower navigation menu on or off, and the menus will work as default on first install (will once again list pages).
The header can now be re-sized from NomNom Options page, you must upload a new image to see the changes. And the last new option is a custom CSS area. You can add any CSS to this without editing stylesheets, it will override the theme default style and will not be overwritten during an upgrade. I’ve also included a link to a new CSS Snippet forum post that I will continue to update.
And one last fix, the options page should display properly in IE.
Please let me know of any issues with the new layouts or anything else.