I am currently working on a powerful, feature rich Magento widget that will allow you to bring in Wordpress, Drupal or Joomla updates into a CMS page via Zend RSS.

I’ll release it as soon as they are finished.

A simple Magento (1.3, 1.4) extension that I wrote to determine the country code (US, CH, DE, FR etc) from the customer.

The extension is based on the HostIp.info API, and renders your choice of static block HTML based on your location.

Download it here.

This tutorial will show you how to make a simple left ( or right ) column navigation that simply displays the sub-categories of a singular category using existing Magento PHP and a conditional.

1) The first step is to locate the view responsible for the default top navigation ( assuming your theme is built from ‘default’, ‘blank’ or ‘modern’ ). You can find this by navigating to app/design/frontend/yourPackage/yourTheme/template/catalog/navigation/top.phtml. Next you want to duplicate this file and rename it to something like  category-left.phtml.

2) Then you want add the new reference to your sidebar via XML. For this example, we will want this navigation to display in the left column of all category pages so open app/design/frontend/yourPackage/yourTheme/layout/catalog.xml.

3) If you examine the file, around line 78 you will see the left reference.

        <reference name="left">
            <block type="catalog/navigation" name="catalog.leftnav" after="currency" template="catalog/navigation/left.phtml"/>
        </reference>

Since this will be replacing the default Magento layered navigation, we will comment out the reference for that, and supplement our own giving it a unique reference name, and associating a template to be used.

        <reference name="left">
            <!--<block type="catalog/navigation" name="catalog.leftnav" after="currency" template="catalog/navigation/left.phtml"/>-->
            <block type="catalog/navigation" name="catalog.categories" template="catalog/navigation/category-left.phtml"/>
        </reference>

4) Upload the 2 files,and refresh the site. You will see that we have simply duplicated the top navigation and moved it to the left but we want our new navigation to only display the sub-categories of a particular category, so we will simply add a conditional that checks the category ID.

5) Open up category-left.phtml.

<?php $_menu = ''?>
<?php foreach ($this->getStoreCategories() as $_category): ?>
 <?php $_menu .= $this->drawItem($_category) ?>
<?php endforeach ?>
<?php if ($_menu): ?>
<div>
 <ul id="nav">
 <?php echo $_menu; ?>
 </ul>
</div>
<?php endif; ?>

6) Add a simple conditional statement to single out which sub-categories you want to display.

<?php $_menu = ''?>
<?php foreach ($this->getStoreCategories() as $_category): ?>
<?php if ($_category->getId() == '35'):?>
 <?php $_menu .= $this->drawItem($_category) ?>
<?php endif;?>
<?php endforeach ?>
<?php if ($_menu): ?>
<div>
 <ul id="nav">
 <?php echo $_menu; ?>
 </ul>
</div>
<?php endif; ?>

That’s all there is to it really. As you can tell, I like to utilize procedures already written inside of Magento. The framework is already heavy enough without complex, custom code being added for simple tasks like adding sub-categories to your sidebar.

There are tons of different tab integration, but most of them are pretty heavy ( in my opinion ), this one has proved sufficient for me on more than one occasion.

Yetti Tabs

This brief tutorial will demonstrate how to use the default dynamic navigation, and body classes to create a light-weight current state for your navigation.

Typically, stores will either have a total product based navigation or page links mixed in with a “products” tab.

For this particular demonstration, we will be working with a mixed navigation.

1) The first thing you want to do (after choosing a theme to work with) is navigate to app/design/frontend/yourPackage/yourTheme/template/catalog/navigation/top.phtml.

You’ll see some simple PHP code that generates your navigation based on your category structure in the admin.

<ul id="nav">
<?php foreach ($this->getStoreCategories() as $_category): ?>
 <?php echo $this->drawItem($_category) ?>
<?php endforeach ?>
</ul>

Since we are using a mixed navigation, we will be adding the page links into ul#nav.

<ul id="nav">
<?php foreach ($this->getStoreCategories() as $_category): ?>
 <?php echo $this->drawItem($_category) ?>
<?php endforeach ?>
<li><a href="<?php echo $this->getUrl('about-us');?>">About Us</a></li>
<li><a href="<?php echo $this->getUrl('store-locator');?>">Store Locator</a></li>
<li><a href="<?php echo $this->getUrl('contacts');?>">Contact Us</a></li>
<li><a href="<?php echo $this->getUrl('wholesale');?>">Wholesale</a></li>
</ul>

