How to create and update a wordpress navigation menu

Here’s a quick “how to” video showing you the basic concepts (below the video are step by step instructions).

Creating and updating a WordPress menu is an important step in making a website which is easy to navigate. Typically, when you create pages in WordPress they’re not added to the menu automatically, so we need to create the menu which shows how to get to the pages you’ve made. This blog shows you how to create such a navigation menu. Let’s start at the beginning:

Step 1: Login to your website’s dashboard.

Just a quick aside on what may seem like a mundane issue to you. It is important that your username is something OTHER than admin. If it is admin, that means that all a hacker has to do is figure out your password in order to get into your website. You might want to check out some of the important things that Penner Web Design does to make sure that your website is kept secure. We have a web security package which you might be interested. You can explore it here:
https://pennerwebdesign.com/wordpress-web-security/

 

Step 2: Make sure your menu isn’t collapsed

If your menu only shows icons in a vertical row, click on the right arrow at the bottom of it (see it at left) and your menu will appear with words on it. That’s a bit easier to follow.

Step 3: Create your pages

Generally the menu you create will point to pages you have created. If you have already created pages, you can see them by passing the cursor over the ‘Pages’ item in the menu list at the left and selecting ‘All Pages’.

If you haven’t created any pages in your WordPress website, find out how you can do that here: https://pennerwebdesign.com/blog/how-to-update-a-page-in-wordpress/

Step 4: Go to the section of WordPress where you control the menus

 

Now that you know how to create page, create 4 of them. Call them Home, About Us, Contact and Sample Page.

Next, pass your cursor over the word ‘Appearance’ (see left).  A ‘flyout’ menu appears. Click on the word ‘Menus’ to go to the menu control area of WordPress.

 

 

 

Step 5: Name your Menu

Type the name that you want to give to your menu in the blank space beside the words “Menu Name“. Then click on the blue ‘Create Menu’ button.

Step 6: Select your Menu Settings

Usually you want the menu you are creating to be the ‘Top Menu’. Click on the little box to the left of the words ‘Top Menu’ and then click on the blue ‘Save Menu’ button.

Note: Some themes will refer to this type of menu as a ‘primary menu’ or ‘header menu’ or some similar term instead of ‘Top Menu’. Some themes will have different places where your menu appears and this is where you determine that.

Step 7: Select the pages you want on your menu

You will see the Most Recent pages that you have added to WordPress by default. If you have a lot of pages added over a period of time, you may have to click on the ‘View All’ tab.

We only have 4 pages in our little website. We want to add all of them to our menu. So click beside each page name to put a check mark there, and then click  the ‘Add to Menu’ button as shown on the left.

(A short cut would have been to click ‘Select All’ and then the ‘Add to Menu’ button.)

 

Step 8: Save your menu

Click on the blue ‘Save Menu’ button on the right side of the page. This is a very important step because if you navigate away from the page without saving, everything is lost!

 

Step 9: Dragging Menu Items Around: Submenus and Reordering

Sometimes you want a menu item to ‘drop down’ from the main menu items you created above.  To create a submenu item click and drag that menu item slightly to the right. In the illustration at the left, I have made ‘Contact’ a submenu underneath ‘Home Page’. Do that.

Similarly, if you want to reorder the menu items so that  ‘About Us’ appears first in the menu list, you would click and drag that menu item to the top. Try that now, then click ‘Save’, and refresh your web page to see the result (shown below).  Note that ‘contact’ is a drop-down menu item under ‘Home’ and that ‘About Us’ is the first menu item on the list.

Step 10: Editing Menu Items

Let’s suppose you want to change the name of the ‘About Us’ menu item to say only ‘About’.

Go back to the section in WordPress where you control the menus. (See Step 4 above). As shown at the left, click on the little down arrow on the far right side of the ‘About Us’ menu item. This reveals  all of the details about this menu item. Now in the Navigation Label area, change About Us to About.  (Don’t actually do this.)

NOTE: This window is also handy if you want to remove a menu item. All you do is click on  ‘Remove’ at the bottom left.

 

