I want to display custom taxonomies list in home p

Question

I have created some lists using html and css. I want to display my custom taxonomies according to this design. For this reason, I have registered a custom post type named "surgical" with a custom taxonomy named "surgical_cat". I want that when I create categories it would display as lists with 4 columns. And when I click any category, it brings me to a specific page (for example 'Categories') where display all posts under such category.

To see the design, please visit this link: https://dl.dropboxusercontent.com/u/211935016/images/non_Surgical.png

Please see my html code:

<div class="fix top_listing">
<header class="fix listing_title">
<h2>Procedures Surgical</h2>
</header>
<div class="fix floatleft single_listing">
<ul>
    <li><a href="">Arm Lift (0)</a></li>
    <li><a href="">Breast Lift (1)</a></li>
    <li><a href="">Cheek Implants (1) </a></li>
    <li><a href="">Face Lift (1)</a></li>
    <li><a href="">Liposuction (1)</a></li>
    <li><a href="">Lumpectomy (1)</a></li>
</ul>
</div>
</div>

Please see my custom post type code in functions.php:

/* Register Custom Post Types ********************************************/

add_action( 'init', 'surgical_post' );
function surgical_post() {

register_post_type( 'surgical',
    array(
            'labels' => array(
                    'name' => __( 'Surgical' ),
                    'singular_name' => __( 'Surgical' ),
                    'add_new' => __( 'Add New' ),
                    'add_new_item' => __( 'Add New Surgical' ),
                    'edit_item' => __( 'Edit Surgical' ),
                    'new_item' => __( 'New Surgical' ),
                    'view_item' => __( 'View Surgical' ),
                    'not_found' => __( 'Sorry, we couldn\'t find the Surgical you are looking for.' )
            ),
    'public' => true,
    'publicly_queryable' => false,
    'exclude_from_search' => true,
    'menu_position' => 14,
    'has_archive' => false,
    'hierarchical' => false,
    'capability_type' => 'page',
    'rewrite' => array( 'slug' => 'surgical' ),
    'supports' => array( 'title', 'editor', 'custom-fields', 'thumbnail', ),
    'taxonomies' => array('tag')
    )
);
}

Please see my custom taxonomy code in functions.php:

/* REGISTERING CUSTOM TAXONOMY FOR BUSINESS LISTING *******************************************/

add_action( 'init', 'business_listing_taxonomy');
function business_listing_taxonomy() {
register_taxonomy(
    'surgical_cat',  //The name of the taxonomy. Name should be in slug form (must not contain capital letters or spaces).
    'surgical',  //post type name
    array(

        'public'                => true,
        'hierarchical'          => true,
        'label'                 => 'Surgical Category',  //Display name
        'query_var'             => true,
        'show_admin_column' => true,
        'rewrite'               => array(
            'slug'              => 'surgical-category', // This controls the base slug that will display before each term
            'with_front'        => false // Don't display the category base before
            )
        )
);

}

I want to know that which loop or queries I should use into my html/css lists so that they could display custom categories in home page? Can anyone help me to fix it?

Answer 1

Use below code in your file where you want to list the custom taxonomy.

<style>
    ul.custom_cat_list {
        list-style: none;
    }
    ul.custom_cat_list li {
        width: 25%;
        float: left;
    }
</style>

<ul class="custom_cat_list">
    <?php $categories = get_categories('taxonomy=surgical_cat&post_type=surgical'); ?>
        <?php foreach ($categories as $category) : ?>
            <li><a href="<?php echo get_category_link($category->cat_ID); ?>"><?php echo $category->name; ?></a></li>
    <?php endforeach; ?>
<ul>