What’s on your WordPress Menu?

Last week we talked about the WordPress header and header.php. We continue this series and this week we’ll be touching on the WordPress menu. Visitors come to a website to find answers. How they arrive, whether via an organic search, a paid ad, or a sponsored link, matters little to these information seekers. These visitors come believing that they will quickly find the answers that they need. The operative word here being quickly. (The boon and bane of hi-speed internet is that it has turned a lot of us into impatient “speed demons”.) Once these visitors have what they want and they do linger on the site after, then that’s already a bonus.

Often, these new visitors aren’t really looking for a website with flashy, awesome text animation embedded in a huge full width slider-enabled $50 premium WordPress theme. Some might, but like we said, majority of them simply want to find a quick answer to whatever they are looking for. A lot of them will look for the link to the item that led them to the site in the first-place or go straight to the menu to find their way through the site. That’s why it’s important to create a website navigation menu that will make your visitor’s website experience fruitful and pleasant at the same time.

What is website navigation anyway? What is a menu?

Navigation Defined

Navigation Menu is a theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for introducing customised navigation menus into a theme. In order to incorporate menu support into your theme, you need to add a few code segments to your theme files.
Source: WordPress Codex

There are many navigation methods employed on websites. The simplest and easiest to follow, will allow your visitors to find your information pages and enjoy the visit! Simple HTML navigation menus also provide search engines with a clearly marked road map to follow, when they scan your website.
Source: Cal Poly

The process by which a user explores all the levels of interactivity, moving forward, backward, and through the content and interface screens. Users navigate through the project by clicking on interactive controls such as buttons, image maps, and hypertext, while clues such as special colors, backgrounds, or interface sounds help orient them to where they are at within the levels of interactivity. A good navigation scheme will leave the user with little question about where they are in the document and where they can go from there.
(from Lisa Graham, The Principles of Interactive Design, 1999)

Menu Defined

A list of options displayed to the user by a data processing system, from which the user can select an action to be initiated. In text processing, a list of choices displayed to the user by a text processor from which the user can select an action to be initiated. A list of choices that can be applied to an object. A menu can contain choices that are not available for selection in certain contexts. Those choices are indicated by reduced contrast.
Source: Glasgow Caledonian University

“Good Website navigation is very important to every business website. Good text links help. When a visitor can’t easily discover where they are, what valuable business information is on the page, where to go next and how to find your Home Page or a good sitemap… they leave your website! You would never tell a customer to stand outside your business, while they try to do business with you. Poor website navigation creates the same visitor experience. Good page titles tell visitors what each page is about.

A well designed menu will allow search engine spiders and human visitors to navigate around your website and never get lost. A menu is simply a group of links to more information. Helping your visitors find information quickly, will impress potential customers. Finding good information is the key to a successful business website.”
(Source: SEOWebsitesdesigners.com)

There are several ways to set up your navigation menu system on your website: vertical, horizontal, or a combination of both. Beginning WP version 3.0, WordPress introduced a new navigation menu system and since then after numerous updates and improvements, the WordPress menu management system has made setting up navigation menus in the backend admin panel section more user friendly with lesser and lesser coding or technical knowledge required. Check out these great resources: this article by Justin Tadlock, or these tutorials WordPress menu navigation tutorial and Setting up Menus in WordPress to learn how to set up your menus in no time.

Friendly, Optimized, Ready – Really? SEO and your WordPress Theme

A lot of premium WordPress themes claim to be SEO friendly, SEO optimized, or SEO ready. Did you know that WordPress is one of the most SEO friendly CMS (content management systems) publishing platforms on the internet? SEO is actually a built in feature within WordPress, ready to embrace search engines straight out of the box. But what is SEO really all about? Is it enough to just have a pretty WordPress theme to boost your site’s traffic? Why the need for 3rd party plugins if WordPress is SEO friendly from the beginning?

Search Engine Optimization

There are many ways to define SEO and here are a few:

Search engine optimization (SEO) is the process of affecting the visibility of a website or a web page in a search engine’s “natural” or un-paid (“organic”) search results.[jargon] In general, the earlier (or higher ranked on the search results page), and more frequently a site appears in the search results list, the more visitors it will receive from the search engine’s users. SEO may target different kinds of search, including image search, local search, video search, academic search,[1] news search and industry-specific vertical search engines.
(source: Wikipedia)

