Extend the TwentyEleven Navigation with your Social Icons

TwentyEleven Screenshot

In this little tutorial we show how to add in the navigation of the TwentyEleven Theme our RSS Feed, a link with icons to our Twitter page and to our Facebook profile. Without writing a single line of PHP code. You are able to accomplish this with the WordPress Menu.

First we go in the backend to Design-> Menu and activate the CSS Classes. Therefore we click on “Screen Options” on the very top right corner. And unter “Show advanced menu properties” you check the box for “CSS Classes” and close the Screen Options.

WordPress menu screen options

After that we use the “Custom Links” to create the menu entries. We add the addresses to our RSS Feed, Facebook and Twitter and add them to the menu. There we assign the 3 menu entries to the CSS Classes. RSS Feed has the class rss, Twitter the class twitter and Facebook facebook. Don’t forget to save.

WordPress Menu

I prepared a sprite, which you can download with a right mouse click->Save Image As… . You have to save this sprite into the folder twentyeleven/images/.

Social Sprite

Then we open the file TwentyEleven style.css with a text editor and add at the end of the Menu block #access our additional CSS. We do not have much to add. We let our 3 list items float to the right, push the text out of view and position the graphic. Only for the hover, focus and active states, we must define a little tricky CSS rule in order to circumvent the background gradients of TwentyEleven.

#access .twitter, #access .rss, #access .facebook {
	float: right;
#access .twitter a, #access .rss a, #access .facebook a {
	background: transparent url(images/social-sprite.png) 0 0 no-repeat;
	padding: 0;
	text-indent: -9999px;
	width: 70px;
#access .rss a { background-position: 0 0; }
#access .facebook a { background-position: 0 -96px; }
#access .twitter a { background-position: 0 -48px; }
#access .rss a:hover, #access .rss a:focus, #access .rss a:active {
	background: transparent url(images/social-sprite.png) 0 -144px no-repeat;
#access .twitter a:hover, #access .twitter a:focus, #access .twitter a:active {
	background: transparent url(images/social-sprite.png) 0 -192px no-repeat;
#access .facebook a:hover, #access .facebook a:focus, #access .facebook a:active {
	background: transparent url(images/social-sprite.png) 0 -240px no-repeat;

This is just an example to experiment. Add your Google+ profile and expand this example with cool CSS tricks!

Control WordPress Nav Menu via Custom Fields

WordPress 3.0 also includes the menus, in addition to a number of other new features. Normally you generate a menu automatically by creating pages, but under Appereance / Menus you can create your own menu and assign a place where it replaces the normal menu.

But whoever currently uses WordPress as a CMS and blog (like me) may now have a problem: If you look at the blog you should be able to see the normal pages in the navigation, but if you then select a page with many subpages it would be nice if the subpages were listed in the menu bar as well as listing only one entry “Blog” which brings you back to the blog page.

Conveniently, WordPress already includes everything you need to put together this idea. They are on the one hand of course the aforementioned menus, and on the other side there are Custom Fields. If you have not hidden, you can find at every post and every page an editor where you can enter meta data. Via this meta data and with the help of a small code snippet you can control what is displayed in the menu.

You can put the code snippet in your functions.php of your Theme or in a Plugin.

//Filter the arguments for the wp_nav_menu_function to include a custom menu on pages.
function nr_2010_wp_nav_menu_args($args = '')
	if ( is_page() ) //custom menus only on sites
		global $post;

		$menu_name = get_post_meta($post->ID, 'menu_name', true);

		if( !empty($menu_name) && is_nav_menu($menu_name) )
			$args['menu'] = $menu_name;
	return $args;
add_filter( 'wp_nav_menu_args', 'nr_2010_wp_nav_menu_args' );

This code puts a filter on wp_nav_menu_args, these are the parameters of the function wp_nav_menu, which the Theme uses to output the menus.

As long as we are on a page (is_page()) the custom field menu_name will be used. If it’s not empty and it has a menu with this name, the paramaters of this call will be modified, so it shows the right menu.

Only one thing left: Provide the correct meta data to the pages and create the corresponding menus. The menu editor is very intuitive, it shouldn’t be a problem. Just a hint: It doesn’t save automatically. 😉

Guest Post

This post was written by Niklas Rother – niklas-rother.de and is a post in our Advent Calendar Series on WP Engineer about WordPress.
Thank you very much from my part to Niklas.
If you also like to have your interesting post published on our website, please let us know on our contact page. Of course we will appreciate your contribution!

List Posts by Category In Navigation

WordPress is primarily a blog platform. Not infrequently it is used as a CMS. But not just static pages play a role, but also posts, because they are giving more opportunities, having better performance and be published in feeds. Therefore, I prefer to use, in the context of WP as a CMS, posts more than the static pages. From time to time are the wishes of a navigation layout very extra odinary. And so was it in my recent project, the requirement to list the posts from each category in the navigation.
This is unusual as in the long run, you will have many posts, and the navigation will be very confusing – still, in this project it made sense, since we won’t have many posts.

The small function lists the category and below the posts. There is a parameter that restricts the output of the posts, so that in extreme cases, not too many will be listed, only the last posts – $mylimit. The value -1 for this parameter provides all posts. The function itself belongs to the functions.php of the theme or in a Plugin. An exemplary use can be found below the function.
Continue reading …

Adding A Private Page Into The Navigation

WordPress Themes

If you use pages which have the state private, they will not be shown in the navigation. Nevertheless it can make sense to show this specific page in the navigation, if you want to provide easy access to this page for your users. The page should only appear to privileged users for sure. I will show you a little hack, which will let you exactly do this.

Continue reading …