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”.

Top 5 Themes for Non-Profit Organizations

It’s now that time of the year when most of the world celebrates Christmas. It is the season when the Christian world reflects on the birth of the Lord Jesus Christ which ultimately leads to his sacrifice on the cross so people may live a much better life in Him. It is also during this time when people are reminded to think beyond themselves and work towards causes to make the world a better place to live in. In the spirit of Christmas, we are featuring top 5 best selling and well rated themes for non-profit organizations:

1. Churchope

Churchope is a WordPress theme designed for churches. The homepage features a great slider perfect for giving visitors a brief presentation on what the church mission and beliefs are. The theme has capabilities for embedding videos as well as playing audio tracks. It also has a great calendar system to keep church members updated on the next church event. Overall, whether it’s viewing or listening to the latest sermon online or catching up with the next church activities, Churchope meets those needs and so much more.

2. WP Church

This is another theme that’s perfect for churches. It has an amazing slider set on a wood finish background. WP Church also gives visitors the chance to watch videos and audio tracks, listen to preaching or testimonies, and keep track of event countdowns on a dedicated event page. It also has a special scripture tool that automatically adds scripture text when the scripture reference (e.g. Ps. 121:1) is typed.

3. Campaign

This is a special theme for individuals running for public office. Candidate updates and news may be posted as well as a schedule for campaign events & sorties. There’s also a special tool for capturing names & email addresses of constituents and supporters and even a special, easy to set-up donation button. This theme can also be used for fund raising, charity events and the like.

4. Earth

This premium WordPress theme is designed for today’s eco-warriors. The environmental movement relies heavily on images to tell the stories of how the planet’s resources are being depleted because of human and industrial factors. Earth has great multimedia presentation capabilities that can help tell that story. This theme has an amazing slider that capable of embedding powerful video presentations to stir up conservation. It also has great sortable portfolio pages perfect for documenting various conservation projects of any environmental organization.

5. Animal Care

Animal care is a theme designed for cause oriented groups or movements who want to establish an online presence. This theme’s home page has a beautiful slider that can be used to effectively communicate the organization’s mission. The theme has allotted ample space for images, blog pages, and there is also a special box for special news posts regarding the organizations activities. Interested parties are given an opportunity to donate via a special donation button on the homepage.

There are more themes out there designed for non-profits. Hat tip to all the designers and developers who have created these themes to help the advancement of great causes.

17 Awesome Adobe air apps for designers

One fine day I was trying to fill in an important official form online on my Mozilla Firefox’s browser. After spending about half an hour I reached the last few questions of the form. One question there asked me to click a checkbox to answer but I could see no checkbox on the screen. After wasting a lot of time reading the instructions and every possible detail over and over again I asked for advice from my friends. One person told me that I should try to refill the form on Internet Explorer. I tried it and now the checkbox appeared and I successfully completed and submitted the form online.

The problem just described occurred because the form was designed to work especially for Internet Explorer. You see, designing an application for all systems is tedious as one has to tweak the runtime code again and again to make it compatible to work with different systems. Here is where Adobe AIR jumps in. If an internet application is designed using Adobe AIR then it will automatically work for all systems and browsers.

Technically speaking:

“Adobe AIR is a cross-operating system runtime that lets developers combine HTML, JavaScript, Adobe Flash and Flex technologies, and Action Script to deploy rich Internet applications (RIAs) on a broad range of devices including desktop computers, netbooks, tablets, smartphones, and TVs. AIR allows developers to use familiar tools such as Adobe Dreamweaver®, Flash Builder®, Flash Catalyst®, Flash Professional, or any text editor to build their applications and easily deliver a single application installer that works across operating systems.” – Adobe’s website.

Adobe AIR has a wide array of apps that can help designers design better applications. Below I have selected 17 of them.

(more…)

The Basic Web Page Structure – HTML5 List of Tags


You can think of an HTML page as a series of containers. After an opening statement that defines the type of page to follow, there is one large element, the <html> tag, that contains the two primary structural elements, and <body>.

HTML documents consist of a tree of elements and text. Each element is denoted in the source by a start tag, such as “<body>“, and an end tag, such as “</body>“. (Certain start tags and end tags can in certain cases be omitted and are implied by other tags.)

