WordPress Rewrite API – Part 2

Last time, we covered some of the basics and fundamentals of the Rewrite API in WordPress. In this tutorial, we’ll cover more about these APIs see how to use them to build something more practical.

A products store

We’ll be building a very simple store, and we will be using the rewrite API to setup our store, category, and product URLs.

The store has a number of products organized in categories. To make things easier and simpler, in this tutorial there won’t be sub-categories. As with any store, products should be accessed by a unique URL and display a page with information about the product. There should be a page for each category that lists its’ products, and certainly the main store page which lists the categories.

In a real world, the store data is stored in a database, files or accessed from a third-party service. A store has generally a hierarchical structure (top categories, sub-categories, and then products) and data is pulled from the database to populate PHP objects or arrays. For simplicity, our store data is a pre-defined multi-dimensional array.

It’s important to note here that this code is for educational purposes only. Loading all your store data in an array for every page request is not a good practice. It’s also important to note that when building an e-commerce store in WordPress it is probably much better to use custom post types and taxonomies, but doing it like this works very well for a demonstration of the rewrite API.

In our pre-defined array, I put three categories (computers, cellphones, and cameras). Each category has two products, and each product has a name, description and a price. Certainly, you can add, edit or remove categories/products from the array.

<?php
$store = array(
    'computers' => array(
        'macbookair' => array(
            'product_name' => 'MacBook Air',
            'product_description' => 'The new MacBook Air is faster and more powerful than before, yet it\'s still incredibly thin and light. It\'s everything a notebook should be. And more.',
            'product_price' => '1500'
        ),
        'sony' => array(
            'product_name' => 'Sony Vaio',
            'product_description' => 'The Sony VAIO Z series features an 13" LED-backlit display with native resolution of 1600x768, coupled with Intel GMA...',
            'product_price' => '2000'
        )
    ),
    'cellphones' => array(
        'iphone' => array(
            'product_name' => 'iPhone 4s',
            'product_description' => 'iPhone 4S features Siri, the dual-core A5 chip, the 8MP camera with all-new optics, 1080p HD video recording and more.',
            'product_price' => '799'
        ),
        'nexusprime' => array(
            'product_name' => 'Nexus Prime',
            'product_description' => 'Galaxy Nexus. First phone with Android 4.0, Face Unlock, Android Beam, an amazing HD screen and 4G LTE fast.',
            'product_price' => '599'
        )
    ),
    'cameras' => array(
        'samsung' => array(
            'product_name' => 'Samsung nx11',
            'product_description' => ' The NX11 is fully compatible with Samsungs innovative i-Function lens, which means that the camera can be easily controlled without having to understand all the complex camera settings.',
            'product_price' => '800'
        ),
        'canon' => array(
            'product_name' => 'CANON EOS 600D',
            'product_description' => ' The EOS 600D is powered by an 18-megapixel high image quality CMOS sensor and the powerful DIGIC 4 image processor.',
            'product_price' => '1200'
        )
    )
);

The store URL Structure

The URL structure is what actually matters. Since we have a simple store architecture, our URL structure will be simple too. “mystore.com” is your website URL, it is probably “localhost” if you are running a local server.

http://mystore.com/store

Access the store home page which lists the store categories

http://mystore.com/store/category_name

Access a store category, and get a list of products in this category

http://mystore.com/store/category_name/product_name

Access a store product details.

As the array content changes, our WordPress blog will have less or more pages. These pages should be generated on the fly from our array.

Defining a query variables based structure

In the first part, we mentioned that WordPress loads pages based on the old-fashioned permalinks structure, which is the default when you freshly install it. So apart from the smart permalink structure that we defined earlier, we need to define a query variables based structure.

http://mystore.com/index.php?store=true

Access the store home page which lists the store categories

http://mystore.com/ index.php?store=true&category=category_name
Access a store category, and get a list of products in this category

http://mystore.com/ index.php?store=true&category=category_name&product=product_name
Access a store product details.

Pretty good. Now, there are a couple of things our code should do

1. Read the URL query variables
2. Display the proper page

Reading a URL query variable is done through the PHP $_GET variable. You have probably already used this variable a handful times when developing with PHP. To display the page, we’ll hook into the “template_redirect” filter.

Abid Omar

Abid Omar is an independent consultant specializing in HTML5 , JavaScript and WordPress. He is located in Sunny Tunisia.