Converting from a WordPress theme

Question

I'm converting a WordPress theme. And, yes, I'm following the very good advice listed in a previous question. My question is more granular. So hence, this new question.

Specifically, I'd like to address the menu creation. Should I use the typical theme() functions to build out Main and Secondary menus? What class names should I pass into that theme function?

Currently, I've cleaned up the HTML template by extracting all embedded JS and CSS into external files. It appears as

<div id="navigation" class="ten columns clearfix">
    <div class="menu-navigation-menu-container">
        <ul id="nav" class="menu">
            <li id="menu-item-2691" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-419 current_page_item menu-item-2691">
                <a title="home" href="new_design_staging.1.html">home</a>
            </li>
            <li id="menu-item-2565" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2565"><a href="new_design_staging.1#">about</a>
                <ul class="sub-menu">
                    <li id="menu-item-2571" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2571"><a href="new_design_staging.1#">Drop Down 1</a></li>
                    <li id="menu-item-2572" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2572"><a href="new_design_staging.1#">Drop Down 2</a></li>
                    <li id="menu-item-2573" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2573"><a href="new_design_staging.1#">Drop Down 3</a></li>
                </ul>
            </li>
            <li id="menu-item-2566" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2566"><a href="new_design_staging.1#">books</a></li>
            <li id="menu-item-2567" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2567"><a href="new_design_staging.1#">movies</a></li>
            <li id="menu-item-2568" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2568"><a href="new_design_staging.1#">time travel</a></li>
            <li id="menu-item-2569" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2569"><a href="new_design_staging.1#">blue box</a></li>
            <li id="menu-item-2570" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2570"><a href="new_design_staging.1#">boats</a></li>
        </ul>
    </div>
</div>

Or, can I loop over a render variable to produce the <li>, leaving the <div> and <ul>'s in place? Does this deviate too far from best practice?

Answer 1

Well, here is the code that I've put in place. So far it's respecting the CSS selector patterns that the WordPress theme rendered.

<div id="navigation" class="ten columns clearfix">
    <div class="menu-navigation-menu-container">
       <?php 
       print theme('links__system_main_menu', array(
         'links' => $main_menu, 
         'attributes' => array(
           'id' => 'nav', 
           'class' => array('menu')), 
         'heading' => t(''))
       ); 
       ?>
    </div>
</div>