folktrash.com

niagara-falls
Companies like Google and IBM are trying to lead the world in cutting-edge, efficient data centers. Not to be outdone, on Tuesday Yahoo announced they’re hoping to change to future of data centers as well. The company unveiled plans to build one of the world’s most efficient data centers in Lockport, NY and the details do sound pretty exciting.

The data center will be powered mainly by hydroelectric power from Niagara Falls, with 90 percent of that energy going towards powering the servers. The center itself will be built to resemble a chicken coop, using 100 percent outside air to cool the servers, a task which typically gobbles up 50 percent of a data center’s energy supply. And the company expects the yearly PUE average to be 1.1 or better.

In addition to building this super-efficient data center, the company also committed to reducing the carbon footprint of all their data centers by 40 percent by 2014. They intend to accomplish this through using more renewable energy sources to power their data centers, implementing more efficient building designs and improving the efficiency of the servers themselves.

Another major commitment made in this announcement was that the company would cease purchasing carbon offsets and was aiming to reduce their carbon impact directly through decreasing energy consumption. We would love to hear of more companies relying less on offsets and more on energy-saving improvements.

via Yahoo Blog

Posted in: clippings

Easy E-Commerce With Magento

July 2nd, 2009 / No Comments » / by folktrash

Hundreds of ecommerce systems exist, but very few can match the power of Magento. In this screencast, I’ll demonstrate how to download and install Magento to a local host, configure some of the site options, and create simple and configurable products and categories for our test e-commerce site.

Screencast

Why Use Magento?

Well there are quite a few very good reasons to use Magento:

A Simple Intuitive Interface
Easy To Download, Install & Maintain
Built on current technologies unlike other systems.
Multiple Site Functionality
And best of all…It’s free and open source!

Preparation

As with all successful things in life, preparation is key! Before we can install Magento we must set up a database on our server. Using phpmyadmin we create a new database called “magento”. We will use this later when we come to install Magento.

Downloading/Installing Magento

Once our database has been set up on our server the next step is to download Magento itself. To do that we need to go to the download page on the Magento website. For this tutorial we will be downloading the Full Release in ZIP format. Once you have it downloaded unzip it to the folder of your choice.

Now that we have the files on our server it’s time to install Magento, to do this we go to http://localhost/magento (or whichever folder your using) in your web browser.

Accept the TOC’s and continue onto the next page.

Pick the settings that apply to you and click continue.

Going well so far…Now fill in the database connection settings. Make sure that you hit Use Web Server (Apache) Rewrites for added SEO friendliness and if you want to change the default access address for your backend from /admin edit the Admin Path field.

Fill in the login details you’d like to use for your account and enter an custom encryption key if you like, otherwise leave it blank and Magento will make one for you.

Great, now Magento has been installed on your server, if you have installed locally there is one last step you need to take before you can login…

In your Magento folder go to app/code/core/Mage/Core/Model/Session/Abstract/Varien.php

Find the session_set_cookie_params code block (Line 78) and replace it with this code:

		session_set_cookie_params(
            $this->getCookie()->getLifetime(),
            $this->getCookie()->getPath()
            //$this->getCookie()->getDomain(),
            //$this->getCookie()->isSecure(),
            //$this->getCookie()->getHttponly()
        );

On a proper webhost you do not need to do this! However as we are working on localhost we need to do this to address an cookie issue.

Tax Rules

To set up our different levels of tax we need to go to the Manage Tax Zones & Rates tab under Sales &raquo Tax. If the rule for your state doesn’t exist or has been changed recently then hit the “Add New Tax Rate”.

Save your new tax rule and you are good to go!

Products

Products are key to a site but in Magento there was multiple product types as shown below…To create a new product we need to Catalog tab on the navigation and select Manage Products. And finally click Add Product

Simple Products

These are the products that have no options, such as DVD. To create our Simple product select Default for the attribute set and Simple Product for the Product Type and click Continue.

General Tab