SEO is the practice of improving and promoting a web site in order to increase the number of visitors the site receives from search engines. There are many aspects to SEO, from the words on your page to the way other sites link to you on the web. Sometimes SEO is simply a matter of making sure your site is structured in a way that search engines understand.
Search Engine Optimization isn’t just about “engines.” It’s about making your site better for people too.
(source: seomoz.org)

Simply put, SEO helps you connect with your target market. It boils down to being “ find-able” to those who are already looking for you. Unfortunately, it is also true that if your website is “out of sight” it is definitely “out of the mind” of these seekers and potential customers. Even if you do “build” a beautiful website, they won’t necessarily “come” unless they are family and friends who just want to be supportive of you. Bottom line, no matter how pretty your website is, you need SEO to make sure that your beautiful website can be found and appreciated.

Another culprit to your WordPress site being “out of sight, out of mind” of the search engines is the WordPress theme you use. Not all premium themes are SEO optimized, friendly, or ready even if they claim to be so. Yes, WordPress is SEO friendly by default but if you install, customize and use various theme to meet your own needs, your “premium” theme might actually break some of those useful search engine features and do more harm than good to your rankings.

Here are some SEO basics straight from Google’s mouth to make sure your WordPress theme is truly SEO friendly, optimized and ready:

Create unique, accurate page titles

Choose a title that effectively communicates the topic of the page’s content. Each of your pages should ideally have a unique title tag, which helps Google know how the page is distinct from the others on your site. Titles can be both short and informative. If the title is too long, Google will show only a portion of it in the search result.

Make use of the “description” meta tag

Write a description that would both inform and interest users if they saw your description meta tag as a snippet in a search result.

Improve the structure of your URLs

URLs with words that are relevant to your site’s content and structure are friendlier for visitors navigating your site. Visitors remember them better and might be more willing to link to them. Use a directory structure that organizes your content well and makes it easy for visitors to know where they’re at on your site.

Make your site easier to navigate

Make it as easy as possible for users to go from general content to the more specific content they want on your site. Add navigation pages when it makes sense and effectively work these into your internal link structure. Controlling most of the navigation from page to page on your site through text links makes it easier for search engines to crawl and understand your site.

Offer quality content and services

Users enjoy content that is well written and easy to follow. It’s always beneficial to organize your content so that visitors have a good sense of where one content topic begins and another ends. Breaking your content up into logical chunks or divisions helps users find the content they want faster. New content will not only keep your existing visitor base coming back, but also bring in new visitors.

Write better anchor text

The anchor text you use for a link should provide at least a basic idea of what the page linked to is about. Aim for short but descriptive text-usually a few words or a short phrase. Make it easy for users to distinguish between regular text and the anchor text of your links. Your content becomes less useful if users miss the links or accidentally click them.

Optimize your use of images

Like many of the other parts of the page targeted for optimization, filenames and alt text (for ASCII languages) are best when they’re short, but descriptive. If you do decide to use an image as a link, filling out its alt text helps Google understand more about the page you’re linking to. Imagine that you’re writing anchor text for a text link. An Image Sitemap file can provide Googlebot with more information about the images found on your site. Its structure is similar to the XML Sitemap file for your web pages.

Use heading tags appropriately

Heading tags (not to be confused with the HTML tag or HTTP headers) are used to present structure on the page to users. There are six sizes of heading tags, beginning with h1, the most important, and ending with h6, the least important (1).

Similar to writing an outline for a large paper, put some thought into what the main points and subpoints of the content on the page will be and decide where to use heading tags appropriately. Use heading tags where it makes sense. Too many heading tags on a page can make it hard for users to scan the content and determine where one topic ends and another begins.

Make effective use of robots.txt

Restrict crawling where it’s not needed with robots.txt. A “robots.txt” file tells search engines whether they can access and therefore crawl parts of your site.

Be aware of rel=”nofollow” for links

Setting the value of the “rel” attribute of a link to “nofollow” will
tell Google that certain links on your site shouldn’t be followed
or pass your page’s reputation to the pages linked to.
Nofollowing a link is adding rel=”nofollow” inside of the link’s anchor tag.

