Best way to display group of elements in wordpress - wordpress

Question

I've just started working on a project with wordpress. And I wonder what is the best practice to show a group of columns like this (highlighted in red)
in the page (post). I have a requirement that person who creating a post can insert default columns with different text and header.
I tried shortcode but it seems too complex. I want something like form with the input fields which will generate the colums. Thanks

Answer 1

I solve this problem with custom post types and a shortcode.
Plugins (optional - you could hand code everything)
Custom Post Types and Custom Fields creator - WCK
Intuitive Custom Post Order
Create your custom post type and fields.
Use Intuitive Custom Post Order to allow users to reorder the posts.
Customize this shortcode template to match your code and requirements:
add_shortcode('cpt-list', 'jpro_cpt_list');
function jpro_cpt_list() {
$args = array (
'post_type' => array( 'cpt' ),
'posts_per_page' => '-1',
'orderby' => 'menu_order',
'order' => 'ASC'
);
$query = new WP_Query( $args );
$cpt_list = '<div class="jpro-cpt cpt-list container">';
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
$post = get_post($id);
$postID = $post->ID;
$image = get_the_post_thumbnail( $postID, 'medium', array( 'class' => 'aligncenter' ));
$name = get_the_title($postID);
$bio = apply_filters('the_content', $post->post_content);
if(!empty($image)){
$output_image = '<div class="cpt-list image">'.$image.'</div>';
} else {
$output_image = '';
}
if(!empty($name)){
$output_name ='<h3 class="cpt-name cpt-list">'.$name.'</h3>';
} else {
$output_name = '';
}
if(!empty($bio)){
$output_bio ='<div class="cpt-bio cpt-list">'.$bio.'</div>';
} else {
$output_bio = '';
}
$cpt_list .= '<section class="jpro-cpt cpt-list columnClass">';
$cpt_list .= $output_image;
$cpt_list .= $output_name;
$cpt_list .= $output_bio;
$cpt_list .= '</section>';
}
} else {
$cpt_list .='<p>Ooops! No cpt Found.</p>';
}
$cpt_list .='</div>';
wp_reset_postdata();
return $cpt_list;
}