The Optimized WordPress Sidebar

According to the WordPress Code

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

Historically, the main purpose of the sidebar has been to provide navigation assistance for the visitor – a function that commonly continues to the present day. These navigation aids are designed to help people move about your site and find the information you want them to see. The list of navigation items includes Categories, Pages, Archives, and even the most recent posts. Another navigational tool you’ll see in the sidebar is a search form to help people find what they are looking for on your site.

The first information in the standard WordPress installation is a list of Pages or Categories. Listing Pages helps the visitor find more information about your site, like About, Contact, Register, or Site Map. The information displayed in the sidebar is controlled by your Theme’s Template sidebar.php file.

Rethinking your Sidebar

Next to the menu navigation, the sidebar is your virtual signpost pointing the way to exactly where you want to direct your traffic. It acts like a target board of links where you deliberately shoot your traffic towards. That’s why you need to give careful thought to what goes into your sidebar. Every link should be strategic…optimized. Populating the sidebar with useless links that have no value to your users nor to your ranking is a waste of virtual real estate.

Left? Right? Nowhere in sight?

Tired of the left-right sidebar configuration/ Did you know that you can add sidebars to your theme other than the usual left-right configuration? You can actually put additional sidebar in a header, a footer, or any other area in your template. Additional sidebars let you place any WordPress Widget (such as Recent Posts, Pages, Links/Blogroll, Calendar, Tag Cloud, as well as any custom widgets) into new areas of your WordPress template. Check out this handy tutorial by Michael David to see how it’s done. Some content-rich sites have totally junked the sidebars or strategically relocated them as part of their branding. Whatever you decide to do with your sidebar, displayed or hidden, should be towards the goal of enhancing your user’s experience on your site while enhancing your site’s overall performance.

5 Great Resources for Stock Imagery for your WordPress Themes

Choosing the right photos for your WordPress theme demo is key. It’s what catches your visitor’s eye when they arrive at your website and hopefully it is interesting enough to sustain their attention and make them stay. Poorly chosen photos can spell disaster for your excellently coded theme and wastes golden opportunities to close a sale. The multiracial corporate group shot and the guy or girl in corporate attire with a headset are unexciting and kinda cliché.

Here are some excellent sources for stock photos or graphics you can use to enhance your WordPress theme.

Photodune

Photodune is a huge marketplace of royalty-free high quality photography. Photodune is part of the highly creative Envato community of which Themeforest is a part of. File prices range from $1 up.

Licenses:

  • PhotoDune Regular License allows use of the item to create multiple (more than one) end products, which are distributed free to end users by you or by one client. Unlimited copies are permitted for websites, and for other uses there is a limit of 250,000 copies across all products. If you are a freelancer, one license is needed per client.
  • PhotoDune Extended License allows use of the item to create multiple (more than one) end products, which you or one client may sell to end users. Unlimited copies are allowed. If you are a freelancer, one license is needed per client.
  • Other licenses include Tools license, Logo license, T-shirt license (regular or extended), App license, Personal license

500px

500px is a premier worldwide photo sharing platform for aspiring and professional photographers who get to discover new photographs, share their own images, buy featured photos, and also sell the best of their own portfolio to thousands of subscribers. Browse through thousands of images from all types of content neatly categorized by subject. Settings can be adjusted to restrict displaying photographs classified as adult content. Downloads are all HD digital files and can be sold as downloadable hi-res files or canvas prints. Transactions are handled via the website or an iPad app. Download costs start at around $3 for hi-res files and $120+ for canvas prints. You can signup as a member. Membership starts from $0 (free account) to $49.95/year.

Shutterstock

Shutterstock is a stock photography agency and global image marketplace that maintains a library of royalty-free stock photos, vectors, illustrations and footage available by subscription or per item.

Plans and Pricing

  • Standard License – 25-a-day Subscriptions allows you to download 25 images everyday including access to all JPEG and Vector sizes (starting at $249 up to $2500+)
  • Standard License – Images on Demand allows you to download images (jpgs and vectors) any time for up to one year (starting at $49/5 downloads to $229/25 downloads)
  • Enhanced Subscriptions allows you to download images (TIFF, jpg, vector) any time for up to one year (starting at $199/2 downloads up to $1699/25 downloads)

Fotolia

Fotolia is a community of artists, graphic designers, creative agencies devoted to offering affordable creative royalty-free images, vectors, illustrations and video footage clips which can be used for any design project or document with no time limits or restrictions on the number of printed copies.

