First : Register the menu

register your menus in your theme’s functions.php file

register_nav_menus( array( $location => $description ) ); 

Real Example

if ( function_exists( 'register_nav_menu' ) ) {
register_nav_menu( 'topnav', 'Top Navigation' );
}

you can register as many custom menus as you want .

Second : Place the menu

Now it’s time to place your menus where you want it to be showed on your theme

<?php wp_nav_menu(); ?>

That’s it , now just play with your wordpress menu designer and have fun

Functions Used : register_nav_menus &  wp_nav_menu

function get_category_link_byname($name) {
	$id = get_cat_ID($name);
	$link = get_category_link( $id );
	echo $link;
}

use this function as follows ,

<?php function get_category_link_byname('categoryname'); ?>

and that’s it , hope you find it useful .

Problem #1

When developing sites using wordpress you may need to create different sidebars maybe just different in content or in style too .

Solution :

We will create two sidebars one for home page , one for pages and one for blog (categories , posts , archives … etc) .

<?php if ( is_front_page() ) {?>
	<div id="home_sidebar">
	...sidebar content.....
	</div>
<?php } /* end home_sidebar */  ?>

<?php if ( is_page() && !is_front_page() ) {?>
	<div id="pages_sidebar">
	...sidebar content.....
	</div>
<?php } /* end pages_sidebar */ ?>

<?php else {?>
	<div id="blog_sidebar">
	...sidebar content.....
	</div>
<?php } /* end blog_sidebar */ ?>

the code above explains itself , we simply created our three sidebars #home_sidebar , #pages_sidebar , #blog_sidebar which will contain different content , we used Wordpress Conditional Tags ( is_front_page() , is_page() ) .

Line 1 : used is_front_page() tag within an if statement in order to display #home_sidebar content only in the front page
Note : there’s a big difference between is_front_page() and is_home()

Line 7 : used is_page() && !is_front_page() within an if statement in order to display the #pages_sidebar within all pages and used && !is_front_page() in order not to show this sidebar within the home page if you using static page as your home page

Line 13 : If not home page or page the #blog_sidebar will be displayed

Problem #2

If you used a premium portfolio or business theme or looking forward developing your own , you’ll notice that those themes looks like they using two wordpress installations , as you’ll find in most of these themes Blog and Portfolio , both with different styling , sidebars and sometimes layout

Solution :

With the power of conditional tags it’s not a problem , we just will create two different parent categories

Blog
> news
> tips
> sub category
Portfolio
> web
> print

<?php if ( is_category('Blog') && in_category('Blog')  ) {?>
	<div id="blog_sidebar">
	...sidebar content.....
	</div>
<?php } /* end blog_sidebar */ ?>

<?php if ( is_category('Portfolio') && in_category('Portfolio')  ) {?>
	<div id="portfolio_sidebar">
	...sidebar content.....
	</div>
<?php } /* end portfolio_sidebar */ ?>

Line 1 : used is_category(’Blog’) && in_category(’Blog’) within if statement to display #blog_sidebar only within category Blog , it’s sub-categories and post pages within the Blog category and it’s sub-categories .

Line 1 : used is_category(’Portfolio’) && in_category(’Portfolio’) within if statement to display #portfolio_sidebar only within category Portfolio , it’s sub-categories and post pages within the Portfolio category and it’s sub-categories .

… solved

I’m going to use some of the wordpress Conditional Tags plus other wordpress functions to create a Breadcrumbs Navigation for wordpress .

Read More about Breadcrumbs and why to use them “Breadcrumb Navigation: Further Investigation of Usage”

Step One

Create a new file within your theme folder and call it breadcrumbs.php or whatever you want

Step Two

In home page we don’t have to show the user the breadcrumbs navigation so we will do this

<?php
	if ( is_home() ){}
	else {
		echo "<div class=\"breadcrumbs\"><ul class=\"breadcrumbs\"> ";
		echo "</ul></div>";
	}
?>

The code above is pretty simple , we used our first Conditional Tag ( is_home() ) within an if – else statement.

is_home() used to check whether the current page is the homepage or not .

We used it here to do nothing when it’s homepage and applying a simple html codes when it’s not homepage .

Step Three

Let’s Add some css styles .

ul.breadcrumbs {
	list-style: none;
	padding: 0;
	margin: 0;
	float: left;
}
ul.breadcrumbs li {
	float: left;
	margin: 0 5px 0 0;
	padding: 0;
}
ul.breadcrumbs li:before {
	content: "\00BB \0020";
}

