Add the following to your functions.php file. The 2 menus we are creating are the “Primary”, and “Secondary” menus.

//Register Navigations
add_action( 'init', 'my_custom_menus' );
function my_custom_menus() {
    register_nav_menus(
        array(
            'primary-menu' => __( 'Primary Menu' ),
            'secondary-menu' => __( 'Secondary Menu' )
        )
    );
}

To add them to your site you need to add the following to your WordPress template files (most likely your header.php and footer.php files). I also added the code which allows you to change the CSS class for the nav bars.

<?php wp_nav_menu (array('theme_location' => 'primary-menu','menu_class' => 'nav'));?>
<?php wp_nav_menu (array('theme_location' => 'secondary-menu','menu_class' => 'nav'));?>

]]> http://webdesignandsuch.com/how-to-register-multiple-custom-menus-in-wordpress/feed/ 0 http://webdesignandsuch.com/redirect-to-a-mobile-site-with-htaccess-and-set-a-cookie-to-break-redirect/ http://webdesignandsuch.com/redirect-to-a-mobile-site-with-htaccess-and-set-a-cookie-to-break-redirect/#comments Sat, 14 Jan 2012 17:50:37 +0000 mike ilz http://webdesignandsuch.com/?p=3341 Recently mobile websites have become extremely popular and important in the web development world. The days of people having crappy flip phones with no internet or javascript are over. People have quality phones now, so having a mobile optimized website is no longer a luxury but a necessity.

If you’re looking into developing a mobile website for your business or for your client make sure to checkout my mobile website and theme pack “emdot”, available exclusively on ThemeForest. For only $9 you get a fully functioning mobile site with 12 different themes, a validating contact form, a portfolio with mobile touch, an “add to home bubble” for iPhones and iPads, 50+ icons for the navigation, 20 social media icons, and a bunch more. Simply pop in your content and you’re ready to go. Well almost ready to go, the last thing you’re going to need is to redirect people to your new mobile website.

Redirecting people to your mobile website is easy enough by using a .htaccess file. Basically you say “if people visiting my website are on a mobile device send them to http://m.example.com, and if they aren’t on a mobile device send them to http://example.com”. This of course assumes that you setup a subdomain located at “m.example.com”.

After setting this up for a client I realized one problem with this. When setting up your mobile website you should have a link in the footer allowing the user to visit your full website (you most likely have some content on your full website that you don’t have on your mobile website). Your link would look something like this:

<a href="http://example.com">Visit full site</a>

Easy enough, except for one thing.. we redirected the users from the main site to the mobile site. So if they click the “visit full site” link they will be redirected back to the mobile site again.

The solution is to set a cookie which allows you to visit the full site without being redirected. Setting the cookie allows you to go from the mobile site to the full site, and visit any page on the full site once you’re there without being redirected back to the mobile site.

Step 1.

Setup your mobile site at http://m.example.com

Step 2.

Add the following link to your mobile site:

<a href="http://www.example.com?m=0">Full Website</a>

*If you’re using jQuery mobile (such as the emdot theme), you may need to add rel=”external” to your link, like this:

<a rel="external" href="http://www.example.com?m=0">Full Website</a>

Step 3.

Create a .htaccess file (which is just a regular file such as a .txt files renamed .htaccess). Add the following code and replace the 2 domain names. Upload the file to the root of your website. If you already have a .htaccess file simply add this code to the existing file.

*Notes: Make sure you don’t overwrite your existing .htaccess file by accident. This only works on Apache servers.

RewriteEngine on
RewriteBase /

# Check if this is the noredirect query string
RewriteCond %{QUERY_STRING} (^|&)m=0(&|$)
# Set a cookie, and skip the next rule
RewriteRule ^ - [CO=mredir:0:www.example.com]

RewriteCond %{HTTP:x-wap-profile} !^$ [OR]
RewriteCond %{HTTP:Profile}       !^$ [OR]
RewriteCond %{HTTP_USER_AGENT} "acs|alav|alca|amoi|audi|aste|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT}  "maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|opwv" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "palm|pana|pant|pdxg|phil|play|pluc|port|prox|qtek|qwap|sage|sams|sany" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|w3cs|wap-|wapa|wapi" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "wapp|wapr|webc|winw|winw|xda|xda-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "up.browser|up.link|windowssce|iemobile|mini|mmp" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "symbian|midp|wap|phone|pocket|mobile|pda|psp" [NC]
RewriteCond %{HTTP_USER_AGENT} !macintosh [NC]

