Posts Tagged "webdesign"

Working with WordPress custom menus 1

Working with WordPress custom menus

Posted by on Oct 5, 2010 in howto, pseweb, wordpress

Today I replaced two static links with a custom WordPress menu in a site that I am working on.

Here is where I am starting with, in static XHTML and CSS:

Screen capture of the menu I am working on


And here is the code:

[code]<div id="siteindex"><a href="sitemap.html">Site Index</a></div><br /><br />
<div id="quicklinks"><a href="quicklinks.html">Ivey Quicklinks</a></div>[/code]

Below is the process for converting the above into an identical end result, built with a WordPress custom menu instead of static XHTML.

Creating the actual custom menu in WordPress

  1. In your WordPress dashboard, under Appearance, go to Menus.
  2. Enter a new menu name (I recommend one word) and hit Create Menu.
  3. Add the pages you would like to include and drag/drop into the desired order.
  4. Go to Screen Options and check the CSS Classes box.
  5. Expand each page in your menu and add the desired class.
    Note: For me, I added the same class to each of my items (“whitelinks”).
  6. Save Menu.

Pulling in my custom menu

  1. First, I need the wp nav menu code
    [code]<?php wp_nav_menu($args); ?>[/code]

  2. Then you tell your site which of your custom menus that you want to display – mine is called Sitemap.
    [code]’menu’ => ‘Sitemap'[/code]

  3. Then I define what class the div surrounding my menu is.
    [code] ‘container_class’ => ‘siteindex'[/code]

  4. Finally, I define the ID of the div.
    [code]’container_id’ => ‘navmenu’ [/code]

  5. And I end up with:
    [code]<?php wp_nav_menu( array(‘menu’ => ‘sitemap’, ‘container_class’ => ‘siteindex’, ‘container_id’ => ‘navmenu’ )); ?>[/code]

    Note: the $args  got replaced with array(), and each detail (argument) that I added is separated by a comma and a space.

Formatting my custom menu

Originally, my menu items were formatted by a class on the <a> tag.  When we use PHP to pull a dynamic menu into WordPress, the menu is pulled in as a list (ul) – each item is a new list item (li). While WordPress does allow me to define a CSS class for each item of my custom menu, it applies this class to the <li> tag for that menu item, rather than the <a> tag.

So, what I have to do is tell WordPress to format a link within a specific class:

[css]a.whitelink {font-size: 11px; color: #FFFFFF; text-decoration: none;}<br /><br />
a.whitelink:hover {text-decoration: underline;}[/css]

My last step is adding the code to take my bulleted list and turn it into a horizontal menu (items all on one line/side by side):

[code]#navmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }<br /><br />
#navmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }<br /><br />
#navmenu li {display: inline; }<br /><br />
#navmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }<br /><br />
#navmenu li {display: inline; padding: 5px 10px 5px 10px}[/code]

Done!

Sources:

Learn More

I am an awful customer

Posted by on Nov 4, 2009 in opinion

I am an awful customer. I want and want and want and I have NO sympathy for your issues. You are getting paid to serve me.

I am very open about service (or lack thereof) that I receive. Rogers has done more than well by me, Netfirms has been surprisingly available (although, they never did fix the issue), and then there are the ones I talk about with less satisfaction.

This week, I signed a new one year contract with a company that has ridiculous red tape to service, high prices – and has in the past randomly withdrawn extra money from my account that I still have not received back.

Why? My health. Their product is the solution, and as much as it bugs me to give them business, I’m not going to ‘kill’ myself over it.

(Think about how often I am going to recount my woes to other potential customers – hopefully they will lose more than what I’m paying them, in the form of lost business).

None of this is really my point (thank you for reading though!). When I signed my deal with the devil, the front staff asked me about my history with products of this type, what I was looking for, etc. They asked why I wanted to try the service before signing on and why I was reluctant to do business with them despite the strength of their product.

And they sympathized! They are so friendly and nice, and getting paid next to nothing. We’ve all been there. Most of us have worked places that we would have changed if we could have at the time – from fast food to marketing. As much as I want to grouch through the sign on process, I can’t take it out on this innocent, sympathetic, my new best friend, front desk person. It simply would not be fair.

As the ‘face’ of a recent redesign – I need to become the front desk person. Separating myself from the changes coming down from on high is how a webmaster or mistress can best survive the roll out of a new look and feel. Not many redesigns are done solo, and the person with decision making power is rarely the messenger when it comes to unveiling and softly enforcing a new web onto a community.

How do you manage change across the organization? How did your web team go about introducing and implementing change?

Learn More

Don’t spend your web budget all in one place … err, at the same time?

Posted by on Nov 2, 2009 in marketing, opinion

The web as you know it will change between the start and finish of your project

Web marketing, just like its offline brothers and sisters, includes hours and days and weeks of talking, whiteboarding, scribbling and hair pulling – and this all has to happen before you can even start to picture your final project brief.

‘Web content’ and ‘cutting edge’ are defined differently by every single person, ever, on the planet.

Having just (sort of) pulled through a site redesign, I’m taking the time to look back on the process looking for TSN turning points.

Learn More

#heweb09 Increasing Web Usability (with or without a redesign)

Posted by on Oct 5, 2009 in Uncategorized

Notes from #heweb09 presentation – visit http://2009.highedweb.org for abstract & podcast.

Eye Tracking

poynterextra.org/eyetrack2004/hp7.htm > part of an eye tracking study > this is how fast people are looking through your pages.

users will spent at approximately 10 – 15 seconds scanning your site before clicking away – consume about 20%

F Pattern or Golden Triangle (piece of pizza principle) holds true.

Learn More