clients list using wordpress

I am using wordpress for my new website and i have list of clients(name and their logos). I am confused how to make those editable using wordpress? Html as follows…

<ul>
<li><img src="1.jpg" alt="client1"/>Client1</li>
<li><img src="2.jpg" alt="client2"/>Client2</li>
</ul>

Should i use custom post type or something? Please suggest some similar examples or better approach to achieve this using wordpress, so clients can be added/edited/delted easily.

Read More

thanks.

Related posts

Leave a Reply

3 comments

  1. You’ll want to use a custom post type for this. But don’t let the terms “custom post type” scare you off.

    For example, one of my clients needed to present a “line card” displaying their various partners. All they wanted, originally, was the name and logo of their various partners. After I built out the feature, they wanted to add a description for each partner.

    The custom post type ended up including a Title, Editor, and Thumbnail. The end user can create a new “partner” and enter the content in a traditional WordPress post edit screen – no need to edit code anywhere.

    Adapt Electronics Custom Post Type

    Their line card page is then rendered using a custom shortcode that displays all of their partners in an easy-to-read format.

    Adapt Electronics Line Card

    The Code

    Adding a custom post type is fairly straight forward. Just define what you want to call it and set up your strings appropriately:

    add_action( 'init', 'manufacturer_post_type' );
    function manufacturer_post_type() {
        $labels = array(
            'name'               => 'Manufacturers',
            'singular_name'      => 'Manufacturer',
            'add_new_item'       => 'Add New Manufacturer',
            'edit_item'          => 'Edit Manufacturer',
            'new_item'           => 'New Manufacturer',
            'all_items'          => 'All Manufacturers',
            'view_item'          => 'View Manufacturers',
            'search_items'       => 'Search Manufacturers',
            'not_found'          => 'No manufacturers found',
            'not_found_in_trash' => 'No manufacturers found in trash',
            'menu_name'          => 'Manufacturers'
        );
    
        $args = array(
            'labels'             => $labels,
            'capability_type'    => 'post',
            'public'             => true,
            'menu_position'      => 20,
            'show_ui'            => true,
            'publicly_queryable' => false,
            'show_in_menu'       => true,
            'query_var'          => false,
            'rewrite'            => false,
            'has_archive'        => false,
            'supports'           => array(
                'title',
                'editor',
                'thumbnail'
            ),
            'can_export'         => true,
        );
    
        register_post_type( 'adapt-manufacturer', $args );
    }
    

    Then it’s a matter of describing and defining your output. The [linecard] shortcode example below is what does all the work to pull this info out of the database and render it on screen:

    add_shortcode( 'linecard', 'line_card_shortcode' );
    function line_card_shortcode( $atts ) {
        $results = get_manufacturers();
    
        $output = '<table cellspacing="20px" width="100%"><tbody>';
        $count = 0;
        $closed = true;
    
        while ( $results->have_posts()) : $results->the_post();
            if ( $count == 0 ) {
                $output .= '<tr valign="top">';
                $closed = false;
            }
    
            $link = get_post_meta( get_the_ID(), 'manufacturer_link', true );
    
            $output .= '<td width="33%">';
            $output .= '<strong><a href="' . $link . '">' . get_the_title() . '</a></strong><br />';
            $output .= get_the_content();
            $output .= '</td>';
    
            $count++;
        if ( $count == 3 ) {
                $output .= '</tr>';
                $closed = true;
                $count = 0;
            }
        endwhile;
    
        if ( !$closed ) $output .= '</tr>';
    
        $output .= "</tbody></table>";
    
        return $output;
    }
    

    In Addition

    Once you have the content loaded into the database, you can pull it out however you want. In addition to the line card, my client also has a scrolling carousel of partner logos on the front page of their site – all using the exact same data.

    Adapt logo carousel


    Custom Meta Boxes for CPTs

    I actually removed the code I use to add a “Link” field to my client’s custom post type because it didn’t seem important. But adding custom meta boxes to a CPT built with register_post_type() is fairly easy.

    Step 1: Add a metabox callback to your $args array:

    $args = array(
        'labels'             => $labels,
        'capability_type'    => 'post',
        // ... other entries removed for brevity
        'register_meta_box_cb' => 'manufacturer_meta',
    );
    

    Then define the callback function:

    function manufacturer_meta() {
        add_meta_box(
            'manufacturer_link',
            'Link to Manufacturer Site',
            'manufacturer_link_meta_box',
            'adapt-manufacturer',
            'normal',
            'high'
        );
    }
    

    In this specific example, I’m adding a meta box that allows the user to add a link to the external manufacturer’s website. The core functionality is in the function manufacturer_link_meta_box() and it follows all of the normal rules that custom meta boxes follow.


    Full code for meta boxes

    PLEASE DO NOT USE THIS CODE VERBATIM IN YOUR SITE! You will absolutely need to modify the code to fit your purposes, so don’t just copy-paste this into your own system.

    // This function generates the actual markup of the meta box
    function manufacturer_link_meta_box( $post ) {
        $link = get_post_meta( $post->ID, 'manufacturer_link', true );
    
        wp_nonce_field( plugin_basename(__FILE__), 'manufacturer_link_nonce' );
        echo '<label for="manufacturer_link">Site URL:</label>';
        echo '<input type="text" id="manufacturer_link" name="manufacturer_link" size="150" value="';
        echo $link;
        echo '" />';
    }
    
    // When the post is saved/updated, you need to save the content of the meta box as well
    add_action( 'save_post', 'save_manufacturer_link' );
    function save_manufacturer_link( $post_id ) {
        if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
            return;
    
        if ( ! isset( $_POST['manufacturer_link'] ) || ! wp_verify_nonce( $_POST['manufacturer_link_nonce'], plugin_basename(__FILE__) ) )
            return;
    
        if ( ! current_user_can( 'edit_post', $post_id ) )
            return;
    
        $link = $_POST['manufacturer_link'];
    
        update_post_meta( $post_id, 'manufacturer_link', $link );
    }
    
  2. You could use custom post types, search for portfolio to get a ton of examples. See EAMann’s answer.

    Or just use the link manager. For simple links with images it is good enough.

    You can create a very customizable list then with wp_list_bookmarks().

    enter image description here

  3. Why not just use posts? You could create a post for each client and use the featured image (AKA Post Thumbnails) to display the logo’s. You can then set the post limit to 10 per page via the WordPress admin area: Settings/Reading...Blog pages show at most 10