We simply styled the ul.breadcrumbs menu as a horizontal menu and added right angle quote before every “li” member .

Step Four

The blog name must be added before any thing so we’ve to add it to our code .

<?php
	if ( is_home() ){}
	else {
		echo "<div class=\"breadcrumbs\"><ul class=\"breadcrumbs\"> ";
		echo "<li><a href=\" ".get_settings('home')." \">";
		echo  bloginfo('name')."</a></li>";
		echo "</ul></div>";
	}
?>

In the code above we’ve added the blog name using the wordpress function bloginfo(’name’); within “li” tags and linked it to the blog url using the wordpress function get_settings(’home’) which retrieves the blog link .

Step Five

Output : » Blog Name » Category Name »

Another Output : » Blog Name » Category Name » Sub-Category Name »

We will start our breadcrumbs code in the Category Pages

if ( is_category() ) {
	$cate = single_cat_title("",false);
	$cat = get_cat_ID($cate);
	echo "<li>".(get_category_parents($cat, TRUE," &raquo; "))."</li>";
}

In the code above we used is_category() – Conditional Tag , which checks if the current page is a category one or not , then the code above will only be executed within the category pages .

We can simply print the current category using single_cat_title(); but we won’t as we can have multi-leveled categories so we’ve to show the current category plus it’s parents if there any .

We can get the parents of any category using the get_category_parents(); function , and we will use it , but the problem is the output of the single_cat_title(); is the category name and to get the category parents using the get_category_parents(); function we have to pass it the category ID , so we will use get_cat_ID($cate); function to get the current category ID from the current category name .

