Starlicious is an original online game show combining the competitive and addictive nature of Jeopardy-style trivia with the subject matter of Access Hollywood and US Weekly.  We were tasked with designing and developing the online environment in which viewers could watch each of the 10 episodes, shown over the 12 week season.

In addition to the trivia show, No Soap Radio Entertainment wanted to provide celebrity enthusiasts from around the country the ability to play an online trivia game of their own. In response to this need, we designed and developed a trivia game using a combination of technologies including Flash, PHP and XML. Here, the questions are shown in a timed, multiple-choice environment, and users can register (via Facebook Connect, MySpace ID, etc.) to post high scores, challenge friends and compete for prizes. The prizes include the opportunity to be a contestant on a future episode of Starlicious, as well as a grand-prize tropical getaway.

As part of its distribution and marketing strategy, No Soap partnered with Dailyfill.com to ensure that Starlicious reached a targeted and relevant audience to optimize engagement. This required us to design and develop a flexible site to fit within an iframe on Dailyfill.com.

Half way through the first season, Starlicious is exceeding projections and building a loyal audience – which makes us very happy for our client! Celebrities are a minor (or big…) obsession for some of us and every day we learn something new! So check out Starlicious for yourself and see how much you really know about Brangelina.

After spending some time working with Magento (an open-source ecommerce platform that’s been on the development scene for a few years now), I have determined that what their documentation really needs is a WordPress-esque “Template Tags” area.

When you’re just starting out with a new platform, documentation is invaluable, and the documentation for Magento seems woefully lacking in terms of front-end development. (If you have a favorite resource, I’d love to hear about it!)

Here are some tips / shortcuts / code snippets I’ve found useful; maybe they’ll be helpful to new Magento developers as well.

For use in the .phtml files:

PAGE PATH

<?php echo $this->getUrl('myCMSpage'); ?>

IMAGE PATH

<?php echo $this->getSkinUrl('images/button.gif'); ?>

PRODUCT LINK

<?php echo $this->getProductData()->getProductUrl(); ?>

PRODUCT NAME

<?php echo $this->htmlEscape($this->getProductData()->getName()); ?>

DISPLAY ALL OF A PRODUCT’S CATEGORIES

<?php $categories = $_product->getCategoryIds();
foreach($categories as $k => $_category_id):
    $_category = Mage::getModel('catalog/category')->load($_category_id); ?>
    <a href="<?php echo $_category->getUrl() ?>"><?php echo $_category->getName() ?>
<?php endforeach; ?>

USE A STATIC BLOCK IN A TEMPLATE FILE

<?php echo $this->getLayout()->createBlock('cms/block')->
setBlockId('YOURBLOCKID')->toHtml(); ?>

TEST FOR A PRODUCT ATTRIBUTE

<?php if ($this->product['attributename'] == "attributevalue") {
    // your stuff here
} ?>

TEST IF IN CATEGORY

<?php if ($this->getCurrentCategory()->getName() == "My Category") {
    //do some stuff
} ?>

CALL AN ATTRIBUTE ON THE PRODUCT LIST PAGE

<?php if ($_product->getData('attributename')):
    $_staff_pick= $_product->getResource()->getAttribute ('attributename')->getFrontend()->getValue($_product);
    if ($_attributename == "Yes"){
        // DISPLAY ATTRIBUTE
    }
endif; ?>

MORE FUNCTIONS THAT MAY COME IN HANDY

$this->getCurrentCategory()->getImageUrl();
$this->getCurrentCategory()->getDescription();
$this->IsTopCategory();
$this->getProductListHtml();
$this->getCmsBlockHtml();

OTHER PRODUCT ATTRIBUTES YOU CAN CALL
Using $this->product['attributename'] syntax:
(Values for these attributes are here just as examples; Yours will likely be different.)

[store_id] => 1
[entity_id] => 3
[entity_type_id] => 4
[attribute_set_id] => 4
[type_id] => simple
[sku] => 2281
[category_ids] => 2,15,17,23,24
[created_at] => 2008-09-09 16:24:03
[updated_at] => 2008-09-15 22:47:51
[has_options] => 0
[name] => ProductName
[url_key] => productname
[gift_message_available] => 2
[meta_title] =>
[meta_description] =>
[image] => /p/r/product_productname.gif
[small_image] => /p/r/product_productname.gif
[thumbnail] => /p/r/product_productname.gif
[custom_design] => default/yourthemefolder
[options_container] => container2
[url_path] => productname.html
[status] => 1
[visibility] => 4
[tax_class_id] => 0
[weight] => 1.0000
[price] => 37.9900
[description] =>
[short_description] =>
[meta_keyword] =>
[custom_layout_update] =>
[media_gallery] => Array
[tier_price] => Array
[stock_item] =>

For use from within a Magento CMS page:

CALL A STATIC BLOCK FROM WITHIN A CONTENT AREA

{{block type="cms/block" block_id="your_block_identifier" template="cms/content.phtml"}}

IMAGE PATH FROM WITHIN CMS

{{skin url="images/logo.gif"}}

