1. Find your font. A good resource of free fonts is www.dafont.com, however make sure the font you are about to use has an EULA that fits your needs.
2. Go to the Cufon site and follow the instructions on how to upload your font and get the generated font.js file. Also download the cufon-yui.js script.
3. Place all the .js files in a new directory in /js/cufon.
4. Open your template’s page.xml file and add the below code in its head section:
   <action method="addJs"><script>cufon/cufon-yui.js</script></action>
<action method="addJs"><script>cufon/YourFontFile.font.js</script></action>
5. Now open your template’s head.phtml file and add the following code at the very end of it:
   <script type="text/javascript">Cufon.replace('h1, h2');</script>

You’re done. Your h1 and h2 tags are now using your custom font.

You can also target spesific CSS classes by adding the following script tag:

The Brage theme also come in six different color schemes, which can be selected directly from the Magento Admin without having to touch any code whatsoever.

Below are some screenshots of the theme.

Silverthemes.com, a Premium Magento Themes company, yesterday released their latest Magento ClearBlue theme.

ClearBlue is focused on a clear blue line going through the whole theme. The design is made for easy customization of both colors and the overall style.

The ClearBlue theme is bundled with:
- Vertical Category menu (Walmart style)
- MagicZoom Plus product-image magnifier
- SimpleBoard magento widget

These popular Magento addons are sold at almost $200 when purchased separately. The theme supports both 3-, 4- and 5-column category-pages – as well as the standard 1-column-, 2-column, (left+right)- and 3-column layout of the store.

The ClearBlue-theme does not have dropdown in the horisontal category menu. This is by purpose as most store-owners want their customers to click through the main category to see special offers etc before navigating to the bottom sub-category.

>> Click here for full demo of template

1. Magento Tubetheme

The TubeTheme by Silverthemes is really a great theme. The design is very clean, inspired by YouTube. The functionality includes both 3-, 4- and 5-column product pages, administration of footer-content in Magento Admin, good SEO although not 100% yet, bordered buttons with CSS3 (works great in Firefox 3.x). The theme also includes lots of great additional addons to make the store perfect.

2. Fashion theme

The Magento Fashion theme by Silverthemes is a dark theme, with strong colors which is perfect for clothes stores and any kind of fashion stores. The Static Blocks can be used to add custom information in the header (links, etc). Plus for very easy installation instructions.

3. Magento Megastore theme

The Megastore theme is a perfect magento theme for any large scale Magento-store with thousands of products in its catalog. The theme includes all the great optional functionality like product popup, catalog dropdown, magiczoom like all the other themes from Silverthemes also have.

Main logic for this is we have to get the product list in ascending order by [order_qty]. So to get this type of list we have to apply

$visibility = array(
Mage_Catalog_Model_Product_Visibility::VISIBILITY_BOTH,
Mage_Catalog_Model_Product_Visibility::VISIBILITY_IN_CATALOG
);

$_productCollection = Mage::getResourceModel('reports/product_collection')
->addAttributeToSelect('*')
->addOrderedQty()
->addAttributeToFilter('visibility', $visibility)
->setOrder('ordered_qty', 'desc');

By this way you get the complete list of product order accoding to order quantity for particular product.

Now to display that list in well formated manner you have to loop over the array of product as

<?php foreach($_productCollection as $product): ?>

<?php
$categories = null;
foreach (explode(",", $product->category_ids) as $catId){

//Mage_Catalog_Model_Category
$cat = Mage::getModel('catalog/category')
->setStoreId(Mage::app()->getStore()->getId())
->load($catId);
$catName = $cat->getName();

$catLink = $cat->getUrlPath();
$categories .= '<a href="'.$catLink.'" title="'.$catName.'">'.$catName.'</a>&nbsp;&nbsp;';
}

?>

<?php if($counter <= $totalPerPage): ?>

<?php $productUrl =  $product->getProductUrl() ?>
<div class="best-sellh">
<div class="wraptocenter">
<a href="<?php echo $productUrl ?>" title="View <?php echo $product->name ?>">
<img src="<?php echo $this->helper('catalog/image')->init($product, 'image')->resize(120); ?>" alt="Product image"  class="shadow" rel="black" />
<!--        <img src="images/prodimg01.jpg" alt="chrysler-building" height="150" width="100" class="shadow" rel="black"/>-->
</a>
</div>

<div class="img_txt" >
<span class="yellow-bg-text"><?php echo $product->name ?></span> <?=$catName?><br />
<p class="price_txt">starts from <span class="price_hd"><?php echo Mage::helper('core')->currency($product->price) ?> </span> </p>
</div>

<br class="spacer" /></div>
<!--
<h4><?php echo $product->name ?></h4>
</a>
<small><?php echo $this->__('Total soled quantities') ?>: <?php echo (int)$product->ordered_qty ?></small><br />

