10 WordPress development rules

Basic wordpress development rules : how to implement good coding design

wordpress developers work in 3 areas

  • Graphic / web design : css, html, php
  • Technical / software analysis : php
  • Hardware / database  and server management : mysql / apache

10 rules to be a good wordpress developer

  • Search before you start : if you need something done, 99% chance someone has done it before. Search wordpress plugins database , search wordpress forum, search wordpress free and especially commercial themes where you find stuff that's worth the few dollars they ask for it,  and finally search google where a lot of solutions from personal blogs are indexed
  • Check the dates : if you are lucky enough to have found a piece of code, tutorial or plugin that  makes it, be careful of old stuff : wordpress evolves fast and some solutions to an old problem might have been solved by subsequent releases, or have become inefficient because of new features within wordpress and its codebase. don't allow stuff older than 2 years to waste your time.
  • Learn the codex : If you really need to code, don't go without learning basic possibilities that wordpress gives you : custom post types, taxonomies, template system are essential concepts to master, and without coding much accomplish a lot
  • Think simple : a lot of layout problems can easily be fixed by manipulating images or style sheets. Before you look into the theme or plugin folder, think about graphic design first and then code to code.
  • Think generic : if you do it once, why not do it for good ? take 10 minutes to expand your problem to more general solutions, and always think of the possibility of releasing your code to the world via your blog of via the wordpress plugin repository. The main idea behind this is that out there your creation will have a life of its own, will be reviewed by thousand of interested engineers and will benefit of a few enhancements from the minority of users that behave like you did.
  • Get close : if someone has done something very near to what you need, use it and enhance it. Exemple : we needed worpdress widget to link a specific url on the widget title, we enhanced some coding done by some guy and were 100% satisfied
  • Pick your framework : WordPress is particularly famous for the amount of thrid party solutions distributed for a small fee. Theme framework are basically advanced layouts with a lot of options  that require some learning curve before you get to master them, not to mention wordpress core. The ideal solution for learning a framework is to find one layout that fits your customer's requirements and choose it then learn via a specific project.
  • Reuse : even if some solution is not perfect, try to stick to what you know. Existing plugins that you know is better than a plugin you don't know for many reasons, including maintenance work that is a strong characteristic of wordpress plugins.
  • Folder Hierarchy : when getting deep inside the theme functions coding, use includes in a specific folder with your company name in it. When you get back to it a few months later you'll know instantly you are responsible for those parts of code. It  makes things easier to debug or evolve when you know it's yours
  • Document your code : there are two solutions for documenting what you have done. First is to do it alone on your files. Second it like we said before, go opensource, write about it, let people know what you have done, they'll thank you for it (sometimes pay) or bring new solutions on top of what you have brought. Good luck

Simple widget enhancer : css classes and title link

Style and title url inputs have been added to the widget form, example above on the text widget form

There are all sort of widget types for WORDPRESS that give web masters a lot of flexibility over the layout of sidebars, headers, footers. Among   many attributes of the register_sidebar function, the basis of zone creation in wordpress pages, are the before/after_widget and before/after_title.

While these attributes can specify specific classes and code for all widgets of a specific page area, the default widget system does not take care of specific elements within the sidebar : each widget should be allowed to be designed independently, via custom classes for instance.Further more, we like to keep the preformatted title (via before/after_title settings), but we find it necessary to be able to link that title. That's what we do below, extending the original custom classes feature to incorporate a title url link input. This code comes into an include of your functions.php theme and should work as is

function kc_widget_form_extend( $instance, $widget ) 
    if ( !isset($instance['classes']) )  $instance['classes']=null; 
    if ( !isset($instance['urlwidgettitle']) )  $instance['urlwidgettitle']=null; 
/* Set your predetermied class choices here */
 $myarray = "topleft, center, bottomright";
$myclasses = explode(",",$myarray);
 $row = "<p>\n";
 $row .= "\t<label for='widget-{$widget->id_base}-{$widget->number}-classes'>Style:</label>\n";
 $row .= "\t<select  name='widget-{$widget->id_base}[{$widget->number}][classes]'  id='widget-{$widget->id_base}-{$widget->number}-classes'  class='widefat'>\n";
 foreach($myclasses as $myclass) {
 $instance_selected = null; if($instance['classes']==$myclass) $instance_selected = " selected='selected'";
 $row .= "\t<option value='".$myclass."'".$instance_selected.">".$myclass."</option>\n";
 $row .= "</select>\n";
 $row .="<p><label for='widget-{$widget->id_base}-{$widget->number}-urlwidgettitle'>Title url:</label>";
 $row .="<input type='text'  name='widget-{$widget->id_base}[{$widget->number}][urlwidgettitle]'  id='widget-{$widget->id_base}-{$widget->number}-urlwidgettitle' value='{$instance['urlwidgettitle']}'</p>"   ;
 echo $row;
 return $instance;
add_filter('widget_form_callback', 'kc_widget_form_extend', 10, 2);

function kc_widget_update( $instance, $new_instance ) {
 $instance['classes'] = $new_instance['classes'];
 $instance['urlwidgettitle'] = $new_instance['urlwidgettitle'];
 return $instance;
add_filter( 'widget_update_callback', 'kc_widget_update', 10, 2 );
function kc_dynamic_sidebar_params( $params ) {
 global $wp_registered_widgets;
 $widget_id    = $params[0]['widget_id'];
 $widget_obj    = $wp_registered_widgets[$widget_id];
 $widget_opt    = get_option($widget_obj['callback'][0]->option_name);
 $widget_num    = $widget_obj['params'][0]['number'];
 if ( isset($widget_opt[$widget_num]['classes']) && !empty($widget_opt[$widget_num]['classes']) )
 $params[0]['before_widget'] = preg_replace( '/class="/', "class=\"{$widget_opt[$widget_num]['classes']} ", $params[0]['before_widget'], 1 );
 if ( isset($widget_opt[$widget_num]['urlwidgettitle']) && !empty($widget_opt[$widget_num]['urlwidgettitle']) )
     $params[0]['before_title']=  $params[0]['before_title'] . "<a href='" . $widget_opt[$widget_num]['urlwidgettitle'] . "'>";
     $params[0]['after_title']= "</a>" . $params[0]['after_title'] ;
if (!strstr($params[0]['widget_id'],"text-"))
        $params[0]['after_title']=  $params[0]['after_title'] . "<div class='textwidget'>";
      //  $params[0]['after_widget']  =qsdf";
        $params[0]['after_widget']  = "</div>" .   $params[0]['after_widget'];
 return $params;
add_filter( 'dynamic_sidebar_params', 'kc_dynamic_sidebar_params' );

Free wordpress full screen background effect

Integrating full size images in a wordpress post is quite easy if you know how to integrate a plugin AND can use FTP.

The plugin wp-supersized does all the jquery wiork for you and all you have to do after activating the plugin is read the options page carefully to properly configure the page or post where the images background appear. If your theme style does'nt render the imazge background as expected, then you can use a page or post model  (for post model use the style replacement plugin) and rewrite the header and footers to only load the apporpriate style and js files.


demo on http://www.ruedesiam.com/info/expo-jean-noel-duchemin