Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am trying to create a menu in wordpress using a custom post type as the main menu item at the top level and all of its childs are going to be included from the posts i create inside it.

The html i would like to try and create is:

<ul>
<li><a href='#'>Home</li>
<li><a href='#'>Products
    <ul>
        <li class='column'>
            <h2>Seating</h2>
            <ul>
                <li><a href='#'>Custom post link</a></li>
                <li><a href='#'>Custom post link</a></li>
                <li><a href='#'>Custom post link</a></li>
            </ul>
        </li>
        <li class='column'>
            <h2>Desking</h2>
            <ul>
                <li><a href='#'>Custom post link</a></li>
                <li><a href='#'>Custom post link</a></li>
                <li><a href='#'>Custom post link</a></li>
            </ul>
        </li>
        <li class='column'>
            <h2>Accessories</h2>
            <ul>
                <li><a href='#'>Custom post link</a></li>
                <li><a href='#'>Custom post link</a></li>
                <li><a href='#'>Custom post link</a></li>
            </ul>
        </li>
        <li class='column'>
            <h2>column4</h2>
            <ul>
                <li><a href='#'>Custom post link</a></li>
                <li><a href='#'>Custom post link</a></li>
                <li><a href='#'>Custom post link</a></li>
            </ul>
        </li>
    </ul>
</li>

I have created a custom post type like so:

register_post_type( 'products',
        array(
            'labels' => array(
                'name' => __( 'Products' ),
                'singular_name' => __( 'Product' )
            ),
            'show_ui' => true,

            'capability_type' =>  'post',
            'has_archive' => true,
            'show_in_nav_menus' => true,
            'rewrite' => array('slug' => 'products'),
            'supports' => array(
                'title',
                'editor',
                'custom-fields',
                'revisions',
                'thumbnail',
                'page-attributes'
            )
        )
    );

I also have on that custom post a custom meta box to select what category the product is in like so:

function products_category_meta_box_cb($post) {
    global $post;
    wp_nonce_field('products_category_nonce', 'products_category_meta_box_nonce');
    $values = get_post_custom($post->ID);

    $menu_value = isset($values['products_category']) ? esc_attr($values['products_category'][0]): '';

    $services_array = array('Seating' => 'seating', 'Desking' => 'desking', 'Accessories' => 'accessories');

    echo '<p><strong>Select the product category.</strong></p>';

    echo '<select name="products-category">';
    foreach ($services_array as $key => $value) {
        echo '<option value ="' . $value . '"' . selected($menu_value, $value, false) . '>' . $key . '</option>';
    }
    echo '</select>';
}

what i would like to do is for all of the seating products go inside one li with a class column so i can float them next to each other and the content of that li will be a title which it gets from that dropdown inside the post and then the custom post type links under that.

I hope that makes sense, I know this is quite a complicated question so please ask me if you need some more explanation.

Thanks for reading and would really appreciate your help

Alex

share|improve this question
add comment

1 Answer

up vote 0 down vote accepted

Why don't you just use the native WordPress Menus.. Go to Appearance > Menus. Then in your screen options, enable your custom post type (products). It'll appear in the left hand side.

Select all of your products you want in the menu, then you can customize the titles, and also add classes if you need to (again Screen Options).

share|improve this answer
    
I want to use the native wordpress menu but how do i group them into columsn of 5 for example all the seating links in one column. –  asaunders Aug 13 '13 at 17:52
    
I have tried to show you in a picture format of what i am trying to get at. link if you look at the top left box and ignore the html output –  asaunders Aug 13 '13 at 17:59
    
You style that with CSS. Make the columns inline-block (the columns would be parent items in the menu), then make the submenus block inside those parent menu items! I've done it many times before, works nicely. –  Eric Holmes Aug 13 '13 at 18:06
    
Im not sure if that is 100% correct because all those links are all under one menu item. so the sub menu is 5 columns under one main menu item. i dont think css can do that. or i am just not following where to put the classes on the menu items sorry. i am just trying it now as well –  asaunders Aug 13 '13 at 18:14
    
can i email you my dev site and you could add teh menu items so i can see if we are both on the same lines? –  asaunders Aug 13 '13 at 18:20
show 6 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.