Step 11 Adding Posts and Links

 

If you have posts on your website, you can go to the page from which the menus are controlled, click on the little down arrow on the far right of the ‘Posts’ and it will display the most recent posts you have. You can add them to your menu in the same way as you added pages.

 

 

In addition, you can add links to pages on other websites. You can do that by clicking on the little down arrow at the end of ‘Custom Links’. This allows you to add links to whatever website you like by typing in the URL. At the left, I’m adding the URL for Google and clicking ‘Add to Menu’.

If you did all of this and changed the ‘Home’ menu item back to the top of the list, your final menu should look like what is shown below:

 

Enjoy working with WordPress menus and if you have any questions please feel free to reach out to me!

 
For all you bloggers out there, this is a pretty cool shirt.

The Most Important Aspects of Website Design

A beautiful, user friendly website is key for converting customers. Your businesses website is just as important as a traditional brick and mortar store. However, it is different in that unlike a storefront, it never closes and is always available to your customer. A website should showcase the company brand, as well as successfully sell or inform its visitors.

When designing your website, there are a few aspects that are more important than the others. “Good design” includes basics such as white space, color, navigation, positioning, mobile ability, typography, and usability.

White Space

White space doesn’t have to be white, it simply means that there needs to be blank space on the page. This helps to draw the viewers’ attention to where you want it to go, as well as gives contrast to the page. When done right, leaving white space helps to balance out the page and set a more upscale tone.

Color

The colors that you choose to use on a website will have more of an impact than you might think. The colors chosen should follow these guidelines and more:

  • Match the colors to businesses current branding color scheme. Consistency with colors across all platforms and with your logo is best.
  • Colors should not be too overpowering or overwhelming. You don’t want the colors to get in the way of the message.
  • The colors should also compliment each other. Clashing colors are abrasive to the eye.
  • More bold colors should be used to draw the viewers’ eye to Call To Actions or points of interest.
  • More subtle colors should be used as backgrounds or for secondary pieces of information.
  • Background colors should work well with font colors. While it might be fun to play around with multiple colors, the most important thing is still readability when it comes to text.

Navigation

Navigation on a website refers to how the menu is set up and how the viewer finds where they need to go. One of the most frustrating things is being on a website and not being able to figure out where to go. This can be because the information is too congested, or that it is simply not labeled well or hard to find. Some items to remember when creating a website’s navigation are:

  • Always label menus or buttons clearly enough so that people know where they will be going when they click on it. Simple descriptive text is best.
  • The menu and buttons should be in easy to find places and coincide with where viewers are used to finding these links on a website.
  • At least the main menu needs to be on every page.
  • On larger sites, add in a site map, breadcrumbs, or even sub headings to help people when they might get lost.

Positioning and Alignment

When arranging elements of a website design, where pieces are placed truly matters. Where the element is placed on the page dictates the order in which the viewer will see it. Having the proper flow of pieces and information to walk a visitor through the website is vital.

Alignment comes secondary to this point but is still a necessary aspect to address. Once pieces are all placed in the correct positions, they should also all be consistently aligned. Nobody wants to surf a website where everything is different sizes, has different amounts of space between, and overall feels off.

Mobile Friendly

All websites today should be built for mobile viewing as well as the traditional desktop view. There will undoubtedly be a large number of your websites visitors coming from smart phones. When they reach your website, you want them to stay! If the website needs to be zoomed in on, played around with, and is hard to see on their phone, they will leave as quickly as they got there.

Typography

The text on your website says a lot about your brand. It helps to set a visual tone and can bring a lot to the design. Some aspects that should be addressed in relation to typography are:

  • Font style
  • Font size
  • Text colors
  • Spacing, length of lines, and paragraph styles

Usability

Last but certainly not least is usability. Testing out how your website works and making sure that it is easy to use is probably the most important step. Some tips to remember when designing for usability are:

  • Think about what people are used to and expect. Stick to standards of design such as having the menu at the top or on the side, using certain symbols of use, etc.
  • Understand what the user might want to experience. What are they going to try to do when they get to the site, and what might they search for? Knowing what they might be trying to achieve will help you to plan a successful and accessible design for them.

