Divs instead of tables

Hey Bro. Great Plugin!!! I am curious as to why you used tables though? divs would be nicer to work with. Perhaps a second set of short-codes for those of us wanting to work with divs? I am hacking at the code right now to see if I can throw something together, but wanted to mention that here as well. http://wordpress.org/extend/plugins/instruct/ Okay, it was simple task to just change the short-code to use an ordered list rather than a table: $step_template .= "<li class='instruct_row'><span class='instruct_row'>#STEP_TEXT#</span><span class='instruct_row'>#IMG_TEMPLATE#</span></span>"; $tbimg_template .= '<div id="instruct-thumbnail"><img class="instruct-thumbnail-img" src="#STEP_THUMBNAIL#" large="#STEP_PICTURE#"></div>'; //get instructions title and description $sql = "SELECT step.id step_id, <code>text</code>, number, picture, thumbnail FROM ".$diy_step_table." step, ".$diy_progress_table." progress WHERE step.id = progress.step AND progress.instruct=".$id." ORDER BY number"; $data = $wpdb->get_results($sql, OBJECT); if(count($data) > 0){ $html .= "<ol class='instruct'>"; foreach($data as $step) { // Go until no step exists with previous of current if($step == NULL) break; $step_html = $step_template; $step_html = str_replace("#STEP_NUM#", $step->number, $step_html); $step_html = str_replace("#STEP_TEXT#", $step->text, $step_html); if(!empty($step->thumbnail) and !empty($step->picture)) { $img_html = str_replace("#STEP_THUMBNAIL#", $step->thumbnail, $tbimg_template); $img_html = str_replace("#STEP_PICTURE#", $step->picture, $img_html); } elseif(empty($step->thumbnail) and !empty($step->picture)) { $img_html = str_replace("#STEP_THUMBNAIL#", $step->picture, $tbimg_template); $img_html = str_replace("#STEP_PICTURE#", $step->picture, $img_html); } elseif(!empty($step->thumbnail) and empty($step->picture)) { $img_html = str_replace("#STEP_THUMBNAIL#", $step->thumbnail, $tbimg_template); $img_html = str_replace("#STEP_PICTURE#", $step->thumbnail, $img_html); } else { $img_html = ''; } $step_html = str_replace("#IMG_TEMPLATE#", $img_html, $step_html); $query = $step_sql."=".$step->step_id; $html .= $step_html.PHP_EOL; } $html .= "</ol>"; I also removed the step-numbers, since CSS can handle that with: ol.instruct li { list-style: decimal inside; padding: 5px;} This gives me greater flexibility when designing my theme layout, especially if I am doing an adaptive theme for mobile or tablet view. Now I am wondering if I could incorporate this into a “Projects” plugin I am working on. Just an idea I am toying with. Hi ghettocottage, I’m looking at this plugin as a solution for my own instruction layout needs and your suggested changes already deal with one aspect that I wanted to change (ie: divs instead of a table) I’m further looking at some jQuery changes to allow two types of layout: – list (as original) – gallery The gallery approach would allow all the thumbnails to be shown as part of a slideshow banner and then a click would either css-popup or change a “preview” or display window to show the full image and instructions underneath it. Looking at the necessary code to make that happen and will share once resolved… For now though I was wondering if you could share your hacked code to see if there’s anything in there that would save me recreating the wheel. Any help appreciated. Sounds interesting Websnail. You could just use the code I have in the first post to change the tables to an ., and then possibly use something like Woothemes flexslider code (free download, opensource) to turn that list into a slide-show. Lots of possibilites. I would love to see what you end up doing. Realised I was making a rod for my own back and opted instead to go with SlideDeck2 instead of trying to reinvent the wheel. I’ve got to do some more work to customise some views but I noticed the original dev’ isn’t particularly active. That said I tidied up your nugget, fixed some HTML parsing issues and made a few formatting changes to make it easier to read in source: /* * Shortcodes */ // [instructions id="id int of instructions"] function shortcode_instructions( $atts ) { extract( shortcode_atts( array( 'id' => 0, 'notitle' => false ), $atts ) ); if( ! is_numeric($id)) return NULL; if( $notitle == 'true') $notitle = true; else $notitle = false; // WordPress globals global $wpdb; // diy instructions globals global $diy_step_table, $diy_instruct_table, $diy_progress_table; //get instructions title and description $instructions = $wpdb->get_row( "SELECT title, description FROM ".$diy_instruct_table." WHERE id=".$id); $html = ""; if(!$notitle) $html = "<h3 class='instruct_title'>".$instructions->title."</h3>\n"; $html .= "<p>".$instructions->description."</p>\n"; // MOD //$step_template .= "<li class='instruct_row'><span class='instruct_row'>#STEP_TEXT#</span><span class='instruct_row'>#IMG_TEMPLATE#</span></li>\n"; $step_template .= "<li class='instruct_row'><div class='instruct_text'>#STEP_TEXT#</div>#IMG_TEMPLATE#</li>\n"; $tbimg_template .= '<div id="instruct-thumbnail"><img class="instruct-thumbnail-img" src="#STEP_THUMBNAIL#" large="#STEP_PICTURE#"></div>'; //get instructions title and description $sql = "SELECT step.id step_id, text, number, picture, thumbnail FROM ".$diy_step_table." step, ".$diy_progress_table." progress WHERE step.id = progress.step AND progress.instruct=".$id." ORDER BY number"; $data = $wpdb->get_results($sql, OBJECT); if(count($data) > 0){ $html .= "<ol class='instruct'>\n"; foreach($data as $step) { // Go until no step exists with previous of current if($step == NULL) break; $step_html = $step_template; $step_html = str_replace("#STEP_NUM#", $step->number, $step_html); $step_html = str_replace("#STEP_TEXT#", $step->text, $step_html); if(!empty($step->thumbnail) and !empty($step->picture)) { $img_html = str_replace("#STEP_THUMBNAIL#", $step->thumbnail, $tbimg_template); $img_html = str_replace("#STEP_PICTURE#", $step->picture, $img_html); } elseif(empty($step->thumbnail) and !empty($step->picture)) { $img_html = str_replace("#STEP_THUMBNAIL#", $step->picture, $tbimg_template); $img_html = str_replace("#STEP_PICTURE#", $step->picture, $img_html); } elseif(!empty($step->thumbnail) and empty($step->picture)) { $img_html = str_replace("#STEP_THUMBNAIL#", $step->thumbnail, $tbimg_template); $img_html = str_replace("#STEP_PICTURE#", $step->thumbnail, $img_html); } else { $img_html = ''; } $step_html = str_replace("#IMG_TEMPLATE#", $img_html, $step_html); $query = $step_sql."=".$step->step_id; $html .= $step_html.PHP_EOL; } $html .= "</ol>\n"; // MOD END } # Add divisions for pop-up add_action('wp_footer', 'diy_shortcode_foot'); //echo "HTML <br/>:".$html; exit; return $html; } add_shortcode( 'instructions', 'shortcode_instructions' ); function diy_shortcode_foot() { echo '<div id="instruct-thumbnail-large"></div><div id="instruct-thumbnail-bg"></div>'; }