Here’s how the basic essential code for an HTML5 web page looks:

<!DOCTYPE html>
<html>
<head>
<title> Title of document goes here </title>
</head>
<body>
Visible text goes here…
</body>
</html>

Before we can fully appreciate what these containers or placeholders do to our webpage we need to know how they function. Below is a list of HTML5 compliant tags we can use to study and familiarize ourselves with as to the description and function of each tag. Let’s do a little exercise. As you go through the list, pick a web page (any, even this one) and right click on it. Select “view page source” and try to find the tags listed here and look for them in the page source. Try to classify which ones are basic tags, formatting tags, image tags, and so on. While you are at it, challenge yourself to decode the code. Have fun!

<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<progress> Represents the progress of a task
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<time> Defines a date/time
<wbr> Defines a possible line-break
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation
<figure> Specifies self-contained content
<audio> Defines sound content
<source> Defines multiple media resources for media elements ( and )
<track> Defines text tracks for media elements ( and )
<video> Defines a video or movie
<nav> Defines navigation links
<command> Defines a command button that a user can invoke
<header> Defines a header for a document or section
<footer> Defines a footer for a document or section
<hgroup> Groups heading elements
<section> Defines a section in a document
<article> Defines an article
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<summary> Defines a visible heading for a details element
<embed> Defines a container for an external (non-HTML) application

Don’t forget that WordPress uses PHP but PHP is a server-side technology (runs on a server) that dynamically generates the HTML that will be sent to the browser (IE, Safari, Firefox, Chrome). HTML is whatever you view on a website.

20 Useful Admin Plug-ins for WordPress

Do you know what makes WordPress the number one choice amongst bloggers? Although one can list many reasons but one of the most prominent in the list will be the number of plug-ins it supports. WordPress currently runs more than 20,000 plug-ins that have been downloaded more than 30 chore times! This is both good and bad news. Good news because you will have a lot to choose from. You will almost every time find what you need. Bad news because amongst such a vast ocean of plug-ins it is easy to get lost and drowned in the information overload. To help you out we present you with 20 WordPress admin plug-ins that we feel are the best in their niche. As the name suggests these are admin plug-ins i.e. they will help the administrator of the WordPress blog to operate the blog in a better and more efficient way.

For example, let’s say that you are fed up with all the clutter of the unnecessary and superfluous windows and bars that occupy your WordPress dashboard. Try Ad minimize, listed in the first position below. This plug-in allows you to compress windows to allow more content to be substituted in its place. Obviously different people have different priorities. So with Ad minimize you can customize your WordPress’s dashboard the way you like.

Besides Ad minimize, there are 19 other useful plug-ins that, I think, you should know of. Scroll down and check them out.

(more…)

BuddyPress WordPress Themes 2013: Trends

BuddyPress has come a long way since its conceptualization in 2008. What is BuddyPress anyway?

According to WPMU.org:

“BuddyPress is a suite of plugins for WordPress that transforms into a fully functional social network platform.
When installed on WordPress Multisite it provides features that lets your members socially interact with each other within a multi-blogging platform environment. It provides all the features that allow you to build a community on your network. BuddyPress enables you to build passionate users around a specific niche.”

Buddypress.org puts it quite succinctly:

“BuddyPress is Social Networking, the WordPress way.”

The concept of turning a WordPress site into a social network is indeed radical and has not been lacking in challenges. What is amazing is that BuddyPress users of today find a plugin that fully integrates into ordinary WordPress as opposed to the few who were tinkering with WPMU a couple of years back. With its latest version, 1.6, BuddyPress is an easy to use plugin with good content management capability. You can enjoy the benefit of user generated content with the ability to moderate and control spam posts using existing infrastructure on WordPress. BuddyPress also gives you the functionality you expect from any social networking site. You can add and remove friends, create groups and much more.