Name: The name of our new product
Description: The main body description of the product; the place to really sell the product and all of its features!
Short Description: The quick overview that appears just below the price on the product page; the place to grab the attention of buyers
SKU: The stock code for the product
Weight: The weight of the product. This can be kilos, tonnes or whatever you want as long as you keep uniformity across all your products
Manufacturer: Blank by default but manufacturers can be added through the Manage Attributes Tab.
Colour: Blank by default but again like the manufactures can be added through the Manage Attributes Tab
Set Product As New From Date: Sets the product to new from the date you enter.
Set Product as New to Date: Sets when the product ends being new.
Status: If the product is Enabled and showing on the website or if it’s disabled.
URL key: The custom option for how the URL for your product is written.
Visibility: Where the product can be found by your visitors;
- Nowhere: The product does not appear on the website.
- Catalog: The product will appear on the website but not in search results.
- Search: The product will not appear on the website but will appear in search results.
- Catalog, Search: The product will appear on the website and in search results.
Allow Gift Message:
- Yes: Allows a gift message
- No: Doesn’t allow a gift message
- Config: Use the site’s configuration

Price Tab

Price: The price of our product
Special Price: Offers on products for limited times.
Special Price From Date: The date in which the special price starts.
Special Price To Date: The date in which the special price ends.
Cost: The cost of the product.
Tax Class: If your product requires Tax added then Taxable Goods must be selected.
Tier Price: Allows for bulk discounts to be set up. Click Add Tier to add quantity discounts.
Google Checkout: Can visitors buy this product using Google Checkout.

Meta Information Tab

Meta Title: Information that appears in the <title> tag.
Meta Keywords: keywords that apply to your product.
Meta Description: A short description of your product that appears on Search Engine Result Pages.

Images Tab

Images are a key part of your product and the better quality you can get the more chance you have of making a sale, Magento allows for multiple images to be uploaded and specific images to be uploaded for the Base Image, the Small Image and the Thumbnail, as well as allowing for a label. If you want to remove an image simply click the Exclude to hide or the Remove to delete checkbox(s).

Base Image: The main image that appears on the product page.
Small Image: The image that appears in the categories/search view.
Thumbnail: The thumbnail of the product.

Design Tab

Unless you are using a template for your Magento store it’s best to give this one a miss, but for anyone who is curious the Design tab allows you to use themes that you have set up and allows you to choose active to and from dates as well as changing the page layout into different column blocks and so on.

Inventory Tab

Manage Stock: If you’d like to track and manage stock levels then leave this set to Yes
Qty: The amount of product you have.
Stock Availability: If the product is in stock or not. Setting this to Out of Stock will not hide the product on the website!

The other options are best left to the site configuration however are all pretty self explanatory if you wish to set them to your needs.

Categories Tab

Your product can appear in multiple categories; simply click the checkbox of the category you want it to appear in!

Related Products / Up-sells / Cross-sells

With related products, up-sells and cross-sells the interface to add is same, to add a product simply select a field you wish to search by and click the search button, a list of products matching your criteria will appear. Click the checkbox next to the product and it will appear as a related product/up-sell or cross-sell as applicable.

Product Reviews / Product Tags / Customers Tagged Product

These are all added by users and can viewed from the tabs.

Custom Options

These are custom options that you can add to your product. To add a custom option click Add New Option and fill in the details.

Managing Attributes & Attribute Sets

Attributes are the options that make up your products, for example colour, weight and so on. Attribute sets are sets of attributes that make a whole product and allow us to make configurable products.

Attributes

To create a new attribute/view our current attributes we need to go to the Catalog tab on the navigation and select Attributes and then Manage Attributes. To view a attribute simply click on the row, to create a new attribute click the Add New Attribute Tab.

Properties Tab

It’s best to use an convention when you are naming your attributes, as your list grows it will make it easier to find what you are looking for. I like to use options_option_product which for this product would be options_colour_nettuts_shirt. We must set our scope to global and Catalog Input Type to Dropdown in order to create our configurable product(s). We are only applying our Attribute to Simple Products and Configurable Products. In order to use this attribute in our configurable products we must choose Yes on the Use To Create Configurable Product field. We must also select Yes on the Visible on Product View Page on Front-end field in order to make the attribute visible.

