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 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.

thanks.

share|improve this question

3 Answers 3

up vote 5 down vote accepted

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 );
}
share|improve this answer
    
Thanks for detailed example, i can use custom_post_type, but how can i just have company name, logo url at add/edit screen, i know it can be done using custom meta boxes but i don't know how to add predefined meta boxes to register_post_type function, please help for the same. –  seoppc Jun 12 '12 at 21:38
    
See my edit for details re: meta boxes. –  EAMann Jun 12 '12 at 21:48
    
thanks for yours great help, i don't know why but after adding 'register_meta_box_cb' => 'manufacturer_meta' it doesn't showing meta boxes at add/edit panel. –  seoppc Jun 12 '12 at 22:14
    
ok its showing now but its just showing 'Link to Manufacturer site' not any input box for entering text. –  seoppc Jun 12 '12 at 22:19
    
You need to add a bunch more code to actually create the input box, that's why I linked to the add_meta_box() function in the Codex. If you need help specific to handling custom meta boxes, please ask a new question. –  EAMann Jun 12 '12 at 22:22

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

share|improve this answer
    
hello, i just want to show our clientele(max 10 clients), and it would have just image, and name of client –  seoppc Jun 12 '12 at 19:54
1  
@seoppc : yes, IMO, just the Link Manager is enough for that. And if you allow me, this plugin of mine, WPSE born, will make easier the image handling: wordpress.stackexchange.com/a/53797/12615 –  brasofilo Jun 12 '12 at 20:35

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

share|improve this answer

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.