<a href="<?php echo $productUrl ?>" title="View <?php echo $product->name ?>">
<img src="<?php echo $this->helper('catalog/image')->init($product, 'image')->resize(120); ?>" alt="Product image"  />
</a> <br />

<?php echo $this->__('Categories: ') ?><?php echo $categories ?>
<p><?php echo $product->short_description ?></p>
-->
<?php endif; $counter++; ?>
<?php endforeach; ?>

In this way you can get the list of best selling product.

How to use this code:

• Just create one phtml file as[highsold.phtml] in category/product directory
• Paste this code in that file [highsold.phtml]
• Now go to layout/cms.xml file and add following line of code

<cms_page>

<reference name="content">

<strong> <block type="catalog/product" name="highsold" as="highsold" template="catalog/product/highsold.phtml" /></strong>
<block type="cms/page" name="cms_page" />
</reference>
</cms_page>

By this way you are creating a block named as highsold

• Now if you want to display the product list on home page.Just go to home.phtml file and ad following lines as<?php echo $this->getChildHtml(‘highsold’) ?>

• next go to admin/cms/manage pages/ and select home pagel. In content text area add following lines as

{{block type="core/template" name="default_home_page" template="cms/default/home.phtml" }}

Now you should see the products perfectly displayed on home page!

Where Magento is becoming the dominant software for eCommerce websites, is WordPress already the most popular blogging software out there, and with good reason. WordPress can be used in a number of different ways but using WordPress as CMS plus blog engine is what is does best.

So if you’re serious about the online presence of your web shop you should want to take a look at combining Magento and WordPress.

Advantages of integrating Magento with WordPress

There are a couple of advantages of integrating Magento with WordPress:

- With WordPress added to your store you give your customers and regular visitors the ability to interact with you more than when you would just offer products.
- Instead of just offering products you have the possibility to offer extra value by providing interesting links of interest in your field, which in effect establishes you or your web shop as an authority on your subject.
- An added WordPress blog gives you the opportunity to work on your search engine optimization (SEO). Linking to your products in right way will not only make sure your visitors know what’s going on and what you find important but the Search Engines will know this just as well! To learn more about SEO visit this article onMagento SEO by Yoast.

Thing to consider when looking at integrating Magento with WordPress

Let’s say you’re still working on releasing your Magento website, or better yet when you have yet to install Magento. You will have to figure out what to do with your url and your installations of Magento and WordPress. Here are a couple of things to consider:

