When WordPress 3.0 was released the ability to edit site menus from the WordPress dashboard was introduced. The WordPress menu feature allows you to create multiple menus. You can easily set a customize menu as the primary navigation for your site or put a custom menu widget in your sidebar. Themes can be further modified to create additional menus areas.

Adding a Menu to the Footer

When I create a custom WordPress theme for my clients I like to create a footer menu as well. This is useful for adding links to contact, sitemap and back to top. Here are the steps to edit your own theme.

It is recommended that you create a child theme before you make edits to theme files. In this tutorial you are going to edit the functions.php file, footer.php, style.css and header.php. If you modify theme files directly your customizations will disappear when the theme updates. So create a child theme first.

Create a secondary menu area

Add the following code to the functions.php file for your twenty ten child theme

// This theme uses wp_nav_menu() in two locations.
register_nav_menus( array(
  'primary' => __( 'Primary Navigation', 'twentyten' ),
  'secondary' => __('Secondary Navigation', 'twentyten')
) );

Tell WordPress where the secondary menu should be used

Open your footer.php file and add the following code wherever you want the secondary menu to appear.

	<div class="bottomMenu">
              <?php wp_nav_menu( array( 'theme_location' => 'secondary' ) ); ?>  
    </div>

Style the menu

Open your css file and create a class bottomMenu and add your own styling. Here is an example.