Note : single_cat_title(”",false); function’s second argument must be false as we don’t want the function to print the category name by itself we want to use the output within another function without printing it so u’ve to declare the second argument to false .

Step Six

Let’s apply our breadcrumbs to archives , search , 404 error pages .

Output 1: » Blog Name » Archives

Output 2: » Blog Name » Search Results

Output 3: » Blog Name » 404 Not Found

elseif ( is_archive() && !is_category() ) {
	echo "<li>Archives</li>";
}
elseif ( is_search() ) {
	echo "<li>Search Results</li>";
}
elseif ( is_404() ) {
	echo "<li>404 Not Found</li>";
}

Obviously you know what’s the function of the above code , it’s pretty easy code .

We first used is_archive() – Conditional Tag to check if the page is a  archive pages and printing “Archives” if it’s  an Archive page , we also used
&& !is_category() – because category page are also archive pages and we don’t want to print Archives within the category pages so we added && (AND) !(NOT) is_category()

Then we used is_search() – Conditional Tag to check if the page is a search page and printing “Search Results” if it’s a search page .

Then we used is_404() – Conditional Tag to check is the page is a 404 error page and printing “404 Not Found” if it’s a 404 error page .

Step Seven

Let’s apply the breadcrumbs to the single post pages

Output : » Blog Name » Category Name » Post Name

elseif ( is_single() ) {
	$category = get_the_category();
	$category_id = get_cat_ID($category[0]->cat_name);
	$cat_link = get_category_link( $category_id );
	echo "<li><a href=\" ". $cat_link ." \">" . $category[0]->cat_name."</a></li>";
	echo "<li>";
	echo the_title()."</li>";
}

In the code above we used is_single() – Conditional Tag to check if the page is a single post page and printing the category followed by the post name if it’s a single post page.

$category = get_the_category(); To get the category .
$category_id = get_cat_ID($category[0]->cat_name); To get the category ID from the category name ($category[0]->cat_name) , $category[0] that ZERO because we will only get the first category from the categories array (posts may be posted in many categories and we only need  the first) .
$cat_link = get_category_link( $category_id ); To get the category URL .

then we just print the category , followed by the post title using the_title()- wordpress function .

Step Eight

Let’s apply the breadcrumbs to the Pages

Output : » Blog Name » Page Name

Another Output : » Blog Name » Page Name » Sub-Page Name

			elseif ( is_page() ) {

				if ($post->post_parent) {

  					$children = $post->post_title;

  					$parent = get_page($post->post_parent);

  					echo "<li>".$parent->post_title."</li>"."<li>".$children."</li>";
				}
				elseif ( $post->post_parent == 0 ) {

					echo "<li>";

					echo the_title()."</li>";

				}
			}

This is the hard part , as there’s a wordpress function to retrieve page parents . So we wrote some code to retrieve the first page , this will give you the ability to show your breadcrumbs navigation in the second level pages but not in the third level pages as it’ll retrieve the second level page parent only without the first level page parent .

We start our code block with is_page() – Conditional Tag to check if it’s a normal page .

After that we write another if – else statement to check if the current page has a parent and if not we will just print the current page title .

If the current page has a parent :

We store the current page name in the $children variable ( $children = $post->post_title; ) .
Then we use the get_page(); wordpress function to get the parent page and store it in the $parent varialble $parent = get_page($post->post_parent); .

Finally we print the page parent name followed by the page name as shown in line 10 .

				elseif ( $post->post_parent == 0 ) {

					echo "<li>";

					echo the_title()."</li>";

				}

The code above means if there’s no page parent just print the title of the page .

The Complete Code

	<?php
	/*
		Wordpress Breadcrumbs code by Banhawi.com

	*/

		if ( is_home() ){}

		else {

			echo "<div class=\"breadcrumbs\"><ul class=\"breadcrumbs\"> ";

			echo "<li><a href=\" ".get_settings('home')." \">";
			echo  bloginfo('name')."</a></li>";

			if ( is_category() ) {
				$cate = single_cat_title("",false);
				$cat = get_cat_ID($cate);
				echo "<li>".(get_category_parents($cat, TRUE," &raquo; "))."</li>";
			}
			elseif ( is_archive() && !is_category() ) {
				echo "<li>Archives</li>";
			}
			elseif ( is_search() ) {
				echo "<li>Search Results</li>";
			}
			elseif ( is_404() ) {
				echo "<li>404 Not Found</li>";
			}
			elseif ( is_single() ) {
				$category = get_the_category();
				$category_id = get_cat_ID($category[0]->cat_name);
				$cat_link = get_category_link( $category_id );
				echo "<li>".(get_category_parents($category, TRUE,""))."</li>";
				echo "<li><a href=\" ". $cat_link ." \">" . $category[0]->cat_name."</a></li>";
				echo "<li>";
				echo the_title()."</li>";
			}
			elseif ( is_page() ) {

				if ($post->post_parent) {

  					$children = $post->post_title;

  					$parent = get_page($post->post_parent);

  					echo "<li>".$parent->post_title."</li>"."<li>".$children."</li>";
				}
				elseif ( $post->post_parent == 0 ) {

					echo "<li>";

					echo the_title()."</li>";

				}
			}

			echo "</ul></div>";
		}
	?>

For search result page , you can display the search query instead of “Search Results” just use this code

			elseif ( is_search() ) {
				echo "<li>".the_search_query()."</li>";
			}

Finally

Just use the include function to include the breadcrumbs script any where in your theme .

	<?php include (TEMPLATEPATH . '/breadcrumbs.php'); ?>

Step One

Let’s start writing our markup .

<html>
	<head>
		<title>JS Effect</title>
	</head>
	<body>
		<ul>
			<li><a href="#"><img src="images/products.jpg" alt=""/></a></li>
			<li><a href="#"><img src="images/history.jpg" alt=""/></a></li>
			<li><a href="#"><img src="images/news.jpg" alt=""/></a></li>
			<li><a href="#"><img src="images/urideas.jpg" alt=""/></a></li>
		</ul>
	</body>
</html>

As you see in the code above it’s just a normal html page containing a ul menu with four “li” members , each li containing linked image . Pretty simple is not it ?

Step Two

Let’s write our CSS

			ul li {
				list-style-type: none;
				width: 125px;
				height: 100px;
				margin-right: 10px;
				float: left;
				overflow: hidden;
			}
			a img {
				border: 0;
			}

The code above is pretty simple we just styled all “li” members and removed the border from linked images .

Step Three

Import the jQuery library , simply add this line in within the <head> </head> tags in your HTML .

<script src="http://code.jquery.com/jquery-latest.js"></script>

Step Four

This tells the browser to run the functions within the { } when the html document is ready .

$(document).ready(function(){

});

Step Five

$(document).ready(function(){
	$("li").mouseover(function(){
		$("li").animate({ width: "100px"}, 500 );
		$(this).animate({ width: "200px"}, 500 );
	});
});

In the code above we used the mouseover event , which means the function that follows $(”li”).mouseover will be executed only when you hover on one of the “li” members .

Then we use the animate effect $(”li”).animate({ width: “100px”}, 500 ); this means animate all “li” members using the following css properties which is width:”100px” .

After adding your new css properties you define the speed of the animation which is 500 here , you can add your own speed or you can use slow , normal , fast instead of numbers.

This will animate the “li” members from width 125px predefined in the css to the new 100px width with speed of 500 milliseconds .

$(this).animate({ width: “200px”}, 500 ); – $(this) means animate the hovered “li” member to width 200px with the speed of 500 milliseconds .

Finally we close the mouseover event }); .