In the end, when a potential customer visits your site, make sure that they are impressed! There are so many other options online for every sector of business or product. If a visitor doesn’t see what they want they will bounce off your page immediately and visit your competitor.

Christopher Dill is the lead SEO ninja at The Dill Design. He has a passion for helping businesses grow through digital inbound marketing and increasing organic sales and conversions. Chris also manages responsive web design projects for SMB’s.

Tooting my own horn

Today, I did a vanity search for “Toban Penner”. As embarrassing as that sounds, I was surprised to see that I was quoted on the News and Observer site. They were asking me about Google’s “Get Your Business Online program in North Carolina”. It’s one of these “you can build an amazing site all by yourself for free” programs. Sometimes, programs like these are scary for designers like me… but then I read what I said to the interviewer, and I feel better and calm down a bit. Here’s the snippet:

Google and Intuit’s program faces plenty of competition from companies, many of them small Web design firms, that have been helping small businesses get online for years.

Toban Penner, a Durham-based web designer that customizes WordPress templates for his customers, said local firms can often personalize a webpage better than larger companies like Intuit.

“A lot of my clients start off with a company like that, and then they realize that their site doesn’t reflect their company’s look and feel,” said Penner, who has been in business for about three years. “If you work with someone locally, they’ll be able to meet with you, see your company and get a feel for what you need. They’ll be able to design a site that fits with the identity of your company.”

The fact is, if you want a website for free. No problem, you can do it! But if you want your site to reflect your business in a professional way that doesn’t harm your image, you’re going to need some design skills. That’s where designers like myself and others will come in, and I think we’ll be in demand for years to come.

Keeping Up With Web Design Trends

It’s difficult to be a full service web design agency in this day in age. Design is one of those things that you have to constantly stay on top of. It changes all the time. If you don’t love it, you’ll fall into your old ways and do the same thing, over and over again.

When I talk to other web designers and see what they are working on, more often than not, I am horrified at the low quality of their work. How can you call your self a web designer and crank out websites that come out of the womb looking 15 years old. I know I’m not the Van Gogh of web designers, but I do try to keep abreast of trends in the industry. I try to set the bar high.

When designing a website I usually do a lot of research surfing around the web looking at what other top designers are doing. When I see their sites and how great they look, I aim for that. I know I can design something as good or better than the best in the industry. So that’s where I set the bar. I don’t look at their site and think to myself, I can’t do that, or that’s out of my league. But their is always a but.

Budget Restrictions Suck
I haven’t been in this industry long enough to command the attention of big time clients like some others. Often, I am highly restricted by the budget of my client. Web design is like any other job, you have to have the right tools for the job, and for design, other than a computer and photoshop, you need time. So if your client can’t afford to pay you for spending some quality time designing a site, they will get sub par results. It’s as simple as that. Sure, you can use a template, or go off somebody else’s work (which is unethical), but if you want an original site with high end design, the designer is going to have to spend some time on it.

Website Design in the Northern Wasteland (Winnipeg)

It’s the holiday season, and I’m stuck indoors, surrounded by way too much food and family. It’s almost unbearable (but in a good way). If I try to escape the food and family by going outdoors, I’m bombarded by a blindingly white snowy landscape. The snow is nothing short of spectacular, it seems to cover everything that is unimportant and directs your attention to things worth looking at. It focuses my attention on what is truly beautiful.

With so much white space outside my window, it makes me sad to see almost no white space on my computer screen.

Website Design has as much to do with what you put on the page as it does with what you don’t put on the page.

White space on a page directs potential customers eyes to what you want them to look at on the page. It shows them what is important, without screaming at them.

A cluttered, poorly designed site is one of the worst things you can do. If you try to emphasize everything, you’ll end up emphasizing nothing. You’ll have a loud, busy website that is difficult on the eyes. This can’t wait to be a good way to start a business relationship.

Just something to consider when you are thinking about your website design and choosing a web designer.