Notify Google of mobile sites

Configure mobile sites so that they can be indexed accurately. Verify that your mobile site is indexed by Google. A Mobile Sitemap can be submitted using Google Webmaster Tools, just like a standard Sitemap.

Guide mobile users accurately

When a mobile user or crawler (like Googlebot-Mobile) accesses the desktop version of a URL, you can redirect them to the corresponding mobile version of the same page. If you redirect users, please make sure that the content on the corresponding mobile/desktop URL matches as closely as possible.

Promote your website in the right ways

Sites built around user interaction and sharing have made it easier to match interested groups of people up with relevant content. As people discover your content through search or other ways and link to it, Google understands that you’d like to let others know about the hard work you’ve put into your content

Make use of free webmaster tools

Improve the crawling and indexing of your site using Google’s free Webmasters Tools or other services. Google offers a variety of tools to help you analyze traffic on your site.

These are the SEO basics that you can use to assess whether your WordPress theme or your website is optimized or not. If you would like to read more on these SEO basics, check out Google’s free pdf resource “Search Engine Optimizer Guide”.

WordPress Plugins for Front End Content Management

As the internet continues its path towards building stronger online communities, greater interconnectivity and increased social networking, website owners are opening up their doors to accepting content contributions from their audiences. To address the issue of privacy and confidentiality, some plugin developers have come up with front-end solutions to enable website owners to accommodate contributions from the community without compromising their backend controls.

Here are some useful plugins you can use to put everything you need for posting, editing, and uploading content on the front-end.

Front-End Editor by Scribu

Front-end Editor is a plugin that allows you to edit your content directly from the front end of your site. This comes in really useful when all you need is just to correct a typo or something you overlooked.

Front-End Uploader

This plugin is useful if you have multiple contributors to your site because this plugin allows them to generate content and easily upload it right on the frontend of your website. Essentially, the plugin is a customizable upload form that adds files with allowed MIME-type to your WordPress Media Library under a special tab “Manage UGC”. There you can moderate your user submissions – whether to: Approve, Delete, or Re-attach to other post/page/custom-post-type before they are officially published.

Frontend Checklist

Create HTML or PDF checklists your visitors can save or print anytime they come back to your site. These lists are saved via cookies which enables visitors to continue using the checklist where they left off when they re-visit your site.

MarketPress FrontEnd

MarketPress Frontend is a powerful ecommerce plugin that can be used to set up a stylish online store easily. This WPMU Dev created plugin can help you: manage orders, create and edit products, product tags, and categories, set up store settings such as shipping, payment gateways, and coupons, all through the front end. This means that all your confidential dashboard information will be hidden away from sellers or other users who don’t need to see all that information.

FV Community News

Need more content but challenged? This plugin allows users to contribute articles while still maintaining full control over what gets published.

With this Community News plugin you allow your visitors to add fresh or related content to your blog. This plugin comes with a moderation panel and a settings page including support for custom post types, images, widgets, and shortcodes. You can simply sit back and relax knowing that your blog will have a continuous supply of fresh content.

Just make sure that the plugins are compatible with your current WordPress version before you install any of them.

2013 Is Here: Time To Update Your WordPress Theme!


New Year. New Look. Say goodbye to all the holiday trimmings and get ready to update the old. What better time to start the year with something new and something fresh! If you’ve been wanting to revamp your website and give it a makeover now is the time to do it. Design trends and the gazillion features have sort of settled, the fads have faded, while useful and relevant features have been embraced and integrated into the basic WordPress theme structure. It’s a great way to start 2013.

Take a look at all the gorgeous WordPress themes that have been released the past few months, read our reviews and see for yourself:

Fusion Theme from Elegant Themes

Specialty WordPress Theme

Harmony Theme by Elegant Themes

Origin WordPress Theme by Elegant Themes


You can also check out these articles on WordPress trends, plugins and other resources to beef up your site:

Header.php and The WordPress Header


In a previous article, we ‘deconstructed’ and brokedown a basic WordPress theme into 5 sections namely: the header, the menu, the sidebar, the content, and the footer. This time we are going to dive a little deeper into one of the sections and try to dissect it a little bit more.