# Check if we're not already on the mobile site
RewriteCond %{HTTP_HOST}          !^m\.
# Can not read and write cookie in same request, must duplicate condition
RewriteCond %{QUERY_STRING} !(^|&)m=0(&|$) 

# Check to make sure we haven't set the cookie before
RewriteCond %{HTTP_COOKIE}        !^.*mredir=0.*$ [NC]

# Now redirect to the mobile site
RewriteRule ^ http://m.example.com [R,L]

Credit. I tried a few different scripts to find a solution that worked for me, and the above script was the winner. The original script came from this thread on Stack Overflow.

The idea of creating responsive websites for real world business websites raises a few questions. The main question many designers and developers had (including myself) was “What about image galleries and sliders?”. Most websites have moved away from Flash in the last few years, many Flash animations being replaced by jQuery sliders. So how do you deal with a slider when developing a responsive website? Until now that left most people scratching their heads, but recently there have been some great responsive image sliders, galleries and plugins released.. so let me introduce my roundup of the 10 best responsive image sliders and galleries you can use on your website today(in no special order).. enjoy!

1. FlexSlider

2. Blueberry

3. Responsive Image Gallery

4. Responsive jQuery Slideshow

5. UnoSlider

6. Elastislide

7. Photoswipe

8. Responsive jQuery Carousel

9. Seamless Responsive Photo Grid

10. responsive thumbnail image gallery plugin

Here are 10 great looking WordCamp website designs:

1. SF.wordcamp.org

2. Kobe2011.wordcamp.jp

3. Capetown.wordcamp.org

4. WordcampMidAtlantic.com

5. WordcampSeattle.org

6. WCkansascity.or

7. Atlantawordcamp.com

8. OC.wordcamp.org

9. Sandiego.wordcamp.org

10.WordcampJerusalem.com

The Idea

What I decided to create was a transparent image overlay when hovered on. So when you hover over the image you would see a magnifying glass icon over a transparent black background. This would make it easy for the user to see where they are on the page. Another reason this method is better than simply changing the border color is that the magnifying glass gives an indication that the image will zoom in or expand when clicked on. I’ve create two ways of accomplishing this effect, one used jQuery, and the other uses only CSS3.

The Solution

Both methods use similar techniques, the only difference is weather they use jQuery or CSS for fading the opcaity. There is an image wrapped in a link. Inside of this link there is a span element. By setting the span to display block, setting the width and height of the span, and setting a higher z-index than the image; the span element covers the image. By setting the background image and color the span element hides the original image. Setting the opacity to zero on the span element allows the thumbnail image to be seen. To create the overlay effect we simply change the opacity of the span element to 70% (or whatever you want to use for your project). One method uses jQuery to apply this opacity, the other method uses CSS3 transitions and opacity settings.

Check out the demo, and grab the free download.

jQuery Method

The jQuery method is cross browser safe, and unlike the CSS3 method fades the magnifying glass both in AND out. This method uses jQuery to set the opacity of the span element when hovered over. Here is the HTML for this method:

<a class="image"  href="#">
	<span class="roll" ></span>
	<img class="imgborder" alt="" src="images/pic.jpg">
</a>

Here is the CSS for this method:

span.roll {
	background:url(images/mag.png) center center no-repeat #000;
	height: 346px;
	position: absolute;
	width: 347px;
	z-index: 10;
	-webkit-box-shadow: 0px 0px 4px #000;
	-moz-box-shadow: 0px 0px 4px  #000;
	box-shadow: 0px 0px 4px  #000;
}

And the jQuery:

$(function() {
// OPACITY OF BUTTON SET TO 0%
$(".roll").css("opacity","0");

// ON MOUSE OVER
$(".roll").hover(function () {

// SET OPACITY TO 70%
$(this).stop().animate({
opacity: .7
}, "slow");
},

// ON MOUSE OUT
function () {

// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 0
}, "slow");
});
});

CSS3 Method

With the increasing support for CSS3 in modern browsers I just had to try this method using CSS3 opacity and transitions. Here’s the HTML for the CSS (no javascript used) method:

<a class="image"  href="#">
	<span class="rollover" ></span>
	<img class="imgborder" alt="" src="images/pic2.jpg">
</a>

Here’s the CSS, where all the magic happens:

