Author: Admin

WordPress Tip: How To Exclude Pages From wp_nav_menu Function

WordPress Tip: How To Exclude Pages From wp_nav_menu Function

In this tutorial, I will show you how to exclude certain pages from the navigation menu when using the wp_nav_menu() function in WordPress. The wp_nav_menu() function is usually located in the header.php file in your theme´s folder.

To my surprise, I discovered that the wp_nav_menu() does not contain “exclude” as one of its parameters. So in this case, how to prevent certain pages from showing up in the menu?

The wp_nav_menu() purpose is to display the navigation menu created in WordPress dashboard in Appearance › Menus panel if a menu is set there, and with a fall back scenario if it is not.

How to exclude pages that you don´t want to show in the Navigation Menu? This is where this tutorial helps. This tutorial applies to any WordPress theme that uses the wp_nav_menu() function.

Real Example | WordPress Twenty Eleven Theme

To give you an example. One of the popular WordPress themes is Twenty Eleven.

Below is the original code of the header.php file of the Twenty Eleven theme (Version 1.3). Many unrelated sections of the code are removed for brevity.

CODE-x: Original header.php File :: Twenty Eleven Theme (Version 1.3)

Note: To scroll within the code, you can also click on the code window and use your keyboard´s arrow keys.

<?php
/**
 * The Header for our theme.
 * Displays all of the <head> section and everything up till <div id="main">
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?>
 
<!-- CODE REMOVED FOR BREVITY, by Boutros AbiChedid. -->
 
<?php /* Our navigation menu.  If one isn&acute;t filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
 
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
                         
<!-- CODE REMOVED FOR BREVITY, by Boutros AbiChedid. -->
 
<div id="main">

CODE-x Notes:

For the purpose of this tutorial, the most important statement is line 15 of CODE-x.

The wp_nav_menu() works on WordPress 3.0 and above. I hope you will always upgrade to the latest version.

Also WordPress Twenty Ten theme (Version 1.3) uses the same wp_nav_menu() function but with different arguments. More on that later.

Code Reference: wp_nav_menu()

Result of Twenty Eleven Theme Using CODE-x

The image below, shows how the Menu appear for this Blog when I use the Twenty Eleven theme without any modifications to the wp_nav_menu():

But, I don´t Want to Show Certain Pages in the Menu. What Should I do?

To exclude certain pages from the navigation menu, you need to add the “exclude” argument to the wp_nav_menu() function as shown in the code below. This works, even though the exclude parameter is not one of the parameters listed in wp_nav_menu() function.

You have the option to exclude pages from your Menu, by changing line 15 of CODE-x. For instance, I wanted to exclude 3 pages from the menu; thus I replaced line 15 of CODE-x with the following line (Line-xM).

Line-xM

//Replace line 15 of <em>CODE-x</em> with the following line:
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'exclude' => '859,889,1031') ); ?>

Note: The numbers 859, 889 and 1031, are separated by commas, and are 3 page IDs on this blog, you need to replace these numbers with yours. If you don´t know how to find the Page ID, read my previous tutorial on How To Find the Page ID.

Result of Twenty Eleven Theme When Using Line-xM

The image below, shows how the Menu appear for this Blog when I use the Twenty Eleven theme when modifying the wp_nav_menu() (using Line-xM):

If you want to exclude just one page from the Menu, then replace line 15 of CODE-x with the following line:

//Replace line 15 of <em>CODE-x</em> with the following line:
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'exclude' => '859') ); ?>

I am Using WordPress Twenty Ten Theme. Can you Help me With That?

Sure I can! Open the header.php file located in your theme´s folder and find the wp_nav_menu function. For instance for Version 1.3 of Twenty Ten theme, the statement that you will be replacing is line 12 of the following code:

CODE-y: Original header.php File :: Twenty Ten Theme (Version 1.3)

<?php
/**
 * The Header for our theme.
 * Displays all of the <head> section and everything up till <div id="main">
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
?>
 
<!-- CODE REMOVED FOR BREVITY, by Boutros AbiChedid. -->
 
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

 
<div id="main">

Depending of what you need to do: You have the option to exclude pages from your Menu, by changing line 12 of the CODE-y. For instance, I wanted to exclude 3 pages from the menu, then I replaced line 12 of CODE-y with the following line:

//Replace line 12 of <em>CODE-y</em> with the following line:
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary',  'exclude' => '859,889,1031')); ?>

Note: The numbers 859, 889 and 1031, are separated by commas, and are 3 page IDs on this blog, you need to replace these numbers with yours.

If you want to exclude just one page from the Menu, then replace line 12 of CODE-y with the following line

//Replace line 12 of <em>CODE-y</em> with the following line:

//Replace line 12 of <em>CODE-y</em> with the following line:
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary',  'exclude' => '859')); ?>

Note: The number 859 is a page ID on this blog, you need to replace this number with yours. If you don´t know how to find the Page ID, read this tutorial on How To Find the Page ID.

Your Turn to Talk

Now you know what to do if you want to exclude certain pages from the wp_nav_menu() output. If your theme is using the wp_nav_menu() function and you don´t want certain pages from showing up in your menu, you know what to do.

This tutorial applies to any WordPress theme that uses the wp_nav_menu() function to display the navigation menu. The exclude parameter can still be used, even though it is not listed as one of the parameters in the WordPress Codex.

7 Creative and Remarkable Website Footers Design for Inspiration

Designing creative footer design is sophisticated and complex process in order to make the Website design as successful and efficient as possible. Although the footer of a Website always appears at the last of the web page, it can´t be neglected.

Effective footer design can help creating an impressive and long-lasting impression. Hence, a well-managed and designed footer can certainly grab visitor´s attention towards your website.

In this post, we are going to present the most innovative and stunning examples of websites, showcasing their inspiration and powerful footer designs. These designs can prove how effectively website footer utilizes and provides an extra bit in order to enhance the user´s experience.

43 folders

This footer design is creative to reach to the next level, not having professional look with complete information. It combines different aspects of web design, but the problem there is no contact detail available on site. The contact link at the footer directs you to another page in another website. This approach can frustrates visitors. Therefore, you need to work better on footer design.

Mecannical

Wow! This is an outstanding and creative footer design for those who love funny things. Contact and feedback option is also available with a send button. In the right side of footer, some links like home, testimonial, about, portfolio appear. This footer design is creative design, but not professional.

Seesparkbox

This website provides two different versions of footer design: a shorter and longer versions. You can switch with the help of single click to see the big view of footer.

Green Woods Country Club

This is cool design with green background, reddish and white font color of content. The negative thing with that site is: there are no sitemap, phone number or other essential links at the footer. You need to do some hard work with the footer design to make it effective and innovative.

Carsonified

This is another unique way to separate the footer of web page from the rest of the design. Black color background is used for the complete web page. The contact information and address is also available with links. As a developer, these types of designs are not in demand.

Meomi

The footer design of Meomi website can attract kids and cartoon website designers. All the information is incorporated on this page in a well-organized way like content, images, layout for children.

Bristol Archive Records

This footer is visually alluring to attract visitors and provide valuable information with the help of links.

Your Turn to Talk

What do you think about these 7 Creative Website Footers? hopefully, you liked this amazing collection of footer design. Do you have other Website footer designs you like?