With all that BuddyPress is offering now what more is store for this great plugin? The battle cry of the developers is theme integration. More and more people would like to turn their existing sites into social networking sites without discarding their existing theme capabilities. Come to think of it, if you have a great ecommerce theme, why would you want discard your eCommerce capabilities for social networking. The challenge for theme developers is to create or redesign themes that integrate the capabilities of buddypress. Social networking, in tandem with mobile devices, has made our world smaller, closer, and within reach. It is undeniable.On the other hand, BuddyPress developers also have to do their share to make the plugin more seamless. While the task doesn’t seem easy there is indeed a host of talented, highly motivated people working to reach the summit from both sides. We are looking forward with much eagerness to their success!

Harmony Theme: Coming Soon from Elegant Themes

It’s the age of the boy band, the rocker chicks, and the indie alternative rock group and fans have been stalking their favorite bands social network sites. But what if these bands had their very own websites to give them and their fans an online address where they can all converge and have fun?

Elegant Themes is coming up with its version of the music/band/artist WordPress theme and it looks quite exciting. We wonder how Nick Roach is going to combine elegance and swag all at the same time. No doubt, it will be something good.

Sneak peeks can be seen on the Elegant Theme’s blog page. A few features that’s been talked about are:

    The theme is compatible with the standard soundcloud plugin, and that you can add your soundcloud social media Icon in the header
  • Highly visual, clean and responsive experience
  • Includes an eStore / eCommerce compatible
  • Alternate color schemes
  • Major features: showcase songs, sell swag, cultivate fants, notify them of upcoming shows
  • Define your own background image for each location

Check out the Elegant Themes blog or even our blog regularly for the latest updates on the release of this new theme from Elegant Themes, Harmony theme.

Get 77 Premium Themes for $39

The Basic Parts of a WordPress Theme

Language consists of words that are classified into different groupings depending on their function. The English language is divided into 8 parts commonly known as: nouns, pronouns, adjectives, verbs, adverbs, prepositions, conjunctions, and interjections. These words can be used in combination with one another to express a complete thought – a sentence. Other languages may have different classifications but generally, each language is comprised of several word classifications which when combined with each other express a specific thought.

We have been slowly laying the basic foundation to understanding WordPress these past few weeks. Last week, we learned common phrases that you hear in and around the WordPress community that you might not fully understand but have become familiar with because of common use. This week we shall be a bit more technical and try to introduce a little bit more of what goes on behind a WordPress theme, its basic parts, and how it is put together to function the way we normally see it.

A WordPress theme is quite similar to a sentence. It is a combination of several parts to express a visual representation of a design thought. Let’s take a look at these basic parts (not necessarily 8) to give us an idea of what they are and how they function.

A WordPress theme is comprised of as few or as many template files as you like. These templates are PHP (PHP: Hypertext Preprocessor) source files used to generate the pages requested by visitors and are output as HTML (Hypertext Markup Language). (source: codex.wordpress.org) Each of these template files can be configured to function according to a specific design.

WordPress Themes use a combination of template files, template tags, and CSS files to generate your WordPress site’s look. If you are currently a WordPress user (self-hosted or not) you can familiarize yourself by checking out the templates listed below in the backend admin panel of your site. You can look for them under Appearance>Theme>Editor. These may all seem Greek for now and and hard to understand but the goal for now is to simply observe how the codes are written in these templates. Just make sure you don’t edit them by mistake.

Below are the basic templates that you will find among the many other templates in your WordPress theme:

style.css

CSS (Cascading Style Sheets) is a language for defining the formatting used in a Web site. This includes things like colours, background images, typefaces (fonts), margins, and indentation.

The basic principle of CSS is to allow the designer to define a style (a list of formatting details like fonts, sizes, and colours) and then apply it to one or more portions of one or more HTML pages using a selector. To every CSS style definition there are two components: the selector, which defines which tags the style will be applied to, and the attributes, which specify what the style actually does.

CSS allows you to store style presentation information (like colors and layout) separate from your HTML structure. This allows precision control of your website layout and makes your pages faster and easier to update.

index.php

index.php is a universal template, it is what any page (home, archive, single post, etc) will use if no other template is available for it. The index file controls what the homepage looks like.

For the visual learners out there, a very helpful visual resource you can check out is this infographic Anatomy of a WordPress Theme made by Yoast. More on this next week!