theDailyTut | Once a day. Every day. http://thedailytut.com Your daily check-up to have a neck-up in a post-Web 2.0 world. Wed, 20 Aug 2008 15:09:37 +0000 http://wordpress.org/?v=2.5.1 en An Image Wordpress Navigation with Hover and Active Links http://thedailytut.com/wordpress/a-wordpress-image-navigation-with-hover-and-active-links http://thedailytut.com/wordpress/a-wordpress-image-navigation-with-hover-and-active-links#comments Mon, 07 Jul 2008 16:00:31 +0000 Tommy M http://thedailytut.com/?p=4 Wordpress has some great functions to display a menu to the user (list_cats(), wp_list_pages(), etc.) but no straightforward way to incorporate images into these menus.

In this tutorial I’ll show you how to use your own image menu, apply a highlighting effect, and top it off with an active state as well.

1. Cut Up Menu

Go ahead and open up Photoshop and make a great looking menu. Then we’re going to slice n’ dice. I’ll walk you through this real quick. Click on the images below if you want a bigger picture of what I’m doing in Photoshop.

Wordpress Menu

Cut each individual image link from your menu. Second, press CRTL + N and a new window dialog will open up with the sizes of the cut you just made. Hit “OK”.

Wordpress Menu

Then paste our cut image to the new image window just created and save it within the “images” folder of your theme.

Wordpress Menu

2. Create Categories

If you’re starting from a fresh install of Wordpress, then you’ll need to go ahead and create the categories that you’ll be using as links for your navigation. Note: Make sure your “Category Slug” does not contain any spaces.

3. Modify header.php

For this example, the header.php will contain your menu. Let me give you the code and explain each part.

Place the follwing directly above your <body> tag:

<?php
if (is_home()) {
    $show_category = '';
    } else {
        $category = get_the_category(); 
        $show_category = ' id="'.$category[0]->cat_name.'"';
    }
?>

The first thing we hit is the IF statement. This asks if the page we’re currently viewing is the home page; if TRUE, then go ahead and assign an empty string value to $show_category. If the answer is FALSE, then we retrieve the current category we’re viewing by using get_the_category(). This retrieves an array of categories, since you can put an article in more than one category. However, we only want to retrieve the first category in this array, so we retrieve the first category ($category[0]) and grab its name (cat_name). We get the $show_category string ready with the required CSS properties and we’re ready to go. (If the cat_name is ‘XHTML’, then $show_category is id=”XHTML”.

<body<?php echo $show_category; ?>>

Next we have our modify our current body tag to echo the value given to use from the operation above. If we’re currently on the home page, then $show_category = ”, thus the output will be simply <body>. However, if we are viewing a category post, then it will look like <body id=”category_name_here”>.

We modified the $show_category string to include the CSS properties as opposed to included them later to maintain XHTML compliance. If we did not include the CSS properties and instead made ourtag look like <body id=”<?php echo$show_category; ?>>, then the homepage tag would look be <body id=”">.

Repalce current menu list with the following:

<div id="menu">
    <ul>
	<li><a class="xhtml-css" href="/category/xhtml-css"><span>xhtml-css</span></a></li>
 
	<li><a class="php-mysql" href="/category/php-mysql"><span>php-mysql</span></a></li>
 
	<li><a class="ajax" href="/category/ajax"><span>ajax</span></a></li>
 
	<li><a class="wordpress" href="/category/wordpress"><span>wordpress</span></a></li>
 
	<li><a class="joomla" href="/category/joomla"><span>joomla</span></a></li>
 
	<li><a class="other" href="/category/other/"><span>other</span></a></li>
    </ul>
</div>

Here I have a simple unordered list (<ul>) with each list-item (<li>) linking to its corresponding category archive. Each list-item containing its own unique class property. The category “xhtml-css” will be defined as li .xhtml-css in our CSS template. I added an addition <span> tag within each list-item for added SEO. We’re going to hide the text within the <span> tag later and instead show our image based navigation.

4. Modify CSS

Now for the fun part: giving our menu some shape.

#menu {
    display: block;
    width: 672px;
    float: left;
    background: #fff;
}

This just defines the container (<div id=”menu”>) that’s holding our menu.

#menu ul {
    margin: 1px;
    height: 20px;
    padding: 0;
}

This gives our unordered list some shape.

#menu li {
    list-style: none;
    display: inline;
}

We have to add the list-style:none to make those bullets go away, and finally we want each list-item to display in a line. So, naturally, we say display:inline.

#menu li a {
    margin: 2px 4px;
    padding: 0;
    display: block;
    float: left;
}

Again, simply making each link in our menu a block, and having it float left. The margin simply gives it spacing from the other blocks.

#menu a span {
    position: relative;
    display: block;
    z-index: -1;
}

Remember that <span> tag we added to each <li> above? By making the “z-index: -1″ here we make the text appear behind the content of the website, but still readable to screen readers and crawlers. This makes it so that search engines like Google can read your links while the average user only sees the image for that link. Some developers suggest using “display:none”, but Microsoft’s web crawler has a problem with this method.

li .xhtml-css {
    background: url(images/xhtml-css.gif) 0 0 no-repeat;
    display: block;
    width: 109px;
    height: 20px;
    outline: none;
}