Notes

I work off a file very similar to this and reference it all the time. Feel free to save any or all of these examples into a file that you can reference when you’re developing a Magento theme – I know that when I was first starting out in Magento I would have killed to have a reference like this to start from. Anybody else have some cheat-sheet snippets for Magento they’d like to share?

In brief, once installed, the plugin will act automatically, relying on CSS classes to target content. Typography styles are defined using a simple rule syntax not at all unlike CSS allowing for versatility and flexability all from within the wordpress dashboard. Since it is a server-side technology, the method is truly cross-platform and allows license-burdened fonts to be secured to prevent download.

Download the plugin here.

I know I already wrote a post listing ‘plugins every WordPress site should have‘ but there were quite a few I didn’t mention – just because I personally like the plugin and use it every time doesn’t mean it works for everybody in every situation.  But I love these SO much and I’m just worried that some poor WordPress developer doesn’t know about them, so what else can I do but write about more plugins?

Here are the plugins I mentioned in my previous post:

• All-In-One-SEO Pack
• Google XML Sitemap
• WP-SpamFree
• yoast.com Google Analytics
• Feedburner FeedSmith

In addition to those, there are a few more plugins I have a special warm place in my heart for.  (And despite the title of this post, they are pretty basic and not really all that “XTREME” – but is anything labeled “XTREME” really all that “extreme” anyway?)

Improved Include Page

I don’t know how many times this plugin has simplified my life.  If you are using WordPress as a CMS, and you want the client/blogger to be able to edit any text on your site, this plugin is super-awesome.  You can take any block of text, say, a newsletter call out in the sidebar, a special offers box on the homepage, or any other piece of segmented tex – and create a new page for it.  Let’s say you make a page called ‘Newsletter Signup Text’, and it’s ID number is 3.  Then in your sidebar include file, just call the function: iinclude_page(3); and the content of that page will be displayed.

Here’s another example.  On the homepage for FutureVet, there are multiple, separate blocks of static content.  I could have created one page called “Home”, included all my code structure and multiple ‹div› tags in the page content, and just crossed my fingers that whoever edited that page didn’t accidentally delete any of my code.  Instead, I split up the editable content into different pages, and used Improved Include Page to include them in the homepage template.

To do this, I created a template called homepage.php.  In the WordPress admin area, I created one page called “Home” that contains the introduction text, and assigned it to the homepage.php template.  I created three subpages of Home, and named them “Kids Callout”, “Students Callout” and “Vet Professionals Callout”.  Those three pages contain the text in the three blue boxes.  In the homepage.php template, I added the three iinclude_page() calls to each of those pages, in the appropriate place in the code.  Now all the text on the homepage is editable, with no risk of accidentally deleting important structure code!  I love it.

Improved Include now also has a “teaser” option – useful if you have a regular full-blown page of content but want to show a little preview of the content on your homepage or sidebar.  It works just like the excerpt option for posts, just use the ‹!–more–› tag to determine the cut off point for the teaser.  (Thanks to Christine for bringing that to my attention! :)  )

More Fields

One thing that WordPress doesn’t really do as well as other CMS’s like Expression Engine, is how it handles custom fields. Custom fields provide little bits of information (or ‘metadata’) that are attached the post but not in the actual post content.  The trouble with custom fields in WordPress is that they only provide text input, and they can be confusing to use.  By default, you create a custom field by picking the custom field variable name from a dropdown, then adding the value for the field, then clicking “Add Field”.  If you ever need to change a field, you have to go through two steps – updating the custom field, and then saving the page.  I’d wager that many people make the mistake of not saving the custom field before they save a page.  Plus, if you have several types of pages, that need different custom fields, it can be hard to remember which fields you need for which page.  Custom fields can be a big headache in WordPress.

That’s where More Fields comes in handy.  With More Fields you can create groups of custom fields, each with their own space on the edit screen, with a helpful descriptive label (much easier to understand than variable names).  Plus you can choose whether you want a text field, a checkbox or a select box for each custom field.  The next major release of the plugin will also include WYSIWYG text areas as well! (Awesome!)

Here’s an example of how More Fields improves your custom field experience.  Let’s say you have a recipe blog, and you like posting nutrition information along with every dish, and you want to display them in a decorative box to the side of your post.  Here’s how that would look with standard custom fields:

Ugly and confusing!

Here’s what they look like with More Fields:

Ah, much better!

Custom Fields have many, many uses – any time you need to attach metadata or variables to a post – and More Fields makes them so much easier and more practical to use.

Also, let me not forget to mention how easy it is to call these custom fields in your templates.  Just use meta(‘customfield_name’) (to print the data) or get_meta(‘customfield_name’) (to assign or manipulate the data).    If you aren’t aware of the standard way of getting custom fields in WordPress, let’s just say it requires many more lines of code, and leave it at that.

More Fields.  Why settle for anything less?

To be continued…

I have a few more plugins to cover but I think I’ve gushed enough for today.  Tune in next time for even more WordPress Plugins…  XTREME! (guitar squeal!)