Manage Label / Options Tab

Next we need to set up the options for our user to select from when choosing there product. In our example we are using Colour as our product option.

The title is what the visitor will see above the dropdown, with Magento we can define what the admin sees and what the user sees making it easier to track options with additional information, in the example we have called our Title, Colour. If we leave the Default Store View blank it will copy what we have entered into Admin.

To add the options for our product click the Add Option button for the number of options you require, in our example 3. Like the title if we leave the Default Store View blank it will copy what we have entered into Admin but we can use the Admin field to add more information, making it easy to fulfill orders for example. We use position to order our options and the Is Default radio box to define which option is default. We can easily delete any option using the button to the right. Once we have all the options we want click Save to return to the attributes page.

Attribute Sets

Next we need to set up our Attribute Set in order to create our configurable product. We navigate to the Catalog tab on the navigation and select Attributes and then Manage Attribute Sets. Like the Attributes page we have a list of our Current Attribute Sets; Default should only be appearing. Click Add New Set.

Again like our Attribute we should use a convention to name our Attribute Set…so matching our Attribute; options_size_tshirts. Since we have no other Sets we are going to base the new one on Default.

To include our Attribute into our Set we simply need to click and drop it into the General group from the right hand list. Click save and our set is complete. Going well so far…

Creating A Configurable Product

Creating a configurable product is very similar to creating a Simple Product. To start we create a new product. But we need to change the Attribute Set to the one we just created and the product type to Configurable Product and click continue.

Next we need to pick the Attributes we would like to use in our product. Only attributes with a scope of Global, type of dropdown and the option to create a configurable product set to yes can be used.

The only tabs that change are the Inventory tab and an new tab has been added called Associated Products which is where we will add our options. Once we have filled in all our details we need to save and continue edit before we can begin to add our Associated Products. Unlike some other ecommerce systems Magento creates simple products that are hidden in order to create a configurable product.

To create the options we are going to use the “Quick simple product creation” tool to make our Simple Product options. For the name and SKU fields you can let Magento auto generate these but for added control I suggest that you fill these in yourself. In the example we are creating a green shirt option. We have filled in the Name, SKU, Weight and have set the product to Enabled. However we must set the visibility of our product to nowhere. From the drop-down we select the attribute option we are creating for and set the price. For the default option we don’t enter a value and it will use the price we set on our configurable product but for the other options we enter the difference between the configurable product and the option. So if the Green top is $15 and our configurable product is $20 then we have to enter -5.00 as our price. We then need to set the Qty for the option and the Stock Availability to In Stock and click Quick Create. We repeat this process until we have added all of our options and click save. Our configurable product is now complete. If we view our products page we can see that Magento has created the options as simple products for us that have been hidden. Making tracking stock much easier!

Congratulations

Well done, you have just downloaded and installed Magento to your localhost, you have created a simple product, a custom attribute and attribute set, a configurable product using your custom attribute and a category. I hope that you have learned some of the basics of Magento and I wish you all the best during your endeavors. If you have any questions please leave a comment below and i’ll try my best to help you out!

If you a real go getter and would like to get into some of the more advanced topics or would like to learn more than I suggest that you check out the Knowledge Base on the Magento website as well as Designers Guide if you’re interested in customizing Magento more.

Posted in: clippings

@dandean uh, since they found …

July 2nd, 2009 / No Comments » / by folktrash

@dandean uh, since they found twitter.

Posted in: musings

Power Tips For WordPress Template Developers

July 2nd, 2009 / No Comments » / by folktrash

With its latest releases, WordPress has extended its potential well beyond blogging, moving toward an advanced, robust and very powerful content management solution. By default, WordPress delivers a very lightweight, minimal system that offers only basic functionalities. But where the WordPress core falls short, there are a wealth of plug-ins that extend its limitations.