span.rollover {
	opacity: 1;
	-o-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-webkit-transition: -webkit-transform 1s;
	background:url(images/mag.png) center center no-repeat #000;
	cursor: pointer;
	height: 346px;
	width: 347px;
	position: absolute;
	z-index: 10;
	opacity: 0;
}

span.rollover:hover {
	opacity: .7;
	-o-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-webkit-transition: -webkit-transform 1s;
	-webkit-box-shadow: 0px 0px 4px #000;
	-moz-box-shadow: 0px 0px 4px #000;
	box-shadow: 0px 0px 4px #000;
}

Credits:
jQuery Fade Script
Magnifying Glass Image

1. PremiumPixels.com

Premium Pixels has top notch free graphics. Instead of designing your button from scratch, pop over to this site to see if there is one that you can download and edit for your application.

2. 365psd.com

When I’m looking for free website graphics, I always make sure to check out this great site.

3. DesignMoo.com

Design Moo is one of the most popular resources online for free website graphics.

4. IconFinder.com

If it’s icons you’re after, make sure to check out Icon Finder. This powerful search tool gives you a ton of results for common searches like ‘Twitter’, or ‘Facebook’; many icons are free to use on commercial projects.

5. SubtlePatterns.com

This site is rather young, but the quality of the free website background patterns that they have will have me coming back to the site for some time.

6. 960.gs

If you code websites you should be using this grid system. I don’t actually use their ‘code’, but the Photoshop website templates alone make them such a valuable resource.

7. HTML5BoilerPlate.com

HTML5 kicks ass. The HTML5 BoilerPlate offers a complete template with some amazing code. This is one of the best resources on the web without a doubt if you’re a coder.

8. html-ipsum.com

Where do you copy your ipsum from? This website is great because it offers a whole variety, from a simple paragraph to more complicated lists, headings, etc. Great for quickly setting up dummy content on a website.

9. ScriptSrc.net

Don’t waste time tracking down the latest version of jQuery for your next project. These guys keep the link up to date with each release. I must go to this site at least every other day.

10. Placehold.it

This site might be not known to a lot of people, but it’s one of my favorites. Say you’re setting up a website and you need place holder images. Simply grab the code from this site, change the dimensions of the image right in your code, and voila!

Here’s the CSS used for the Post-it in the demo (which is a div with class “post-it”).

.post-it {
background:#fefabc;
padding:15px;
font-family: 'Gloria Hallelujah', cursive;
font-size:15px;
color: #000;
width:200px; 

-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-o-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);

box-shadow: 0px 4px 6px #333;
-moz-box-shadow: 0px 4px 6px #333;
-webkit-box-shadow: 0px 4px 6px #333;

}

You can customize your CSS Post-it note by changing the background color, changing how much the note is rotated, or changing the font. Here is the font I used for the demo: Gloria Hallelujah

ThemeShock CSS3 Shadow Generator

CSS3.me Generator

CSS3 Generator

CSS3 Button Generator

Border Radius Generator

CSS3 Maker

CSS3 Box Shadow Generator

css3-click-chart

CSS Corners

CSS3 Button Generator

Theme Shock CSS Text Shadow

Style Master

Colorzilla Gradient Generator

CSS3 Selectors Test

HTML5 Readiness

Font Squirrel Font Face Generator

CSS3 Please!

CSS Gradient Generator

CSS3 Gradient Generator

CSS-Tricks Button Generator

Border Image Generator

Column Generator

CSS3 Transform

CSS Warp

Button Maker

Need a great looking product slider for your website? Use FancyMoves to show off services, products, or whatever you can dream up. The main image is enlarged to attract your focus. There are multiple ways to navigate to the next / last item: using your keyboard, using the left and right arrows on the sides of the slider, using the nav under the slider (optional), or simply clicking on the next or last item in the slider.

FancyMoves has a lot of great features which are easy to edit to customize your slider. Easily change the speed of the slider, add multiple sliders on the same webpage, turn off the navigation below the slider, and much more.

FancyBox is built in so you can have images enlarge with an overlay effect on the screen. Hovering over the enlarged photo shows arrows, allowing you to navigate to other images within the group. FancyBox is easy to customize for your needs; change the transition effects, the background color, the title positioning, and more.

Check out the demo and be sure to enlarge the images to see the different FancyBox options. Also see the other demos further down this page, showing off other optional settings of the FancyMoves product slider.

