WP.osC » Theme Development

Theme Development

Are you able to create your own WordPress Theme? If yes, adapting your Theme to WP.osC will take only a few minutes.

WP.osC (WP-osCommerce) themes are located in Store-root/themes/ directory. For example, a Theme named "flower" must reside in the Store-root/themes/flower/ directory.

Let’s suppose that you have installed WP.osC in a subdirectory of your Wordpress site , called “shop”. If the shop/themes/flower directory does not exist then WP.osC switch back automatically into the default Theme.

Please note : shop/themes/flower.1.3/flower/ is NOT the same thing as shop/themes/flower/. In the first case "flower" Theme will not be activated.

A default Theme is initially included in the WP.osC package. This Theme, specially adapted for use with WP.osC (Symbiosis and Standalone), is a modified version of WordPress "Default" Theme. You can use it as starting point.

A WP-osCommerce Theme consists of at least 5 files:

  • style.css
  • header.php
  • index.php
  • sidebar.php
  • footer.php

    • You can use the following functions, in the same manner you would use WordPress functions, to include or get header, footer and sidebar units where you want.

  • get_header()
  • get_sidebar()
  • get_footer()

    • Before making any changes to your Wordpress theme please read the Function Reference [⇒].

    header.php

    A simple example of WP.osC header.php :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php storeinfo('html_type'); ?>; charset=<?php storeinfo('charset'); ?>" />
    <title>
        <?php if(WPOSC_MODE == 'SYMBIOSIS') { ?>
        <?php bloginfo('name'); ?> &raquo;
        <?php } ?>
        <?php storeinfo('name'); ?>
    </title>
    <style type="text/css" media="screen">
    @import url( <?php storeinfo('stylesheet_url'); ?> );
    </style>
    <?php osc_head(); ?><!-- This function is absolutely required -->
    </head>
    <body>
    <div id="page">
    <?php if(WPOSC_MODE == 'SYMBIOSIS') { ?>
         <h1><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>
         <?php } else { ?>
         <h1><a href="<?php storeinfo('url'); ?>"><?php storeinfo('name'); ?></a></h1>
    <?php } ?>
    <div id="content">
    <!-- end header -->

    Sidebar.php

    A simple example of WP.osC sidebar.php :

    <!-- begin sidebar -->
    <div id="menu">
    <ul>
       <li id="search"><?php include (TEMPLATEPATH . '/searchform.php'); ?></li>
       <?php osc_shopping_cart(); ?>
       <?php osc_list_user_pages(); ?>
       <?php osc_list_categories(); ?>
       <?php osc_list_catalog_pages(); ?>
       <?php osc_list_info_pages(); ?>
    </ul>
    </div>
    <!-- end sidebar -->

    index.php

    • A simple example of WP.osC index.php :

    <?php get_header(); ?>
    <div class="navigation"><?php the_navigation(); ?></div>
    <div class="post">
        <h2><?php the_title(); ?></h2>
        <div class="content"><?php the_content(); ?></div>
    </div>
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

    • Another simple example of WP.osC index.php (for WP Loop fans):

    <?php get_header(); ?>
    <div class="navigation"><?php the_navigation(); ?></div>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="post">
        <h3 class="title"><?php the_title(); ?></h3>
        <div class="content"><?php the_content(); ?></div>
    </div>
    <?php endwhile; endif; ?>
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

    footer.php

    A simple example of WP.osC footer.php :

    <div id="footer">
    <p>
    <?php storeinfo('name'); ?> is powered by <a href="http://wposc.com/">WP.osC</a>
    </p>
    </div>
    </body>
    </html>

    searchform.php

    A simple example of WP.osC searchform.php :

    <form method="get" id="searchform" action="<?php the_search_action(); ?>">
    <label class="hidden" for="s">Search for:</label>
    <input type="text" value="" name="keywords" id="s" /><!-- Please use "keywords" as name -->
    <?php the_search_key(); ?>
    <input type="submit" id="searchsubmit" value="Search" />
    </form>

    Samples

    Free Templates available for download [⇒]