Plug-ins often offer simple solutions, but they are not always elegant solutions: in particular, they can add a noticable overhead, e.g. if they offer more functionality than needed. In fact, some general and frequently needed WordPress-functionalities can be added to the engine without bloated plugins, using the software itself.

This article presents 8 tips for WordPress template developers that address common CMS implementation challenges, with little to no plug-in dependence. These examples are written for WordPress 2.7+ and should also work in the latest WordPress-version.

You may be interested in the following related posts:

1. Associating pages with post categories

WordPress enables administrators to identify any page as the posts page: this is ideal for CMS implementations featuring a single news or blog feed. However, WordPress provides no simple, out-of-the-box mechanism to configure a site with multiple, independent feeds.

Here’s a common use case: a company wants a simple and casual blog, and a seperate and more formal feed for press releases inside their “About Us” section. Let’s list a few requirements mandated by a sample client seeking just that:

At no point should these two feeds be displayed as one.
Links to these feeds need to appear in page navigation.
The Press Release page needs to have static, maintainable content above its feed.
For SEO purposes, these feeds should have a page-like permalink structure: in other words, “mysite.com/category/press-releases” is unacceptable; the goal is “mysite.com/about-us/press-releases”.

The proposed sitemap

As is often the case, there are several approaches one can take. Major considerations used to guage the best approach include the number of standalone feed pages (one, in this case: Press Releases) and the necessity for a “primary” feed requiring multiple category support. For this example, let us assume that “Our Blog” does need to behave like a full featured blog with categories.

Preparing the site

This approach to “pages with single feeds” is built upon an association created between a page and a post category. The “primary” blog will simply be the “posts page” with a few template adjustments that will exclude posts from the “Press Releases” feed. To meet the SEO requirement for a logical and consistent URL structure, we will need to carefully configure and set permalinks.

In the “Reading” settings, ensure that the “Front page displays” option is set to “A static page”, and that the “Posts page” is set to “Our Blog”.
In the “Permalinks” settings for WordPress, ensure that “Custom Structure” is selected. The structure should be: /%category%/%postname%/.
In the page list, identify the the permalink (or slug) for the “About Us” page (using our example sitemap: let’s say “about-us”). Identify the slug for the Press Releases page (”press-releases”).
Two corresponding categories must be added: an “About Us” category with a matching permalink (”about-us”), and a “Press Releases” category with a matching permalink (”press-releases”) and its parent category set to “About Us”.
Create a post in the “Press Releases” category for testing purposes.

The proposed sitemap

Excluding a category from the blog page

To exclude a category from the main blog page (which shows all posts across categories), the post query used for the blog page template must be modified.

The WordPress codex outlines the solution. Simply identify the category ID for the “Press Releases” category (hovering the mouse over the category name in the admin panel and looking at the URL in the status bar is an easy way to find the ID - let’s use 5 for the example), and insert the following code above the post loop:

query_posts("cat=-5");

Note that many templates also include a list of categories in the sidebar, recent post lists, and other components that may not exclude posts from the “press releases” category. These will also need to be modified to exclude the category; this is easily supported by most WordPress calls.

Enabling the individual feed page

The feed page will require a custom page template. For this example, we named the template “Press Release Feed”, and used the generic “page.php” template as a starting point (copying it and renaming it “page_press.php”).

Since the requirements mandate static, editable page content above the feed, the first post loop - that drops in the page content - will be left as is. Below the code for page content output, another post query and loop will be executed. Once completed, the query should be reset using “wp_reset_query” so that items appearing after the loop - such as side navigation - can correctly reference information stored it the original page query.

The general framework for the code is below. The query posts documentation on the WordPress codex provides insight into great customization.

query_posts('category_name=Press Releases');
if ( have_posts() ) : while ( have_posts() ) : the_post();
	//post output goes here... index.php typically provides a good template
endwhile; endif;
wp_reset_query();

Of course, be certain to assign the “Press Releases” page the new template, in the page editor.

The devil is in the details