Subscription Plans:

  • Daily – Daily Subscription plans allow members to download from 25 to 250 creative files per day. Download high-res images, vector illustrations and video footage every day from $0.16 per file.
  • Monthly – Monthly Subscription plans allow members to download each month from 5 to 5000 creative files without daily limit. The monthly Subscription plan allows you to download high-res images, vector illustrations and video footage from $0.84 per file. If you don’t use all of your downloads within that month, these unused downloads rolls over to the next month for as long as your subscription is active or renewed.
  • Individual – Individual Subscription option allows one user to download images daily or monthly, according to the Subscription plan purchased.
  • Multi user – Multiple Users Subscription option allows a company to share access to Fotolia’s images, vectors and videos within its company.

Stock.XCHNG

Stock.XCHNG is the world’s leading FREE stock photography site. SXC was launched in February 2001 as an alternative for expensive stock photography. The idea was to create a site where creative people could exchange their photos for inspiration or work. It is now wholly owned by Getty Images. Images are totally free as long as you stick to the rules in the Image license Agreement. Also, in some cases you may need to notify the artists about using the images and sometimes you need to give credit to them.

WordPress theme demos need not have the same stock photos, images, or vectors. Take your pick from premium or free images to make your demos less predictable and boring. Spice up your demo pages and make them as interesting and as eye-catching as you can with the right image. After all, a picture is worth a thousand words.

Index.php, The Loop and your WordPress Content

We have already discussed the header and the menu in our previous articles. In continuation of our series, we will now take a look at the Content section of the WordPress theme or the index.php. Here’s a recap of what we wrote:

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, on the other hand, 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.

Now, let’s take a look at what a Loop is. According to the WordPress Codex:

“The Loop” is the main process of WordPress. You use The Loop in your template files to show posts to visitors. You could make templates without The Loop, but you could only display data from one post. The Loop should be placed in index.php and in any other Templates used to display post information.

The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post.

Before The Loop goes into action, WordPress verifies that all the files it needs are present. Then it collects the default settings, as defined by the blog administrator, from the database. This includes the number of posts to display per page, whether commenting is enabled, and more. Once these defaults are established, WordPress checks to see what the user asked for. This information is used to determine which posts to fetch from the database.

If the user didn’t ask for a specific post, category, page, or date, WordPress uses the previously collected default values to determine which posts to prepare for the user.

After all this is done, WordPress connects to the database, retrieves the specified information, and stores the results in a variable. The Loop uses this variable’s value for display in your templates.

Below is a visual of how all these php files and templates work together. It shows which template files are called to generate a WordPress page based on the WordPress Template hierarchy.

And here’s a sample code of a simple index page:

<?php
get_header();
if (have_posts()) :
while (have_posts()) :
the_post();
the_content();
endwhile;
endif;
get_sidebar();
get_footer();
?>

For beginners out there, it’s like telling WordPress to do certain functions based on a set of defined parameters – an “if”-“then” scenario. “IF” (parameter A) is true, “THEN” (execute this action). “IF” (parameter A) is false, “THEN” (execute this action instead).

For the more advanced and those who would like to sink their teeth into something more “meaty”, here are some excellent references and tutorials you can check out:

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.

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.

Fusion Theme from Elegant Themes is HERE!

Elegant Themes’ recently released Fusion Premium WordPress Theme is a theme designed to bring pizzazz into business websites by fusing fun and professionalism together in one awesome theme. Who says business themes have to boring and sterile when you can jazz it up and make it more interesting? This theme is intended for startups, tech companies, and design firms but it can easily be tweaked and adapted to whatever website you have in mind.

What’s hot? Fusion’s generous homepage slider dominates the theme’s layout even beyond the fold giving you maximum room to showcase your very best products or services with a bang. You have a choice of 5 gorgeous backgrounds to wow your audience with and the animated slideshow is smooth and sleek. The font choices used add that overall subtle elegance to the whole theme while still maintaining readability.

This premium WordPress theme also includes several page templates like: a contact form with built in Captcha, a portfolio section with 5 layout options, a sitemap, an image gallery, an advanced search page, and a not your usual WordPress login page. You can also assign content like quotes, article excerpts, client logos or icons to specific widgetized sections for that professional feel.

Overall, Fusion’s theme layout, color styling, font choices, and built-in features and functionalities are great as is but if you want to customize certain features to make it more custom you can do so via its powerful Theme Options Panel. You can also enhance other functionalities with the use of the theme’s shortcodes. This premium WordPress theme is responsive so you can be assured that you the same pizazz is there no matter what screen size you view it in.

Features:

  • Perpetual Updates
  • Secure and Valid Code
  • Browser Compatibility
  • Complete Localization
  • Unlimited Colors
  • Unparalleled Support

Fusion Premium WordPress Theme includes top-notch tech support provided by Elegant themes’ support staff to help you setup your site and get it running in no time.

Get Fusion from Elegant Themes Now!

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.