How to create a gallery of your available themes?

February 26th, 2009 Posted in Wordpress MU

Difficulty Level:

dif_low-mid

Hello and welcome to a new small tutorial about wordpress-mu plugins. This tutorial is build on a previous tutorial “How to use a plugin function in a post?“. The main focus is to how to create a nice table to present your themes in a gallery.

So this is what you need:

Function 1:

  1. function mg_show_gallery_available_themes($match) {
  2. //Clear output
  3. $output ='';
  4. $colcount   = 2;
  5. // picture settings
  6. $imgwidth   = 'width="300px"';
  7. $imgheight  = 'height="225px"';
  8. $cellheight = 'height="250px"';
  9. // Get all theme information
  10. $themes       = get_themes();
  11. // count the available themes
  12. $theme_total  = count( $themes );
  13. $theme_names  = array_keys($themes);
  14. // Calculate the necessary rows
  15. $rows = ceil(count($theme_names) / $colcount);
  16. for ( $row = 1; $row <= $rows; $row++ ) {
  17. for ( $col = 1; $col <= $colcount; $col++ ) {
  18. $table[$row][$col] = array_shift($theme_names);
  19. }
  20. }
  21. // table "START"
  22. $output .= '<table width="100%" border="0"
  23. cellspacing="5" cellpadding="0">';
  24. foreach ( $table as $row => $cols )
  25. {
  26. $output .= '<tr align="center" ' . $cellheight . '>';
  27. foreach ( $cols as $col => $theme_name ) {
  28. $class = array('available-theme');
  29. // Define the postion
  30. if ( $row == 1 ) $class[] = 'top';
  31. if ( $col == 1 ) $class[] = 'left';
  32. if ( $row == $rows ) $class[] = 'bottom';
  33. if ( $col == 3 ) $class[] = 'right';
  34. $output .= '<td class="'. join(' ', $class) . $cellwidth . '">';
  35. if ( !empty($theme_name) ) :
  36. $template = $themes[$theme_name]['Template'];
  37. $title = $themes[$theme_name]['Title'];
  38. $screenshot = $themes[$theme_name]['Screenshot'];
  39. $stylesheet_dir = $themes[$theme_name]['Stylesheet Dir'];
  40. $thickbox_class = 'thickbox';
  41. // Write theme name
  42. $output .= '<h3>' . $title . '</h3>';
  43. // Build your image link to a screenshot
  44. if ( $screenshot )
  45. {
  46. $output .= '<image src="' .WP_CONTENT_URL . $stylesheet_dir .
  47. '/' . $screenshot .'?>"' . $imgwidth . $imgheight .'alt="'.
  48. $title .'">';
  49. }
  50. // There is no screenshot available
  51. else
  52. {
  53. $output .= 'No screenshot available..';
  54. }
  55. endif;
  56. $output .= '</td>';
  57. }
  58. $output .= '</tr>';
  59. }
  60. // table "END"
  61. $output .= '</table>';
  62. return($output);
  63. }

Function 2:

  1. /***H*O*O*K******************************************/
  2. add_filter('the_content', 'embeddedshow_list_available_themes');
  3. /****************************************************/
  4. // actual plugin function
  5. function embeddedshow_list_available_themes($content) {
  6. $output = preg_replace_callback('[mg_call_show_list_available_themes]'
  7. ,'mg_show_gallery_available_themes', $content);
  8. return ($output);
  9. }

Description:

  1. We define setting for the table. How big are the thumbnails in you gallery and how many columns we want to have.
  2. Now we have to look how much themes are available and calculate how much rows we will need.
  3. Start creating the rows and columns and filling the cells of the table with the theme name and screenshot thumbnail.
  4. If there is no screenshot available we will show a “No screenshot available..” message.
  5. Ending the table.
  6. The last thing you have to do is to insert the string “mg_call_show_gallery_available_themes” in a post.

Result:

gallery-screen1

You can also download this wordpress mu plugin.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • MisterWong
  • Y!GG
  • Webnews
  • Digg
  • del.icio.us
  • StumbleUpon
  • Reddit

Comments are closed.

My-Guide Interessante Guides: FitnessMy-GuideLinuxBodybuildingSnowboard Guide