** Always use dynamic URLs when adding links to views  (.phtml)

2) Next, you will need to make sure your category structure in the admin is set up as follows, so that the navigation does not spread horizontally.

** Make sure to clear / disable your cache in the admin, or you may not see your changes when previewing.

3) Now we are ready to create current states for your page links, as it is already built into Magento for the product / catalog links.

Re-open your top.phtml file and add some simple class identifiers to your page list items, or anchors depending on how your navigation is designed.

<ul id="nav">
<?php foreach ($this->getStoreCategories() as $_category): ?>
 <?php echo $this->drawItem($_category) ?>
<?php endforeach ?>
<li class="about"><a href="<?php echo $this->getUrl('about-us');?>">About Us</a></li>
<li class="store-locator"><a href="<?php echo $this->getUrl('store-locator');?>">Store Locator</a></li>
<li class="contact"><a href="<?php echo $this->getUrl('contact');?>">Contact Us</a></li>
<li class="wholesale"><a href="<?php echo $this->getUrl('wholesale');?>">Wholesale</a></li>
</ul>

4) Save the file and view the source of one of your CMS pages, you will see that Magento has already attached an identifier to the body tag.

<body class=" cms-page-view cms-about-us">

5) Now its as simple as targeting those lists or anchors to achieve your desired current state effect, so open up your main style sheet from skin/frontend/yourPackage/yourTheme/css/styles.css.

Use this example to target your active states.

.cms-about-us .about,

.cms-store-locator .store-locator,

.cms-contact .contact,

.cms-wholesale .wholesale { background-color:#fff; color:#000; padding:15px; }

That’s all there is to it. For me, this has proven to be much lighter weight than traditional PHP based current states.

Call me paranoid, I just prefer to keep this information hidden, unless you have a reason to look at it.

Wordpress has a built in functionality to password protect posts, but it’s laughable so I started the adventure to develop my own solution.

Here are the steps that I took :

1) Edit the wp-config.php file to initiate a site wide session ( default WP only uses cookies ), I added this to line #19 of my wp-config

<?php session_start();?>

2) Next you want to make a simply html form, I loaded mine into a CSS pop-up, but you should be able to add it just about anywhere.

<form action="<?php $_SERVER['PHP_SELF'];?>" method="post">
<p><input type="password" name="protect" />
<input type="submit" value="" name="protect_submitted" /></p>
</form>

3) Now its time to check the login form, so open up header.php and add something like the following right after the body tag.

<?php
if(isset($_POST['protect_submitted'])) {
$protect = $_POST['protect'];
if($protect != NULL && $protect == 'password'){
$_SESSION['authorize'] = sha1(md5('keyphrase'));
} else {
echo '<p>Incorrect</p>';
}
}
?>

4) Almost there, now we make a custom page template for wordpress, so you’ll want to duplicate wp-content/themes/yourTheme/page.php and rename it to secure-page.php.

5) Open up the newly created file in your IDE and change the template declaration in the top, like this :

<?php
/*
Template Name: Secure Page
*/
?>

6) This is the trickiest part, as every ones template will look different. The goal here to to separate the default wordpress code and add a conditional that checks to see if the session is set.

Take a look at the code, you will see standard wordpress php that just calls things like the page title, post content etc.

You’ll want to re-structure this page as follows :

<?php if( (!isset($_SESSION['authorize'])) || ($_SESSION['authorize'] != sha1(md5('protect')))):?>

// user is not logged in, echo what ever HTML you'd like

<?php else:?>

// user is logged in, simply load what wordpress normally does

<?php endif;?>

And there you have it, pretty simple really.
The only thing left to do is open up your admin, navigate to the page that you’d like to secure and select the newly created secure template from the right hand side bar.

It uses VML instead of a flash wrapper, and I the only ( minor ) downfall I have noticed is the extra JS you have to include.

Jeffrey Way has written an awesome screen-cast on how to implement it.

Some of the highlights that have made my life easier are :

• WYSIWYG Editor ( Simlpy makes my job easier, when teaching clients how to use their store )
• Strict Templating System ( You know pull template files from a base theme, which increases performance )
• More dynamic variables within e-mail templating system ( no more changing it in the locale, or creating 20+ new e-mail templates )
• Widgets
• Improved javascript files merging, added CSS files merging ( major increases in performance )

If you haven’t tried it yet, pull it into your local environment.