Here’s how we defined The WordPress Header in that article:

The header is the structure that traditionally sits at the top of a web page. It contains the title of the website. It may also be referred to as the masthead, head, title, and banner. In all WordPress Themes, the header is found within the header.php template file.

Most themes have a header image that displays at the top of the page. This image is generated by a graphic defined either in the CSS value for the property that represents the header area or through the use of a custom header feature in WordPress. In themes that don’t have the custom header image feature, you can easily define a background image for the header image using CSS. (source: CSS for Dummies)

Not to be confused with headings (more on this in the future), the WordPress header is an important and strategic element of any WordPress theme because it is the first thing the visitor sees on your site. A good header communicates and reflects the content, purpose and intention of the site. It establishes your personal brand. Much like the cover of a top selling book or magazine, the header serves as a teaser of what can be expected from the rest of the website. It should be interesting enough to encourage visitors to explore the site even further. Not all headers require pictures or images. Some websites use beautiful typography as headers and they work just as well. Cluttered headers crammed with outdated blinking gifs and ads should be avoided as they are surefire ways for visitors to hit the back button in a jiffy.

The header.php file

header.php should contain everything from the DOCTYPE tag to the end of the page’s navigation. This means that all <head> tag information, meta tags, <title> tag variables, and other information must be included in the site’s header. This template file also must contain the <?php wp_head(); ?> tag, which places valuable WordPress version-sharing information, and other website information, within the head of the document. It must be placed before the closing </head> tag. (source: speckyboy.com)

The coding experiment

The header is set in an h1 HTML tag and features one template tag used with two different options or parameters. Basically, the first one displays the URL of the website in a link, and the second one displays the name of the blog or website as set in the Administration > Settings > General panel. When the user moves the mouse over the header title, the header can be clicked to return back to the main or front page of the site as set in the Administration > Settings > General panel.

Let’s experiment a bit with this basic header code. The code below contains two sections (the head and the body)

<HTML>

<HEAD>
<TITLE>My Home Page</TITLE>
</HEAD>

<BODY>
<H1>Blogging Experiment</H1>
This is an experiment.
</BODY>

</HTML>

and it will produce something like this:

Blogging Experiment

This is an experiment.

Of course, this is just plain simple html without any CSS styling applied yet. Sample CSS code that can be applied:

#header {
background: #90a090;
border-bottom: double 3px #aba;
border-left: solid 1px #9a9;
border-right: solid 1px #565;
border-top: solid 1px #9a9;
font: italic normal 230% ‘Times New Roman’, Times, serif;
letter-spacing: 0.2em;
margin: 0;
padding: 15px 10px 15px 60px;
}

If you want to experiment a little further and test your html coding skills you can check out this nifty tool on the W3Schools website. Simply submit your code and see what happens. You can make it as simple or as complicated as you want. Check it out here: W3Schools.com Try it yourself.

Useful WordPress Utilities to Start the Year Right


Give your WordPress site a tune up to keep it running smoothly with these helpful WordPress utilities. Remove forgotten spam comments, beef up your site’s functionalities, or simply improve the overall browsing experience of your audience, and give your website a little TLC. Check out these utilities to see which ones will work for you.

Smart Cleanup Tools

Smart Cleanup Tools is an easy to use, powerful plugin for database cleanup. With this plugin you can remove data that is no longer in use or not needed like trash, spam, or orphan posts and comments. It can help you restore database overhead and speed up database operations. This plugin supports WordPress multisites, and it has few tools designed for Network administration.

Easy Post Google Fonts

This plugin allows you to use over 600 Google fonts (even multiple fonts) in one post or page. You can specify every page element and tell it which Google font to use. No flash required.

The Countdown Pro

Add countdown functionality to your content or your sidebar area with The Countdown Pro powered by jQuery. Features and options include: date picker, expiry url, expiry text, date format, custom labels, custom callbacks, template styles, and so much more. It also comes with a shortcode generator and a multi-instances sidebar widget.

Interactive World Maps

Create as many interactive maps as you want (world, continents, countries, regions, states, metropolitan areas) with Interactive World Maps. Add and display colored regions and display them as regions or with colored markers. Useful for travel websites, multinational companies, NGOs, infographics and many other applications.