Depending on the characteristics of the individual site, many additional template customizations - beyond those outlined above - will probably be necessary. In particular, this “power tip” does not cover specific strategies for handling individual post views within these isolated feeds. At the high level, using conditional in_category checks within the “single.php” template (used for output of individual posts) should provide the foundation for customizing post views based on their category. If you are interested, a more detailed article may explore these strategies in greater detail (please let us know in the comments!).

Alternative Scenarios

Creating individual page templates for each standalone feed is an efficient solution for a site with only a couple of such feeds. There are, however, WordPress-powered sites like m62 visual communications that extend the idea of category and even tag association with pages much more deeply. m62 features dozens of pages associated with individual blog categories, parent categories, and tags, seamlessly mixed in with standard, “feed-less” pages. In these instances, a smarter solution would involve specialized templates that match tag and category permalinks against page permalinks to dynamically create associations.

This approach can also facilitate sites that require more than one “primary” (multi-category) blog, through the use of hierarchical categories / parent categories.

Again, if there is interest, a future article can discuss these methods in detail.

2. “Friendly” member only pages

Out-of-the-box, WordPress includes an option to designate any page or post as private. By default, these items do not show up in page or post lists (including navigation) and generate 404 errors when visited directly - unless the visitor is logged in. While utilitarian, more often than not, this is not ideal for usability.

Often times, sites intentionally make public visitors aware of pages or posts whose full content is only visible to members. A friendly message alerting visitors that they have reached a members-only page, with a prompt to log in, may be a better solution. Content-centric websites may tease the public with “above the fold” - or abbreviated - content for the entire audience, while enticing the visitor to log in or sign up to read the entire article.

Linedata's blog upsells with member exclusive content

This example offers a framework for these “hybrid” member / public pages using the latter scenario as an example. Content featured “above the fold” - or above the “more” seperator - will be visible to the general public. Content below the fold will only be available to members. In place of content below the fold, public visitors will be prompted to log in.

This approach to “hybrid” pages is built upon public, published pages with a custom field used to identify the page content as “member exclusive”.

Create a page or post.
Start with a paragraph or two visible to the general public.
Insert the “more tag” at the end of the public content.
Enter content visible only to logged in members below the more tag.
Add a custom field named “member_content”. Set its value to 1.
Publish the page with public visibility (the default).

Hybrid public / member content

The next step involves editing the applicable template files. Typically, this will be “page.php” (pages) and “single.php” (posts). Note that if these hybrid views will only apply to pages, a developer can create a “member content” page template as an alternative to using a custom field. Doing so will eliminate the need for the custom field check and alternative outputs inside the same template.

For this example, we shall assume that we created a post (not page) with member exclusive content. Therefore, we will need to edit “single.php”. Inside the template, find the the_content call used to drop in page and post content. Here’s what this often looks like before the changes:

the_content();

Here is the new code with the alternative “public” view:

if(!get_post_meta($post->ID, 'member_content', true) || is_user_logged_in()) {
    the_content('<p class="serif">Read the rest of this entry »</p>');
} else {
    global $more;	// Declare global $more (before the loop).
    $more = 0;	// Set (inside the loop) to display content above the more tag.
    the_content(""); //pass empty string to avoid showing "more" link
    echo "<p><em>The complete article is only available to members. Please log in to read the article in its entirely.</em></p>";
}

Combine this with the next tip to include a login form that sends members right back to the current page or post.

3. Embedding a log-in form that returns to the current location

Sometimes, sending members to the standard WordPress login form is not ideal. It may, for instance, not be consistent with the look and feel a client is seeking. There may also be instances where embedding a login form in a page - as in tip 7 - offers superior usability compared to clicking a link for the login page.

The code below drops the WordPress login form into the template, and sends the user back to the page they logged in from.

<?php if(!is_user_logged_in()) { ?>
	<form action="<?php echo wp_login_url(get_permalink()); ?>" method="post">
		<label for="log"><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="22" /> User</label><br />
		<label for="pwd"><input type="password" name="pwd" id="pwd" size="22" /> Password</label><br />
		<input type="submit" name="submit" value="Send" class="button" />
		<label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>
	</form>
<?php } ?>