.bottomMenu { display: block; width:960px;}
.bottomMenu ul { display:inline; float:right;}
.bottomMenu li { list-style-type: none; display: inline; font-size: 12px; }
.bottomMenu li a {
	color:#000;
	line-height:15px;
	text-decoration:none;
	font-weight:normal;
	border-right: thin solid #000;
	padding: 0 7px 0 3px;
}
.bottomMenu li a:hover { color:#ccc; text-decoration:underline;}
.bottomMenu li:last-child > a {border-right: none;} /* remove pipe from last item */

Create the Menu

• Go to Appearance -> Menus and click the + to create a new menu
• Name the menu e.g. “footer”
• Add published pages such as contact, sitemap, privacy policy to the menu
• Drag and drop menu items to order them
• Save the menu
• Set the Secondary Menu (you created this with the edit to the functions.php file) on the left side to use this newly created menu

That’s it your custom menu will now work in the footer of your theme.

Add a Back to Top Link

• To add a jump back to the top of your site open the menu (make sure you’re editing the right menu)
• Under Custom Links -> create a url link -> “#top”
• Paste into the Navigation Label “^ Top” or “↑ Back to Top”
• Save Menu
• Open your header.php file and add the following code to the first div within the body

  <a name="top"  title="top"  id="top"></a>

Please add your comments to let me know how this works for you.

What makes a good domain name? The best names are brandable and contain keywords.

A Brandable Domain:

When choosing a domain name also consider how you’re going to brand your business. A short easy-to-remember domain is highly valued. If you can`t get the .com version of your domain, you may want to reconsider your decision; people often assume the extension is .com and may end up at a different site. Check out Twitter and other social media sites and make sure your preferred user name is available so you can keep your brand consistent. Brand building may trump the use of keywords in a domain.

SEO Value of Keyword in Domain:

My experience is that there is a lot of value to have keywords in a domain. Owning wordpresstoronto.ca and pointing it to my dandelionwebdesign.com domain has helped me rank #1 in search results for the search phrase “WordPress Toronto“. Even if Google dials down the value in the algorithm there is still SEO value in continuing the practice, and that value comes from anchor text linking.

Anchor Text Linking Value of Keyword in Domain:

One important reason to use keywords in your domain name is because of anchor text linking. Anchor text is the visible, clickable text in a hyperlink. “Click Here” is a poor way to create a link… it doesn’t tell the search engines what the link is about. We know that search engines give weight to the keywords used in a link. Usually when other sites and blogs link to your site they will use your business name or your domain name as anchor text of a link. This means that there is value to having keywords in your domain.

In this video Google’s Matt Cutts argues for the importance of going with a brandable url. He also announces that Google is going to give slightly less weight to keywords in a domain.

Photo of Me taken by Peter Newhook

I attended the first Ladies Learning Code Mobile Workshop on January 28th. Ladies Learning Code is a women-run not-for-profit group working to empower women in Toronto to feel comfortable learning beginner-friendly technical skills in a social, collaborative way.

Courses currently include HTML & CSS, WordPress, Ruby, Javascript, the new Mobile Workshop and coming later this month Photoshop & Illustrator. The Ladies Learning Code workshops are highly popular, selling out moments after tickets are made available. This March Break will see the first Girls Learning Code Camp for ages 11-14.

We worked in pairs to create separate stylesheets for desktop and mobile versions of the site. Our goals were to:

• change the wide desktop design to make it linear for mobile
• simplify the content and the navigation. Less is more!
• use mobile versions of images, resized to fit the smaller screen.
• to style larger buttons for link navigation. Desktop links can be small as a mouse pointer is accurate to 1 pixel BUT our fat fingers need about 44px x 44px to be accurate.

If you are using WordPress for your website you can start with the WPTouch plugin. You can simply activate the free version of the WPTouch WordPress plugin and whala you’ll have a mobile site. Create a custom icon and play with the settings.

I wasn’t able to achieve all I wanted to with the free plugin so I upgraded to the WPTouch Pro version (developer license). I also signed up as an affiliate so if you want to buy WPTouch Pro for your own site please use this link and I’ll make a little something.

As I worked through the WPTouch Pro documentation, I was very glad that I had attended the Ladies Learning Code Mobile workshop. The workshop prepared me to build my own child theme with the WPTouch Pro plugin.

The WPtouch Pro Plugin

• Create a Mobile Theme: You can use one of the mobile themes that comes with the WPTouch Pro plugin. It is recommended that you create a child theme (with the click of a button) so that your modifications will not be overwritten when the theme updates
• Styling: Open the WPtouch Pro Style / Appearance editor to set a custom header image, fonts and colours
• Use stylesheet to hide things from mobile or desktop view with css. I opened my desktop theme’s css file and created the class .mobile-only {display:none;} and to the WP Touch child theme css file I added .desktop-only {display:none;}

Here is one example…
My recent post “The Mobile Shift is Changing Web Design” contains a YouTube embedded video. The size of this video was too large for the mobile site. The iframe width needs to be 100% for mobile but that is too large for the desktop version. Here’s how I fixed this.

<div class="desktop-only">
<iframe width="560" height="315" src="http://www.youtube.com/embed/9GalBu_cEkM?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="mobile-only">
<iframe width="100%" height="250" src="http://www.youtube.com/embed/9GalBu_cEkM?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

I don’t have the mobile theme looking the way I want it to yet but it is coming along and thanks to the WPTouch Pro plugin I really like the way that my blog posts are displaying.

Did you attend the Ladies Learning Code Workshop? If you’ve created your own theme please add a comment with your link I would love to see what you’ve accomplished.

Changing Permalink Settings on a New WordPress Installation

One of the first things to do when you login to your newly installed WordPress dashboard is to adjust the permalink settings to set the url structure for the site. You can do this by going to the Settings → Permalinks panel.

The default permalink setting for WordPress create ugly urls p=123 using the postid number. Changing to one of the date structures isn’t much better. The best option from an SEO perspective is to choose postname to put the title of your post in the url or, what I like to do, select Custom Structure and put /%category%/%postname%/ to add the category as well as the post title in the url. I then make sure I use keywords for category names.

Customize each Page/Post Permalink

Once you’ve saved the permalink settings you can see this in action as you customize the permalinks for each page and customize the permalink for every post you publish. Go to Posts → Add New… now type a title for your post. Right below the post title you’ll see the Post Permalink. The full title of the post will now be in the url. This probably means that some of your posts will have long titles.

Here’s the url for this post dandelionwebdesign.com/wordpress/ that’s the category and then WordPress adds the post title /changing-your-…ess-permalinks/. As the title was too long for the permalink “…” was inserted. I’ve edited the permalink to dandelionwebdesign.com/wordpress/changing-permalinks. I already have WordPress in my url from the category name so I don’t need to repeat it.

When you edit page & post permalinks keep them short, use keywords, stick to lowercase and use dashes to separate the keywords not spaces. Search engines recognize separators.

Should I Change Permalinks on an established site?

I’m often asked about changing permalinks on an existing site. The worry is that changing the permalinks will create broken links impacting the traffic that you already have sending visitors to a 404 error page. The answer is YES I would recommend changing your permalink structure even if you have an established site BUT make sure you read on…

If you are running WordPress with the default ?p=123 structure you don’t have to worry. Go ahead and change your permalinks. WordPress will automatically forward to the new structure.

301 Redirect to Your New Permalinks

If you’re using one of the date or the numeric permalink structure options you’ll need to redirect your old permalinks to your new ones. There are a number or WordPress Permalink Migration plugins available but I’ve yet to find one that isn’t broken. Instead of relying on a plugin add redirects to your .htaccess file.

If your structure is

• Day and Name /%year%/%monthnum%/%day%/%postname%/ your redirect should be RedirectMatch 301 ^/([0-9]{4})/([0-9]{2})/([0-9]{2})/(.*)$ http://yourdomain.com/$4
• Month and Name /%year%/%monthnum%/%postname%/ your redirect should be RedirectMatch 301 ^/([0-9]{4})/([0-9]{2})/(.*)$ http://yourdomain.com/$3
• Numeric /archives/%post_id% your redirect should be
  RedirectMatch 301 ^/archives/(\d+)$ http://yourdomain.com/?p=$1
• Postname and you want to switch to a custom structure of /%category%/%postname%/ there is no way to redirect with .htaccess

You can also use the WordPress Permalink Generator by Yoast to generate the redirect code needed.

Copy the redirect code provided and paste it into the top of your .htaccess file.

It should work like a charm.

“Mobile isn’t a trend. It’s a new era. And it’s not too late to be early”.

Goolge’s HowtoGoMo.com is an initiative designed to educate businesses about the mobile opportunity and empower them to build mobile-friendly sites.

Just because you can see your desktop site on a mobile phone doesn’t mean it’s mobile-friendly. A truly mobile-friendly site is tailored to the needs of mobile users and the capabilities of mobile devices. A mobile-friendly site can help your business connect with customers and drive conversions.

This week I picked up a new Smartphone. In just a few days I’ve realized that mobile users browsing a website have different immediate goals then desktop visitors. I want to quickly access a Google map to see where you are and plan my route in relation to other stops, I want to find your store hours without having to call. A click-to-call phone number is so useful if I need to make a reservation or check stock.

Below is a summary of 10 Mobile Site Best Practices from GoMo:

• KEEP IT QUICK — design your site to load fast and make copy easy to scan.
• SIMPLIFY NAVIGATION — Use seven links or fewer per page of navigation. Have a search box prominently available on complex sites
• BE THUMB FRIENDLY — People use their fingers to operate mobile devices—especially their thumbs. Design your site so even large hands can easily interact with it
• DESIGN FOR VISIBILITY — Make sure content fits onscreen and can be read without pinching and zooming.
• MAKE IT ACCESSIBLE — Find alternatives to Flash and ensure your mobile site will adapt for both vertical and horizontal orientations
• MAKE IT EASY TO CONVERT — Reduce the number of steps needed to complete a transaction and use click-to-call functionality for all phone numbers
• MAKE IT LOCAL — if you have a storefront include functionality such as GPS maps that help people find and get to you
• MAKE IT SEAMLESS — People now use multiple screens throughout the day. Convert as much of the functionality of your desktop site to mobile as you can to create a seamless experience.
• USE MOBILE SITE REDIRECTS — to automatically send visitors using a mobile device to the mobile-friendly version of your site
• LEARN, LISTEN & ITERATE — Use Google Analytics to understand how people use your site and make appropriate changes

The mobile shift is impacting web design of desktop sites as well as mobile sites. In 2012 and beyond websites will:

• use HTML5 for interactivity and animation not flash
• be built on the principles of Responsive (variable vs. fixed-width) design to accommodate different resolutions and devices
• be cleaner, less cluttered, with more white space

I’m excited about the changes the mobile shift is bringing to the web design profession. Web designers and developers need to be constantly learning and adapting to the changing playing field.

From the official Google Blog, Search, Plus Your World brings:

• Personal Results, which enable you to find information just for you, such as Google+ photos and posts—both your own and those shared specifically with you, that only you will be able to see on your results page;
• Profiles in Search, both in autocomplete and results, which enable you to immediately find people you’re close to or might be interested in following; and,
• People and Pages, which help you find people profiles and Google+ pages related to a specific topic or area of interest, and enable you to follow them with just a few clicks. Because behind most every query is a community.

What does this mean for Search Engine Optimization and your blog?

Like it or not, the union of social and search is here to stay. Google has been widely criticized this week because Facebook and Twitter results are not part of Search, Plus Your World, it is exclusively Google+. This move gives more weight to Google+. If you’re a blogger you need to be on Google+. You’ll want to interact widening your Google+ circles, share every post you publish on Google+ and make sure you have Google+ buttons on your posts.

The Fresh trend:

Google regularly pushes out new updates to its algorithm in an ongoing drive to return the most relevant results for users. In fact, Google changes its search algorithm up to 500 times a year, that’s once or twice a day! On November 3rd, 2011 Google added freshness criteria to search engine results. Result will not appear in chronological order but their age will be checked as part of Google’s process for determining relevance.

Google’s Caffeine web indexing system now crawls the web for fresh content quickly on an enormous scale updating Google’s index of Web sites continuously. Google crawls the content from real-time social networks such as Twitter, Facebook, and Google+ to determine what content people are interested in NOW. Google also uses the RSS feed to know which content from a website is the freshest.

Different searches have different freshness needs

When freshness matters

When “Googling” a topic such as the Oscar predictions, freshness criteria matters. You want predictions for the upcoming 2012 Oscars not predictions for past Academy Awards.

Until now a search for an annual conference could display content from previous conferences before the recent event information. With Google’s fresh results you can now expect to find this year’s current information at the top of the results.

When it doesn’t

Often when searching it won’t matter when the content was published. If you’re wanting a great banana muffin recipe (unless you specify a date) you can expect an archived result.

This algorithmic improvement is designed to better understand the level of freshness required. When it matters you can expect Google to deliver the most up-to-the-minute answers without specifying “2012″ in the search terms.

WordPress websites will benefit:

From an SEO (Search Engine Optimization) perspective, Google’s freshness update has added more to the value of blogs and RSS feeds. Google has somewhat leveled the playing field for the new kid on the block. Well established sites can’t sit back and rely on static previously indexed content. Bloggers who continue to create new, engaging content on a regular basis should benefit.

WordPress began as a blogging platform so websites built with WordPress come RSS feed enabled. If you don’t already know what an RSS feed is then you may be interested in reading RSS Feeds explained. If your website hasn’t been built with WordPress you now have another reason to make the change over to WordPress.

New Year’s is often a time for “stock taking”, looking at what is working well for your business and what changes or improvements you can make for the year ahead. When the calendar changes to a New Year it is good to read up on new trends in SEO (Search Engine Optimization) and look over your website with a critical eye.

One thing that you shouldn’t overlook is the copyright date. You may need to update the copyright date in your site’s footer file. Open the footer.php file in your WordPress theme to edit the date. You can do this every year or you can enter the following code to automate this task and ensure that your site will always appear up-to-date.

This code will display as © 2012 Your site name as a link to the home page.

© <?php echo date('Y'); ?> <a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
					<?php bloginfo( 'name' ); ?></a>

You can also add the first year of your site with a dash after the copyright symbol. Such as © 2011-2012

© 2011-<?php echo date('Y'); ?> <a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
					<?php bloginfo( 'name' ); ?></a>

A keyboard shortcut to create the copyright symbol is to hold down the Alt key and using the number pad type 0, 1, 6, 9 – release the alt key.

I hope you find this tip helpful as you prepare your web site for 2012.

• defines a title in the browser toolbar
• provides a title for the page when it is added to favorites
• displays a title for the page in search-engine results

If you’re using the WordPress SEO by Yoast Plugin you’ll probably need to manually edit your theme’s header file to correctly display title tags. It’s easy to do.

So that this plugin can change your page titles, the title section of your header.php file should look like this:

<title><?php wp_title(''); ?></title>

Many themes, including the Twenty-Ten and Twenty-Eleven themes that come with WordPress, add extra code that you’ll need to remove in order for this plugin to work properly.

1. Open your header.php file (Appearance -> Editor -> navigate on right side to header.php)
2. Locate the opening <title> tag near the top of the file
3. Highlight all code from this opening tag to the closing </title> tag and replace it with <?php wp_title(”); ?> keeping the opening and closing title tags in place.
4. Click update file

For the Twenty-ten theme you are replacing these lines of code

<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;

	wp_title( '|', true, 'right' );

	// Add the blog name.
	bloginfo( 'name' );

	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";

	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ),
                  max( $paged, $page ) );

	?></title>

with this line

<title><?php wp_title(''); ?></title>

and for the Twenty-Eleven theme you are replacing these lines of code

<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;

	wp_title( '|', true, 'right' );

	// Add the blog name.
	bloginfo( 'name' );

	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";

	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );

	?></title>

with this line

<title><?php wp_title(''); ?></title>

Once you’ve made this change, the WordPress SEO by Yoast Plugin will be able to fully customize the page title tags of your WordPress website.

If the idea of editing your header file is too much for you, the WordPress SEO plugin does have a little tick box that you can use. SEO -> Titles -> Force rewrite titles. Be aware that changing your template will be faster.

I hope that I’ve explained this simply enough so that you are able to do this yourself. If you need any help or have anything else to say about this post please add a comment below.

I realize that in my talk I inadvertently skipped over Google Plus. Here is what I intended to discuss – +1 and it’s effect on SEO .

So sorry about the powerpoint problems. The file wouldn’t even open again afterwards. I’ve edited my backup of a previous version so there are probably some changes. I added a few more plugins to the last slide that came out of the Q&A time. Someone mentioned a permalink migration plugin, unfortunately I can’t find one that is working with the current version of WordPress. I’ll update this post if I’m able to find one.

Thanks for coming to the presentation and for your feedback.

Some tweets from this SEO for WordPress session:

• @kickthegrind tweeted: “@dandelionweb Great prez today! learned a lot! #wcto”
• @backpackerbrock tweeted: “Agreed! Explained a complicated topic well! Thanks Ruth! RT @KickTheGrind @dandelionweb Great prez today! learned a lot! #wcto”
• @janelangille tweeted: “@dandelionweb Tx for great tips in SEO for WordPress session #WCTO”
• @boomergirl50 tweeted: “@dandelionweb importance of keywords with hyperlinks 4 better SEO greatest tip among many”
• @BreatheDreamGo tweeted: “@dandelionweb thanks for a great SEO session – you covered a LOT of ground at #WCTO!”
• @atastefortravel tweeted: “@dandelionweb Thanks for a fab session! Will sign up for more!”

UPDATE: Video of my complete presentation is now available on WordPress.tv – WordCamp Presentation Ruth Maude: SEO for WordPress