Customizing WordPress theme

March 24, 2008 – 4:36 pm

So, you have installed WordPress and Outrix Feed plugin, added products information – now you need to change the way product information is displayed.

‘Outrix Default’ theme is already configured to display images, descriptions and other product information. Download this theme from our website, unpack archive and copy its contents to ‘wp-content/themes’ folder. Activate ‘Outrix Default’ theme. To do this, log into admin panel of your website, switch to ‘Presentation’ tab and choose ‘Outrix Default’.

Now the homepage, categories page and search product page will display appropriate image, and product details page will display screenshots, system requirements and purchase/download URLs.

Let’s take a closer look at theme’s template.

Open ‘index.php’ file of our theme. This file is responsible for the looks of the homepage of your website. This code displays product information:

<?php if (get_post_meta($post->ID,'outrix_type',true) != '') { ?>
<a href="<?php the_permalink() ?>">
<img src="<?php echo get_post_meta($post->ID,'outrix_img_60x40',true) ?>" width="60" height="40" style="margin:0px 5px 0px 0px; float:left;" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" /></a>
<?php the_excerpt(); ?>
<?php } else { ?>
<?php the_content() ?>
<?php } ?>

1. Changing image

To change an image, replace ‘outrix_img_60×40′ with ‘outrix_img_80×80′, for example, and specify new image size accordingly:

• width=”80″,
• height=”80″.

Now when you’ll open homepage of your website, you’ll see 80×80 images instead of 60×40 ones.

Currently the following image keywords are available:

• ‘outrix_img_60×40′,
• ‘outrix_img_80×80′,
• ‘outrix_img_175×150’,
• ‘outrix_swf_175×150’ – animated Flash banner.

2. Changing description

To change product description, replace <?php the_excerpt(); ?>, for example, with
<?php echo get_post_meta($post->ID,'outrix_desc_450',true) ?> - the homepage will now display 450 characters descriptions.

You can use these keywords to display text:

• ‘outrix_desc_45′,
• ‘outrix_desc_80′,
• ‘outrix_desc_250′,
• ‘outrix_desc_450′,
• ‘outrix_desc_2000′.

the_excerpt(); function outputs short description. Upon addition of new product to the website, the short description is taken from ‘outrix_desc_250′ field. You can edit this description, and upon next renewal it won’t be replaced with the description specified in Outrix RSS Feed. It works the same way with long description (output function - the_content();). First, it’s filled with description of 2000 characters but then can be modified to whatever you prefer.

Categories page (archive.php), product details page (single.php) and search results page (search.php) can be modified the same way. You can experiment with displaying information at each type of page and choose which way you like it better.

Here are additional keywords that you can use:

• ‘outrix_img_640×480_1′ screenshot №1,
• ‘outrix_img_125×94_1′ screenshot thumbnail №1,
• ‘outrix_img_640×480_1′ screenshot №2,
• ‘outrix_img_125×94_1′ screenshot thumbnail №2,
• ‘outrix_img_640×480_1′ screenshot №3,
• ‘outrix_img_125×94_1′ screenshot thumbnail №3,
• ‘outrix_img_640×480_1′ screenshot №4,
• ‘outrix_img_125×94_1′ screenshot thumbnail №4,
• ‘outrix_buy_url’ purchase URL,
• ‘outrix_price_usd’ product price,
• ‘outrix_download_url’ download URL,
• ‘outrix_file_size’ file size of product binaries in bytes,
• ‘outrix_features’ product features,
• ‘outrix_keywords’ product keywords,
• ‘outrix_system_requirements’ system requirements,
• ‘outrix_type’ – game or screensaver depending on the product type.

To display keywords use the following code <?php echo get_post_meta($post->ID,'outrix_key',true) ?>, where ‘outrix_key’ should be replaced with keyword you need.

Using provided keywords, you can tweak every theme to display the product information you need. WordPress themes can be found here or you can use themes specially selected by us: WordPress themes set.

Additional plugins will help you to make your website more attractive for visitors and search engines. We’ll describe them in the next articles.