Be aware of a pitfall of this easy-to-implement power tip: if the user fails to login with the proper credentials, the log-in error will appear on the standard WordPress login form. The visitor will, however, still be redirected back to the original page upon successful log-in.

4. Identifying the Top Level Page

The “top level page” is the highest level page within the current branch of the sitemap. For example, if you consider the page below, you’ll find that “Support & Resources”, “Finding Support”, and “Support for Patients” all share the top level page “Support & Resources”.

The top level page is Support and Resources

There are some relatively new plug-ins that make “section”, or “top level page” WordPress navigation a cinch, such as Simple Section Navigation. However, there are plenty of instances (outside of navigation) where the template may need to be aware of the current top level page.

For instance, you many want to be able to style certain design elements, such as the navigation bar’s background image, depending on the currently chosen section. This can be achieved by checking the page ID of the top level page inside the header, and dropping in additional styles when the IDs for those top level pages were found.

Here is how it works. Although WordPress offers no built in call to determine the top level page, it can be found with a single line of code in the template:

	$top_level = ($post->post_parent) ? end(get_post_ancestors($post)) : $post->ID;

Using a ternary conditional, this line of code checks the value of $post->post_parent, which returns the current page’s parent page ID, if one exists. If the conditional is evaluated as “true” (as any positive integer will), than the current page has some “ancestory”; in other words, it is inside of a page hierarchy or branch in the sitemap. If the conditional fails, the page is either a top level page, or not in any page ancestory (i.e. a post on a site without a blog “page” assigned).

If the current page has ancestory, an array containing the hierarchy “above” the page (parents, grandparents, etc) can be retrieved using the get_post_ancestors function. The last value in the array that function returns is always the ID of the top level page. Jump right to the last value using PHP’s end function. If the conditional fails (no ancestory), the code simply grabs the current page ID.

Keep in mind that, in many instances, this information is only useful when WordPress is working with an actual page (as opposed to a post, 404 page, etc). Therefore, this function and code that uses the top_level variable, may need to be wrapped inside a check that confirms that WordPress is loading a page: see the is_page() function.

5. Breadcrumb Navigation - without a plug-in

Example of a WordPress site with breadcrumb navigation

There are plenty of WordPress extensions that generate breadcrumb navigation. But you can actually create custom breadcrumb navigation with only a handful of lines of code in the template, opening up greater control and, potentially, less overhead. This approach to breadcrumbs builds on the get_post_ancestors function discussed in tip #4.

This tip won’t review formatting of breadcrumbs; for this example, the breadcrumbs will be dropped in an unordered bullet list. As it happens, lists of links tend to be a good format for search engines, and you can format them almost any way you like.

To start with, here is a basic implemenation of breadcrumbs that only deals with pages and includes a breadcrumb for “home” (the front page of the site) at the beginning of the list. Depending on the design of a particular template, some checks may need to placed around this code. In this example, it will be assumed that this code will be placed in the header.php template file, that the crumbs should appear only on pages, and that it should not show up on the front page. The current page and front page link will also be assigned special CSS classes for styling purposes.

if (is_page() && !is_front_page()) {
   echo '<ul id="breadcrumbs">';
   echo '<li class="front_page"><a href="http://www.smashingmagazine.com/2009/07/02/power-tips-for-wordpress-template-developers/'.get_bloginfo('url').'">Home</a></li>';
   $post_ancestors = get_post_ancestors($post);
   if ($post_ancestors) {
      $post_ancestors = array_reverse($post_ancestors);
      foreach ($post_ancestors as $crumb)
          echo '<li><a href="http://www.smashingmagazine.com/2009/07/02/power-tips-for-wordpress-template-developers/'.get_permalink($crumb).'">'.get_the_title($crumb).'</a></li>';
   }
   echo '<li class="current"><a href="http://www.smashingmagazine.com/2009/07/02/power-tips-for-wordpress-template-developers/'.get_permalink().'">'.get_the_title().'</a></li>';
   echo '</ul>';
}