Note: The image above should help you understand
how the “background-position” property works.

Here is where we display our image for the “xhtml-css” category. We named the image for this link “xhtml-css.gif” and stored it inside the theme’s image folder. We set trailing “0 0″ after background: url(images/xhtml-css.gif) to give the image the position 0 pixels from the left and 0 pixels from the top (basically, it stays where it is). We also define “outline: none;” so that pesky dotted outline won’t appear around each image when you click it.

li .xhtml-css:hover {
    background-position: 0 -20px;
}

This overrides the background: url(images/xhtml-css.gif) 0 0 no-repeat; and instead moves the image down 20 pixels to display the gray hover effect.

#xhtml-css li .xhtml-css {
    background-position: 0 -40px !important;
}

This looks very similar to the one above, but is slightly different. We added the ID (#) in before each class tag. The reason is that because the ID is being given to us from the <body id=”xhtml-css”> tag. For example, we are viewing the “xhtml-css” category. Using the operation is part 1, we made the <body> tag have the id “xhtml-css”, thus giving us <body id=” xhtml-css”>. In CSS form this looks like body #xhtml-css. We use our body ID (#xhtml-css), then add our list-item (#xhtml-css li), and lastly the class for that list-item (#xhtml-css li . xhtml-css).

Lastly, since we want to apply the same hover effect to each link (php-mysql, ajax, wordpress, Joomla and other categories) we simply add a coma and the next list-item.

li .xhtml-css:hover, li .php-mysql:hover, li .ajax:hover, li .joomla:hover , li .other:hover, li .wordpress:hover {
    background-position: 0 -20px;
}

We want to do the same for an active link.

#xhtml-css li .xhtml-css, #php-mysql li .php-mysql, #ajax li .ajax, #joomla li .joomla,
#other li .other, #wordpress li .wordpress {
    background-position: 0 -40px !important;
}

Other Modifications

If you have an article stored in mutliple categories, and you want each category link to be displayed as “active” when you are on that link, then we have to make a small modification to the code in section 2 (Modify your header.php):

<?php
foreach((get_the_category()) as $category) { 
    echo ' class="' . $category->cat_name . '"'; 
} 
?>

We replace the preview code with a “foreach” loop. What this does is it grabs all the categories that are currently active (any article that is being display that is filed under multiple categories), grabs the name of that category, and stores it to $show_category. For example, if we were viewing a category filed under “category1″ and “category2″, $show_category would be class="body-category1" class="body-category2". This makes it so the navigation would display the “active” image effect for those two category menu items.

Also note that I added “body-” within the class property. If we did not, then we would have two classes named “xhtml-css” when you viewed an article filed under “xhtml-css”. This is because we would have the body tag look something like <body class=”xhtml-css”> and the list-tem for that category be <li class=”xhtml-css”> which would shatter web standards. So, in order to complete this change, we’ll modify our “active” CSS properties to look something like this:

.body-xhtml-css li .xhtml-css, .body-php-mysql li .php-mysql, .body-ajax li .ajax, .body-joomla li .joomla , .body-other li .other, .body-wordpress li .wordpress {
    background-position: 0 -20px !important;
}

Conclusion

Adding an image-based navigation to Wordpress is not as hard as it seems. Using simple images is a great way to have your menu stand out from the rest of the site. Just don’t make it too flashy:-)

Hope your enjoyed this original tutorial! Feedback and questions are welcome in the comments below.

]]> http://thedailytut.com/wordpress/a-wordpress-image-navigation-with-hover-and-active-links/feed theDailyTut Offical Beta Launch! http://thedailytut.com/other/thedailytut-offical-beta-launch http://thedailytut.com/other/thedailytut-offical-beta-launch#comments Thu, 03 Jul 2008 05:07:20 +0000 Tommy M http://thedailytut.com/?p=3 Welcome to theDailyTut.com Beta! This website is the aftereffect of an idea that spawned on me two days ago after viewing a tutorial website. I saw the problem was that my homepage (this tutorial website that I speak of) was updated maybe once every two or three days. I was never exactly sure when it was updated. I had enough rss feeds to look after, so I decided to create a website where you, the inspired web designer/developer, can know for certain that a tutorial will be posted daily regarding xhtml, css, php, mysql, ajax, javascript, rails, cms, and other web technologies.

Starting tomorrow July 6th, I will post a tutorial a day (plus a bit more to make up for lost time), every day, 7 days a week, 365 days a year.

We are looking for contributors!

If you are interested in being part of a top-notch team of web designers and developers, that have an influencial and descriptive way with words, then shoot us an email at contribute@thedailytut.com.

Each contributor is given a profit share of the amount of revenue the site generates. For example, if the website generates $500.00/month and there are 5 contributors for that month, then each contributor receives $100.00 for that month. Each contributor will have to make a reasonable amount of original tutorial updates him(her)self and/or gather freely distributed tutorials with the original link provided. This profit-sharing plan Should hopefully take into effect August 2008. Make sense? Let’s get started.

If you have any ideas, comments, questions or feedback, feel free to reply below.

Sincerely,

theDailyTut.com Team

]]> http://thedailytut.com/other/thedailytut-offical-beta-launch/feed