If you tested the code we have done so far you’ll notice that the “li” members first animate to the width of 100px then the hovered one animates to the width of 200px , and this is not good as it may cause a problem when changing the width of the “li” members to 100px the cursor may hover on another “li” member which will cause animating another “li” member , we can fix this by adding different css classes to the “li” members when hovered and when not .

so Let’s Edit the html .

Step Six

<ul>
	<li class="inactive"><a href="#"><img src="images/products.jpg" alt=""/></a></li>
	<li class="inactive"><a href="#"><img src="images/history.jpg" alt=""/></a></li>
	<li class="inactive"><a href="#"><img src="images/news.jpg" alt=""/></a></li>
	<li class="inactive"><a href="#"><img src="images/urideas.jpg" alt=""/></a></li>
</ul>

Here we have added class=”inactive” to all “li” members .

Step Seven

Now we have defined all un hovered “li” members with inactive class , jQuery give us the ability to add css classes using the Attribute addClass and removing css classes using the Attribute removeClass , we will use these Attributes in the next code .

$(document).ready(function(){
	$("li").mouseover(function(){
		$(this).removeClass("inactive");
		$(this).addClass("active");
		$("li.active").animate({ width: "200px"}, 500 );
		$("li.inactive").animate({ width: "100px"}, 500 );
	});
});

First and second line we explained before .

Third line $(this).removeClass(”inactive”); mean remove “inactive” css class from hovered “li” member .

Fourth line $(this).addClass(”active”); mean add “active” css class to hovered “li” member .

Fifth line $(”li.active”).animate({ width: “200px”}, 500 ); animates the active hovered “li” member to the new 200px width with speed of 500 millisecond.

Sixth line $(”li.inactive”).animate({ width: “100px”}, 500 ); animates the inactive unhovered “li” member to the new 100px width with speed of 500 millisecond .

Then we close our events .

Step Eight

Approximately we are done , but there’s a problem which is when we hover on one of the “li” it animates to the new width of 200px and the other unhovered “li” members to the new 100px width and this is not good because when take the cursor away of the “li” member , all the “li” members stay with new widths , we want them animate back to the original widths when we take the cursor away of the “li” members , so we have to write the next code after $(”li”).mouseover(function(){ … });

$("li").mouseout(function(){
	$(this).removeClass("active");
	$(this).addClass("inactive");
	$("li").animate({ width: "125px"}, 500 );
});

In the above code we used a new event called mouseout which mean do the involved function when taking the cursor away of “li” member .

Second line $(this).removeClass(”active”); means remove the “active” css class from the was hovered “li” member .

Third line $(this).addClass(”inactive”); means add the “inactive” css class to the was hovered “li” member .

Fourth line $(”li”).animate({ width: “125px”}, 500 ); animates all the “li” members to the original width of 125px with the speed of 500 milliseconds .

After that we close the mouseout event .

Extra Step

Be creative , we’ve created so far just a width expanding ul menu , you can add height to the animate effect function and your ul menu will expand in both dimensions .
Here’s will be the new jquery code

  		$(document).ready(function(){
    		$("li").mouseover(function(){
   				$(this).removeClass("inactive");
   				$(this).addClass("active");
        		$("li.active").animate({ width: "200px",height: "120px"}, 500 );
      			$("li.inactive").animate({ width: "100px",height: "100px"}, 500 );
      		});
      		$("li").mouseout(function(){
    			$(this).removeClass("active");
   				$(this).addClass("inactive");
      			$("li").animate({ width: "125px",height: "100px"}, 500 );
    		});
  		});

Read More

• http://docs.jquery.com/Events/
• http://docs.jquery.com/Attributes/
• http://docs.jquery.com/API/1.3/Effects
]]> http://banhawi.com/2009/06/create-your-own-kwicks-jquery-effect/feed/ 17