Laying out a "grid" of committee members in WordPress

Posted on 2013-10-17
Medium Priority
Last Modified: 2013-10-18
I have a layout question for a page on a WordPress site I am working on. I need to display a list of 75 committee members with photos and credentials to the right of the images, in a 3-across grid style layout. Please see screenshot for exactly how I would like this to appear. A similar layout on other areas of the site (with fewer members) has been accomplished using individual tables.

The limiting part of this is that each row is actually a separate table, and is cumbersome to code plus I suspect it is not the most SEO-friendly way to present info. Also, considering the length of this new list it would be preferable to have it laid out in a way where it is one continuous element.

So my question is: what is the recommended method for accomplishing this task on a WordPress site? I know there is a way to do it using CSS (divs?) but am unclear exactly how. The other very important element is that the list of members will be displayed alphabetically by last name, and changes will need to be made from time to time. This requires a fluid-type layout so that inserting or removing an entry will not require extensive recoding to "fill in" the gaps/make the rest of the entries wrap. Thank you in advance for your assistance. 
Question by:CuriousAbout

Expert Comment

ID: 39579365
What theme are you using?
LVL 70

Accepted Solution

Jason C. Levine earned 1600 total points
ID: 39579753
This is less of a WordPress question and more of a simple layout exercise using PHP and hopefully MySQL data.  

First of all, a table is perfectly fine for this kind of display.  Nested tables, not so much, but your screenshot doesn't indicate a need for a nested table.  SEO isn't an issue. It's still okay to use tables to present tabular data :)

Assuming the list of committee members is in a database, here is how I would do it.

1) Make a new custom page template for the committee display.
2) Query the database to return the population sorted by whatever parameter you want
3) Start the table in the desired part of the page, open the first row
4) Using PHP, create a table cell and echo out the committee member data and photo and increment a variable
5) Check to see if the newly increment end variable can be divided by 3. If so, I have reached the end of this row and issue the closing row tags and open the next row.
6) Loop through steps 4 and 5 until all records have been echoed out, the close the final row and the table.

So the only thing that makes the above WordPress-specific would be having to use $wpdb to do the initial database query.  You could use divs instead of a table but I don't think it's as efficient and actually harder to layout.
LVL 53

Assisted Solution

COBOLdinosaur earned 400 total points
ID: 39579838
As the resident "table layout crusher"; I can concur with Jason that using a table for layout in this case is correct, because you are presenting tabular data and that is what tables are for.  Using div is possible, but not practical unless you need a flexible layout where the presentation must switch from 3-column to 2-column for small screens.


Author Closing Comment

ID: 39582623
Thank you!

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Ecommerce has truly become one of the most prosperous ways of monetizing your brand on the Internet. However, when it comes to it, auditing is undoubtedly the lifeblood of this type of business.  This article will help you to conduct your ecommerce …
Why WooCommerce is one of the majorly favored choices when it comes to having an eCommerce store. This article will acquaint you with some reasons that I believe make it one of the best eCommerce platforms available.
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question