If the WordPress implementation has a static front page and has been assigned a “blog” page, one might want to show the breadcrumb path to the blog page. This can be accomplished by adding is_home() to the conditional check at the top:

if ((is_page() && !is_front_page()) || is_home()) {
   ...

The next evolution of this code involves the inclusion of breadcrumbs for individual category archives as well as individual posts. Note that WordPress allows posts to be assigned to multiple categories; to avoid making our breadcrumb trail unweildly, the script will simply grab the first category assigned to the post. For the sake of simplicity, the example will be assumed that hierarchical categories are not in play.

if ((is_page() && !is_front_page()) || is_home() || is_category() || is_single()) {
   echo '<ul id="breadcrumbs">';
   echo '<li class="front_page"><a href="http://www.smashingmagazine.com/2009/07/02/power-tips-for-wordpress-template-developers/'.get_bloginfo('url').'">Home</a></li>';
   $post_ancestors = get_post_ancestors($post);
   if ($post_ancestors) {
      $post_ancestors = array_reverse($post_ancestors);
      foreach ($post_ancestors as $crumb)
          echo '<li><a href="http://www.smashingmagazine.com/2009/07/02/power-tips-for-wordpress-template-developers/'.get_permalink($crumb).'">'.get_the_title($crumb).'</a></li>';
   }
   if (is_category() || is_single()) {
      $category = get_the_category();
      echo '<li><a href="http://www.smashingmagazine.com/2009/07/02/power-tips-for-wordpress-template-developers/'.get_category_link($category[0]->cat_ID).'">'.$category[0]->cat_name.'</a></li>';
   }
   if (!is_category())
      echo '<li class="current"><a href="http://www.smashingmagazine.com/2009/07/02/power-tips-for-wordpress-template-developers/'.get_permalink().'">'.get_the_title().'</a></li>';
   echo '</ul>';
}

There are many ways to extend the breadcrumb navigation further. For instance, a developer might want breadcrumbs for different types of archives (tags, months, etc), or may incorporate hierarchical categories. While this article won’t walk through every possible implementation, the samples above should provide you with a solid framework to work with.

6. Creating sidebar content elements

Many websites feature distinct sidebars with common elements represented throughout the site, such as section navigation, contact information, and special badges (i.e. “Follow us on Twitter”). It is also common for sites to feature more basic HTML blocks in the sidebar that are associated with a single page, or several pages that may or may not be tied together in any logical way.

Some content management systems enable the idea of multiple content blocks out of the box. For instance, CitySoft Community Enterprise allows the editor to select from a variety of page layouts, some of which include multiple blocks of content that can be edited independently. This is convenient for some, though it does have some limitations: (1) it can be hard to integrate the prefabbed layout blocks into unusual areas in the overall site template, and (2), reusing some of these content blocks for multiple pages is not possible (without some additional, complicated custom development).

Here’s how to implement reusable “sidebar elements” in WordPress. For the sake of simplicity, this example assumes that only one sidebar element can be assigned to a page.

Fundamentally, these sidebar elements will simply be pages. Although non-essential, it can be a good organizational practice to create a page called “sidebars” that will contain all of the sidebar pages. Be careful to exclude this page in top level navigation and any other page lists or sitemaps. Sidebar elements are then constructed as “private” pages (so they cannot be searched or viewed independently by general visitors), with the “sidebar” container page set as the parent page. The title of the sidebar page will be used for the title of the sidebar element.

Editing a sidebar on the left; on the front end on the right

Once the sidebar has been created, the editor will need the ID of the sidebar page. The easiest way to find this is by rolling over the page title in the admin page list, and looking for the “id” in the URL (typically in the statusbar).

To assign the sidebar to a page, a new custom field is assigned to the page that will hold the sidebar called “sidebar”. The value for this field is the page ID of the sidebar page.

Now, in the sidebar template file (or wherever the sidebar element should appear), some code is included that checks for the custom field, and - if found - drops in the referenced page. To make the process of dropping the sidebar page content a bit more simple, the example will use the light weight plug-in, Improved Include Page. Here’s the code, which also drops “h2″ tags around the page title:

$sidebar_pg = get_post_meta($post->ID,'sidebar', true);
if (function_exists('iinclude_page') && $sidebar_pg) {
   include_page($sidebar_pg,'displayTitle=true&titleBefore=<h2>&titleAfter=</h2>

      &displayStyle=DT_FULL_CONTENT&allowStatus=publish,private');
}

7. Feature selected posts on the front page

Many CMS implementations feature some selected items from the blog feed on the home page, or even throughout the site in a sidebar or footer element. Content editors are, wisely, selective about what merits a front page mention. Here’s how to implement a selective blog feed that can be placed on a front page template or anywhere else in the design.

A special category is needed to classify posts as “Featured”; a category named “Featured” or “Front Page” is a good convention. For the content editor, marking a post as “featured” is as simple as adding it to this category (remember: posts can have multiple categories). On the template side, the ID of the “featured” category will be needed. The easiest way to find the category ID is by rolling over the category “edit link” inside WordPress administration and noting the ID in the URL (typically in the status bar).

Using this ID (”4″ in the example), and the number of posts to feature on the home page (let’s say three), the following code will list the featured posts beginning with the recent ones.

echo "<h3>Featured Blog Posts</h3>";
echo "<ul>";
$feat_posts = get_posts('numberposts=4&category=71');
foreach ($feat_posts as $feat) {
   echo '<li><a href="http://www.smashingmagazine.com/2009/07/02/power-tips-for-wordpress-template-developers/'.get_permalink($feat->ID).'">'.$feat->post_title.'</a></li>';
}
echo "</ul>";

As with the other examples, this code can be extended in a number of ways. For example, the SGE Corporation front page features the excerpt for the most recent item. The excerpt can be manually entered in the “excerpt” field or pulled automatically (if none is provided) by grabbing a certain number of characters from the beginning of the post’s content.

8. Highlight current post’s category

WordPress page lists assign special classes to each item, including classes that indicate whether a page is the current page, a parent page, an ancestor page, and so forth. Category lists do assign a special class (current-cat) to appropriate list items when the user is browsing a category’s archive. Unfortunately, categories do not, by default, get this special class assigned to them when the user is on a post inside the category. However, one can override this default limitation by grabbing the current category ID and passing it to the wp_list_categories function.

$category = get_the_category();
wp_list_categories('current_category='.$category[0]->cat_ID);

Note that there is one significant downside to this approach – only some category can be passed to the list categories function. So if a post is assigned to multiple categories, only the first category will be highlighted. However, if a site has distinct categories (say a news feed and an editorial feed), this can help a template developer treat the category more like a page navigation item.

You may be interested in the following related posts:

About the author

Jake Goldman is Director of Client Services at C. Murray Consulting, a web development and strategy firm located in Providence, Rhode Island (USA). You can find his insights, development tips, and examples of his work on the company’s blog, or by following him on Twitter @jakemgold.

Tweecently...

Screencast

Why Use Magento?

Preparation

Downloading/Installing Magento

Tax Rules

Categories

Products

Simple Products

General Tab

Price Tab

Meta Information Tab

Images Tab

Design Tab

Inventory Tab

Categories Tab

Related Products / Up-sells / Cross-sells

Product Reviews / Product Tags / Customers Tagged Product

Custom Options

Managing Attributes & Attribute Sets

Attributes

Properties Tab

Manage Label / Options Tab

Attribute Sets

Creating A Configurable Product

Congratulations

1. Associating pages with post categories

Preparing the site

Excluding a category from the blog page

Enabling the individual feed page

The devil is in the details

Alternative Scenarios

2. “Friendly” member only pages

3. Embedding a log-in form that returns to the current location

4. Identifying the Top Level Page

5. Breadcrumb Navigation - without a plug-in

6. Creating sidebar content elements

7. Feature selected posts on the front page

8. Highlight current post’s category

Related posts

About the author

Categories

Archives

Recent Posts