Ajax Translator Revolution Dropdown WP plugin

This user-friendly translator plugin is based on the highly rated AJAX Translator Revolution Lite jQuery plugin this time with an easy dropdown menu. Translate everything or select sections, show languages flags and names, remember visitor’s selected language.

Sugar Event Calendar for WordPress

This is a simple, lightweight event calendar plugin with just enough features you need for event management on your site. Neat way to keep visitors updated with scheduled weekly, monthly, yearly recurring, or new events and activities on your site.

WordPress 3.5 – New Features to be excited about in 2013

Drumroll please, Elvin Jones is in the house! WordPress house, that is. In keeping with WordPress code naming tradition, the latest WordPress update released – WordPress 3.5 has been named “Elvin” in honor of drummer Elvin Jones, and there is a lot to drum about.

Here are some of the new features that have been updated in WordPress 3.5:

New Media Manager

The Drag and Drop feature is streamlined, fast and easy to use. Creating galleries is faster with inline caption editing capabilities and simplified controls. Insert multiple images at once with Shift/Ctrl+click or insert multiple galleries per post and independently order images as you like.

New Default Theme

Twenty Twelve (2012) theme for WordPress is a simple, flexible and elegant theme with a gorgeous open sans typeface. It is currently the default theme for WordPress 3.5. It is mobile friendly, fully responsive and looks great on any device. This theme includes all the latest theme features including a front-page template with its own widgets which you can customize and also set up as a single page.

Favorite Plugin Support

Mark all your favorite or often used plugins in the WordPress Plugin Direcotry and access all of them directly in the Admin Panel>Plugins> Install Plugins page using your WordPress.org user name. This pulls out all your favorite go to plugins and saves a lot of time especially when you are setting up multiple sites.

Admin Enhancements

WordPress 3.5 sports a new Welcome Screen, simpler and easier to use even by WordPress beginners. All the basic tasks are accessible in this new interface – from Getting Started to Writing your First Blog Post to Managing Widgets – user-friendly indeed.

Retina display support

WordPress 3.5 is also Retina-Ready (HiDPI) where many visual elements have been updated and converted to CSS3 elements to support the new displays so that they look good on these higher resolution screens.

Support for Instagram, oEmbed support for SoundCloud and Slideshare

oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly. Great news for Instagram, Soundcloud and Slideshare users as WordPress 3.5 supports these services and it is now easier to integrate them to your site without touching any code.

Link Manager Gone

And its absence will hardly be felt probably. WordPress 3.5 hides the Link Manager by default for new installs but if you truly miss it, this feature can still be enabled via the Link Manager plugin. All sites with existing links are left as is.

XML-RPC is enabled by default

This means better accessibility for screen readers, touch devices, and keyboard users. This feature is also for remote publishing/mobile and easier connection with mobile apps like the Official WordPress iOS app. Those who are using Atom will need to use a 3rd party plugin.

New Tumblr importer

If you’ve been wanting to import your Tumblr content into WordPress for years now is the time to do so. WordPress 3.5 has now made this possible.

Multisites can now be installed and used in the subdirectory

Another improvement in WordPress 3.5 which multisite developers will appreciate is the ability to install WordPress Multisite in the subdirectory and not in the document root.

There’s more under the hood goodness that can be further explored if you want to. Some people wait a while before they install the latest WordPress update to give plugin developers time to update their own plugins. Make sure to backup your files before you do any updates.

WordPress Theme Deconstructed

Last week we touched on the basic components of a typical WordPress theme. Below is a visual example of how the layout looks like.

The components are as follows:

The Header (header.php)

The header is the structure that traditionally sits at the top of a web page. It contains the title of the website. It may also be referred to as the masthead, head, title, and banner. In all WordPress Themes, the header is found within the header.php template file.

Most themes have a header image that displays at the top of the page. This image is generated by a graphic defined either in the CSS value for the property that represents the header area or through the use of a custom header feature in WordPress. In themes that don’t have the custom header image feature, you can easily define a background image for the header image using CSS. (source: CSS for Dummies)

Menu (navigation) – usually found within or above the header