- Depending on the size of your shop you could install your Magento installation in a subfolder (http://www.yourdomain.com/shop) or sub domain even(http://shop.yourdomain.com) and let WordPress handle the root of your domain with it’s static pages and have the blog functionality work as your news section.
- When you have a larger shop you might want to install Magento in the root of your domain and use WordPress as a subfolder called /blog, /news or something of your choosing.
- Try and go for matching themes on your Magento and WordPress installation as much as possible. A great example of near perfect integration can achieved by using the Magento Open Air here on Silverthemes for your Magento installation combined with the WordPress Open Air version by WooThemes for your WordPress installation.
- When you really want to create a large community combined with your web shop, do consider a variation of WordPress called BuddyPress. BuddyPress enables you to have your own social network combined with a large site. Although this may seem like a step too far in most cases this is definitely worth checking out when you are building a large online store.

How to integrate WordPress into your Magento store

Straight out of the box Magento can not communicate with WordPress and vice versa. So it’s up to you to make them share information. Right now there are two ways of going about that.

The first is immediately the easiest one. Lazymonk wrote a Magento extension for WordPress integration. This extension allows you to integrate WordPress into your Magento installation if, and only if both your installations are installed in the same database. For installation details check out the plugins page.

The second way of going about this involves you tweaking a bit of code in your Magento Theme. We’ll use the RSS import function of Magento to import the latest articles via your WordPress feed output.

What we need to do is create a file which will contain the code used to import the RSS. Let’s give that file a name something like import_blog.phtml and the following code into that:

< ?php $channel = new Zend_Feed_Rss('http://www.yourdomain/feed'); ?>
<div class="block block-latest-news">
<div class="block-title">
<h2>< ?php echo $this->__('Latest Articles form the Blog') ?></h2>
</div>
<div class="block-content">
<ol id="graybox-latest-news">
< ?php foreach ($channel as $item): ?>
<li><a href="<?php echo $item->link; ?>">< ?php echo $item->title; ?></a></li>
< ?php endforeach; ?>
</ol>
</div>
</div>

Place this file in your themes folder so it will look like so:app/design/frontend/default/name_of_your_theme/template/callouts/blog_import.phtml

All you would have to do is call for this newly created file in your Magento theme. Most themes have a column on the right so let’s assume that’s where you want to import your latest blog posts. You would need a code similar to this one:

<reference name="right">
<block type="core/template" name="right.permanent.callout" template="callouts/right_col.phtml"/>
<block type="core/template" name="right.latest.news" template="callouts/blog_import.phtml"/>
</reference>

Be sure to add this code to your catalog.xml located inapp/design/frontend/default/name_of_your_theme/layout/catalog.xml

Please note that in the code you can change things like Latest Articles from the Blog to anything you like. Also, for better handling and tracking of your feed you can use Feedburner to deliver your feed. You would then use the feed url specified by Feedburner in the first code.

Extra Magento plug-ins or documentation to further integrate WordPress within Magento

- If you have rich SEO content related to your shop catalog/products, this module can show the related articles on your product pages. Magento Product Related Articles from WordPress extension can be found here.
- When you want to integrate WordPress into Magento and you are not using the same database this articlemight be helpful to you to retrieve some products by reading id’s from custom field of some post inside your WordPress installation via a piece of code added to your preferred WordPress page and a Magento extension.

About the author: Remkus de Vries is a Dutch WordPress specialist and a blogger. You can also find him on Twitter.

Step 1: Download the latest version of Highslide
Click here to go to the Highslide.com-site and download the latest (stable) version to your local computer.

Step 2: Transfer Highslide to your Magento-installation
Unzip the Highslide and transfer the files to your Magento skin-folder, for example:

/skin/frontend/default//highslide

You should now have a bunch of .js-files, a few .css-files and a ‘graphics’-folder in this ‘highslide’-folder.

Step 3: Add code to the head-area to get the Highslide loaded up

Open your /app/design/frontend/default/

/template/page/html/head.phtml-file and add the following code at the end (this code will appear in the head-area, above the body):

<!-- Initiate Highslide -->
<script src="&lt;?php echo $this-" type="text/javascript"><!--mce:0--></script>
 
<script type="text/javascript"><!--mce:1--></script>

Step 4: Replace the default product-image magnifier with Highslide

Ok so, this is the most advanced step so pay close attention. Navigate to your frontend template-folder (normally /app/design/frontend/default//template). Now browse further in the directory-tree to the catalog-folder, then the product-folder and finally – the view-folder. You should be somewhere around here:

/app/design/frontend/default//template/catalog/product/view

The files in this folder are very critical to have Magento working so watch your steps closely. The first thing we’ll do is to make a backup of the media.phtml-file which we are going to modify by transferring a copy of it to a secret place your local computer. If you want to revert back to the original product-image magnifier its good to have a backup somewhere. You can even replace it with the very popular MagicZoom Plus-extension which can be bought as an optional addon with all our Magento themes.

Next, open up the media.phtml-file on your server and.. well, we’ve done everything for you in this step, so just replace everything in the file with the following code:

<!-- Fetch product-image information -->
getProduct();
    $_helper = $this-&gt;helper('catalog/output');
?&gt;
 
<!-- Check if Base image is defined, and if so, display it with Highslide effect -->
getImage() != 'no_selection' &amp;&amp; $_product-&gt;getImage()): ?&gt;
<div class="highslide-gallery">
    <a class="highslide" onclick="return hs.expand(this)" href="&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($_product, 'image') ?&gt;">
        <img title="Click to enlarge" src="&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($_product, 'image')-&gt;resize(265) ?&gt;" alt="&lt;?php echo $this-&gt;htmlEscape($this-&gt;getImageLabel()) ?&gt;" />
    </a>
    <!-- Add caption below the image -->
<div class="highslide-caption">
        htmlEscape($this-&gt;getImageLabel()) ?&gt;</div>
</div>
<!-- No Base image available. Will show default image from Magento -->
 
<!-- Hey, this product has more images so we'll display the gallery and Highslide them as well -->
getGalleryImages()) &gt; 0): ?&gt;
<div class="more-views">
<div class="highslide-gallery">
<h4>__('More Views') ?&gt;</h4>
<ul>
    getGalleryImages() as $_image): ?&gt;
	<li>
            <a class="highslide" onclick="return hs.expand(this)" href="&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($this-&gt;getProduct(), 'image', $_image-&gt;getFile()); ?&gt;">
            <img title="&lt;?php echo $this-&gt;htmlEscape($_image-&gt;getLabel()) ?&gt;" src="&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($this-&gt;getProduct(), 'thumbnail', $_image-&gt;getFile())-&gt;resize(56); ?&gt;" alt="&lt;?php echo $this-&gt;htmlEscape($_image-&gt;getLabel()) ?&gt;" /></a>
<div class="highslide-caption">
            htmlEscape($_image-&gt;getLabel()) ?&gt;</div></li>
</ul>
</div>
</div>
<!-- End of media.phtml with Highslide-effect -->

Step 5: Finish

You’re done. Thats right. Good job!
Or what do you say? You dont want to do it yourself? Then just purchase one of our popular Magento-themes and add Highslide as a bundled addon upon purchase, and we’ll help you all the way through.

Wanna see a demo of it?

Check out our products at Silverthemes.com, as they’re all set up with the Highslide:
http://www.silverthemes.com/premium-magento-themes/superclean.html