Slider Features:

• Images decrease in size as they enter, leave screen
• Easily change slider width
• Easily change amount of next / last image shown
• Last image loops back to first image
• Multiple sliders on a page
• Hash tags (link to a certain image from another page)
• Choose which panel the slider starts on
• Navigation links under slider

FancyBox Features:

• Linked image ‘groups’
• Mouse scrolling support
• Keyboard support
• Multiple enlarging effects
• Multiple image title layouts

Credits: Original slider code from CSS-Tricks, Clothing products from Ugmonk, FancyBox for enlarged images

Rollovers can be created using pure CSS, which is a widely used technique on the web. There’s many benefits to using CSS for rollovers. It requires no javascript, which means less code on your page, quicker page load time, and your rollovers will work if the user has javascript disabled on their browser. It’s also better for SEO, because your links will still have live text for the search engines.

The simplest way to use CSS to create rollovers is to have 2 separate images and use them as background images on an item. Say you had a link that you wanted to have a custom font that isn’t web safe (and you wanted it to have a hover state with a different image). You could create the image and the image rollover state and apply them onto your link tag with the following CSS:

a:link {
display:block;
width:100px;
height:40px;
text-indent:-9999px;
background:url(images/title.jpg)
}
a:hover {
display:block;
width:100px;
height:40px;
text-indent:-9999px;
background:url(images/titleRoll.jpg)
}

*In the above example the link is SEO friendly. The link still has the live text for the search engines to read, we are using negative text-indent to push it off the side of the browser so it’s hidden from the viewer.

This technique is called “image replacement“, since you are replacing the text with an image. The problem with that technique is that the rollover image doesn’t get loaded until you rollover the link. So when you rollover the link there will be a second or two where you see no image, as the other image is loading. Not a huge deal, but it really kills the point of having a nice smooth rollover effect in the first place.

CSS Sprites

The solution to the above problem is to use “CSS Sprites”. The theory behind this technique is that if you put multiple images together into one file it only needs to get loaded once by your browser; greatly improving load time, and getting rid of the flashing problem I explained above. The image is used as a background image on different objects, and CSS is used to move it around so you only see the desired image.

Example:
Here is the CSS Sprite that Apple is currently using for their main navigation. You can see how many separate images it would take to make all of the navigation items, rollover, and active states of the links. By having this one image file and pushing it around with CSS, they solved the problem of page load and image flashing.

How to use CSS Sprites

To show this in action, I’ll show you how I created the 2 buttons for my “Demo”, and “Download” buttons, shown below (these buttons don’t go anywhere, they are to show you the rollover state and the lack of “image flash while loading”).

Step 1. Create your CSS Sprite.

The key to creating your sprite is to make sure everything is exactly lined up, down to the pixel. We’ll be using pixels to move the images with CSS, so having a sloppy sprite image to work with will only frustrate you. Push your images so they are just touching each other, and make a note of the exact dimensions in pixels of where everything is located.

Step 2. Create your CSS.

Now that you have your image file ready you can create your links. Here is the CSS code for my buttons. In this example I’m using the same image for 4 different button states, the Demo button regular and rollover states, and the Download button rollover states.

a.download:link, a.download:visited {
display:block;
width:202px;
height:64px;
text-indent:-9999px;
background:url(images/buttonsSprite.png) 0 0 no-repeat
}
a.download:hover, a.download:active {
display:block;
width:202px;
height:64px;
text-indent:-9999px;
background:url(images/buttonsSprite.png) 0 -64px no-repeat
}
a.demo:link, a.demo:visited {
display:block;
width:202px;
height:64px;
text-indent:-9999px;
background:url(images/buttonsSprite.png) -202px 0 no-repeat
}
.demo:hover, a.demo:active {
display:block;
width:202px;
height:64px;
text-indent:-9999px;
background:url(images/buttonsSprite.png) -202px -64px no-repeat
}

Here’s what the links that create these buttons look like. The actual text of the button is hidden off the edge of the browser using negative text-indent.

<a href="#" class="demo">Demo</a>
<a href="#" class="download">Download</a>

To help clear this technique up even more, look at the examples below. Notice how in every state of my buttons the link itself never moves. This shows how the image is actually moving around behind the link, hidden from the website user. As the Apple example above shows, it can be used for an endless number of image and link states, the key is to keep your image file extremely clean and precise.