There are two ways to display a nav menu. One is by calling wp_nav_menu() within a theme template file. The other is by using the Navigation Menu widget. Most themes will call a menu from their header.php template, but menus can be placed anywhere. (source: Justin Tadlock)

The Sidebar (sidebar.php)

In general, the WordPress sidebar features titles of the various sections within a list, with the section items in a nested list below the title.
According to the WordPress Codex and in terms of design,
a sidebar is:
“… a narrow vertical column often jam-packed with lots of information about a website. Found on most WordPress sites, the sidebar is usually placed on the right or left-hand side of the web page, though in some cases, a site will feature two sidebars, one on each side of the main content where your posts are found.”

(You can also check out our previous article “Adding Sidebars to WordPress” to read more about sidebars.)

The Content Column (index.php)

The content container in WordPress plays the most important role. It holds the WordPress Loop which dictates the generation of content on the page depending upon the request by the user.

Content consists of text, images, or other information shared in posts. This is separate from the structural design of a web site, which provides a framework into which the content is inserted, and the presentation of a site, which involves graphic design.

The Footer (footer.php)

The footer is found within the footer.php template file. Footers are more than just a place to put copyright information. The footer in a web design is the bottom of the page. It indicates the end of the page. The footer includes navigational links to move the reader into your blog’s content, but it does so much more. It’s the last thing some visitors see after they finish reading your blog post and comments and should encourage people to stay a little longer on your site. (Source: lorelle.wordpress.com).

More next week!

WordPress Plugins 2013: Trends

WordPress themes, free or premium, come with common, basic features and functionalities upon installation. Some are built in together with the WordPress version you are using while others come with the theme you plan to use and install. Technically, these plugins are a set of one or more functions, written in the PHP scripting language, that adds a specific set of features or services to the WordPress weblog. Simply put, these plugins offer new additions to your blog that either enhance features that were already available or add otherwise unavailable new features to your site. Here are some of what we think will be the WordPress Plugin Trends for 2013:

Jetpack Plugin

The JetPack plugin supercharges your self?hosted WordPress site with the awesome cloud power of WordPress.com. You can activate this plugin if you have an existing blog on WordPress.com. Once connected and activated, several awesome features available on WordPress.com like: Contact Form, Gravatar Hovercards, Shortcode Embeds, Spelling and Grammar, and many others become available to your self-hosted site. All this is powered by WordPress.com’s cloud infrastructure.

WordPress SEO Plugin by Yoast

This popular plugin designed and developed by WordPress Consultant Joost De Valk. WordPress SEO is the most complete WordPress SEO plugin that exists today for WordPress.org users. It incorporates everything from a snippet preview and page analysis functionality that helps you optimize your pages content, images titles, meta descriptions and more to XML sitemaps, and loads of optimization options in between. It has recently been updated and is now compatible with WordPress 3.5.

ALO EasyMail Newsletter

One of the best ways to connect to your market is to get them to subscribe to your newsletter via email. It is also one of the most tedious things to do if you do not have an ARS (auto responder system) provider who will automatically distribute your newsletter. ALO EasyMail Newsletter is a great email marketing marketing tool that allows you to gather and manage subscribers and write and send newsletters right within WordPress. It also supports internationalization and multi language requirements.

WP Smush.it

Improving your page ranking is not just about having the right keywords. Fast loading pages are now part of the equation. WP Smush.it is a plugin that offers an API that performs image optimizations like optimizing JPEG compression and converting certain GIFs to indexed PNGs automatically to help improve site performance. As sites continue to become more image intensive, plugins like this are helpful in managing load rate.

Photonic Gallery for Flickr, Picasa, SmugMug, 500px and Instagram

Social networking has branched out into different streams and has integrated images into its arsenal. Hence the popularity of Pinterest and Instagram. Photonic takes all that and lets you use the WordPress gallery shortcode and ramps it up with a lot of added functionality including glamming up your social networking images like Instagram. It supports Flickr photos, Photo sets, Galleries and Collections, along with Picasa photos and albums, SmugMug albums and images, 500px photos and collections, and Instagram photos and users. You can also enable authentication for your site visitors that will let them see private and protected photos from each provider.

WordPress 3.5 has been released so some of these plugins may need to be updated to work with the latest WordPress update. Please check the developers’ links to see of they have a version compatible with the latest update.