How To: Add A Menu To Your WordPress Theme

Have you ever installed a new WordPress theme that didn’t have native support for creating and selecting custom menu (navigation bar). Now before you jump in be sure to either do a backup of your files, or as you get to the Functions.php and Header.php files copy the original code to a text editor before you modify it. Once you’ve done these preventative “CYA” measures follow these steps below:

From your Dashboard menu, go to Appearance > Edit and add the code below to the theme’s functions.php file: (in some cases I’ve seen this called “Theme Options” just above where it says “functions.php”. This is the same thing.)

You can add this code below towards the bottom of your page code so that you can easily find it later should you need to reference it.

add_theme_support( ‘menus’ );

(you may need to add this on the next line if you get to the end and your menu doesn’t show up:

add_action( ‘init’, ‘register_my_menus’ );

function register_my_menus() {
register_nav_menus(
array(
‘menu-1’ => __( ‘Menu 1’ ),
)
);
}

User your browser’s Find feature and search for this code in your theme’s Header.php file:

<?php wp_list_pages(‘title_li=&depth=1’); ?>

Highlight this string of code and replace it with this code below:

<?php wp_nav_menu( array( ‘sort_column’ => ‘menu_order’, ‘container_class’ => ‘menu-header’ ) ); ?>

Lastly click on Appearance then Menus and you should be able to create a custom menu.

Browser Testing on a Mac

Found this application from Adobe recently and though to share my experience with all of you. If you’ve been in the design industry for about a year, chances are you’ve worked on or own a Mac computer. I’m not going to get into how or why Mac’s are the preferred choice in design and development, but they are. One main pain in the rear though is browser testing, and since the common browser that we mostly use is Firefox or Google Chrome, access to Internet Explorer isn’t an easy because there isn’t an app for that on the Mac OS.

So enter Adobe for creating a web-based browser simulation app called Adobe Browserlab. It is free to use, all you need is an Adobe ID that you can also get for free and use immediately. This makes for browser testing across multiple browsers a much more pleasant experience even with side-by-side comparing. For those using Dreamweaver there’s also a way to integrate Browserlab for even more testing and preview abilities during your site developments. See some of the screenshots and video below.

Adobe Browserlab Screen 1

Adobe Browser Lap Screen 2

 

[youtube http://www.youtube.com/watch?v=ZmU19swH7aY]

 

Are you already using Adobe Browserlab; well let us know your thoughts and some tips or tricks you’ve learned along the way in the comments below.

How To: No Right Clicking In WordPress

Recently we setup a new website for a client who is a great photographer. The account rep for this client is Yvonne Barber and she had a thought about protecting this client’s images from people who may want to try to use them without proper permission. It was a valid point because as of right now, the client wasn’t looking to sell nor allow for licensed downloads of his images for any type of use.

Well we found a nice piece of jQuery code that we were able to add to his Header.php file that disables the right clicking option in most browsers. See the short video below for a step by step way to do it yourself, even if you’re not a seasoned programmer.

Here is the code:

<script type=”text/javascript”>
$(document).ready(function(){
$(document).bind(“contextmenu”,function(e){
return false;
});
});
</script>