WordPress : form plugin, price table plugin, event plugin

I've been using Gravity Forms for a while and I have to say I am completely satisfied with it, especially the form validation error message come out nice -I've spent a few hours on css), but a new price breaker is coming out : ninja forms is free in its lite version and costs only 30$. Other nice new plugins include pricing table and custom post type event. Source : smashing magazine

Promising Theme frameworks 

WORDPRESS / How to create a page that displays custom field values

we are trying to display a list of custom field values for a specific meta key, in a page. 

  • install the plugin http://wordpress.org/extend/plugins/wp-page-widget/
  • code a new widget area to  display a specific widget in a content area of a page : 
    •    register_sidebar(array(
                      'name'=> __( 'main content', 'photography' ),
                      'id' => 'contentwidget',
                      'before_widget' => '<li id="%1$s" class="widget %2$s">',
                      'after_widget' => '</li>',
                      'before_title' => '<h2 class="widgettitle">',
                      'after_title' => '</h2>',
                  ));
    • add the sidebar where you want on your page.php template : dynamic_sidebar( 'main content' )
  • setup the wp page widget plugin to activate pages and the main content area you've just created
  • download and install the widget  http://wordpress.org/extend/plugins/get-custom-field-values/
  • create a new page and use the widget interface in your page to add the list of custom field values for your meta key
  • Demonstration here, what I need now is to link custom fields values to posts : http://erwan-foto.com/photos-bretagne
  • Note : I also  tried the http://wordpress.org/extend/plugins/custom-field-list-widget/ but for some reason it does not work with wp page widget

WordPress pronamic map plugin : add MarkererCluster function

The Pronamic map plugin is the best free replacement for the mappress plugin, which I buyed and  used for professionnal work. Well Pronamic map plugin comes with mashup functions but has not yet integrated the new google Cluster function, which aggreagtes multiple markes from the same location to a single one . We  publish here an update for the buildMashup function from the site.js file, which incorporates the clustering that you can view live on my brittany photogaphy web site. you will also need to include the markercluster script in your header or javascript enqueue function.

 

		buildMashup: function(s) { 
			var element = $(s);

			var list = element.find("ul");

			var mashupInfo = $.parseJSON(element.find('input[name="pgmm-info"]').val());

			var canvas = element.find(".canvas").get(0);

			if(canvas) {
				if(mashupInfo.hideList) {
					list.hide();
				}
				
				var center = new google.maps.LatLng(mashupInfo.center.latitude, mashupInfo.center.longitude);
				if(google.loader.ClientLocation) {
					center = new google.maps.LatLng(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude);
				}

				// Map options
				var mapOptions = $.extend({
						center: center 
					} , 
					mashupInfo.mapOptions
				);

				var map = new google.maps.Map(canvas, mapOptions);

				// Associated the Google Maps with the element so other developers can easily retrieve the Google Maps object
				element.data("google-maps", map);

				// Create one info window where the details from the posts will be displayed in
				var infoWindow = new google.maps.InfoWindow();
				
				// Create an bounds object so we can fit the map to show all posts
				var bounds = new google.maps.LatLngBounds();
                 var markers = [];  
				// Create markers for all the posts
				list.find("li").each(function() {
					var item = $(this);

					// Retrieve location information from an (hidden) input field with JSON data
					var info = $.parseJSON(item.find('input[name="pgm-info"]').val());

					var location =  new google.maps.LatLng(info.latitude, info.longitude);

					var markerOptions = $.extend({
							position: location , 
							map: map 
						} , 
						info.markerOptions
					);

					var marker = new google.maps.Marker(markerOptions);
                     markers.push(marker);
					item.data("google-maps-marker", marker);

					google.maps.event.addListener(marker, "click", function() {
						infoWindow.setContent(item.html());
						infoWindow.open(map, marker);
					});
					
					// Extends the bounds object with this location so we can fit the map to show all posts
					bounds.extend(location);
				});
                    var markerCluster = new MarkerClusterer(map, markers, { gridSize: 60,maxZoom: 8}); //poleouest
				if(mashupInfo.fitBounds) {
					map.fitBounds(bounds);
				}

				// Trigger ready event
				element.trigger("pronamic-google-maps-ready", map);
			}
		}

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' );



Pimcore and ZOOLU

2 opensource content management systems that rely on Zend  Framework. while it's now hard to compete with the amount of features natively available in big players like wordpress, joomla or drupal, a  good web site developer should stay informed as various project come online.

Zoolu and Pimcore both rely on Zend Framework, which makes them not simple to install, especially Zoolu whose requirement list is very long. But at that price you get full lucene support, the very powerful search engine supported by the zend framework. Pimcore is not easy to install either but promises to be a full rapid development framework.

2 wordpress plugins for displaying magento products

We tested and recommend 2 plugins for displaying feeds on wordpress.

  • Simplepie plugin for wordpress (requires simplepie core) is definitely a winner as it handles feed caching, alleviating load on your feed server, in our case a magento ecommerce installation that provides specific categories product feed. Simple pie plugin also handles various configuration goodies including a powerful HTML template system stored in files. Only drawback of this plugin is that it is quite old and does not handle widgets, has to be hardcoded in your wordpress theme (check out the documentation for more information)
  • jRSS widget is less featured but comes with a nice jquery based scroll that displays one item out of your feed, and is widgetized. on the other hand, does not handle caching so be careful is the target website has a lot of hits, can be a load on the source website.

I have put these two plugins to work  on bain-teck.com, dedicated bathroom website.

WordPress tabular data, slick interface

The free gantry framework is one of the many wordpress theme frameworks that come with premium themes distributed by rocketthem.com. One these themes is Omnicron, comes with a nice predesigned table layout that is a good example of clean talbe layout, often used to display various price plans for online services. RokFeatureTable is a theme specific plugin that was initially designed for joomla then adapted to wordpress, produces talbes that details fetaures in a clear  column layout


Display events in wordpress agenda

Custom post types in wordpress allow management of specific data, and this feature can be used for making a specific event type with the expiry date. a tutorial explains this technique here, but you can also have a look at specific plugins that handle events, google map location, and calendar related features. While these feature make an easy way of implementing events management, the specific database tables might prevent you from future developments within the worpdress custom type framework.

google maps multiple google maps markers calendar display
Gigpress no no no
Events manager yes yes yes
Events Manager extended yes yes yes
events calendar pro yes yes yes
events espresso
events calendar yes no yes

WordPress as an application platform

WordPress is getting increasingly popular as backend functions move away from the single blog features that made its success in the early years. Custom types management and widget tools allow many various implementations, such as classifed websites, job listings, etc...

  • Appthemes is a commercial list of specific wordpress themes that do more thatn just layout content : classipress comes with many classifed advertising features such as featured ads , job roller is a job listing wordpress theme. Both come at the easy price of 69$. never underestimate the time required to customize a template  : a dedicated forum is available for each of the themes and they are regularly followed and look like there's good activity out there.
  • DirectoryPress is more specialized in directory listing

Carrington for WordPress makes CMS easier

Sounds too good to be true : the Carrington wordpress theme framework, developped by Colorado based CrowdFavorite, implements what we've all been waiting  for :  AJAX/ drag & drop  wysiywg page structure management. It builds on the existing core WordPress theme structure and functionality and uses core WordPress theme functions for easy adoption by experienced theme authors.

Jquery wysiwyg editing

image.axd

Out of smart combination of powerful jquery plugins and functions comes the Minibar, contextual editing menu that pops up in windows Office 2007 fashion. The demo provided works with standard textarea editor but we'd like to see it implemented within tinymce or fckeditor, for instance : no doubt this is coming in the next few hours !!

SEO Toaster CMS

SEO Toaster was introduced last week and it comes with a set of features that puts that solution right in place for competing with other famous systems. It's also nice to note that the technology behind it is the Zend Framework.

add-edit-page

Inline editing : all administration is performed within the actual site, the admin area does not exist. This is a particularly challenging choice of development but tends to please users when correctly designed. Visually the green & blue theme for the sidebar admin is not the best but is functionnal.

I particularly like the page creation form (image above) which allows the content manager to specify all page information, including SEO related, page title and header image, in one shot.

File Management uses the famous swfupload which is now a minimum requirement for CMS practise. Images are automatically resized and the upload process allows uploading and editing within the same screen which is a recipe for content efficiency. Jquery lightbox is provided in the distribution and resized images link to the original image automatically.

Form maker is integrated in the distribution too but only with the email sender feature, no database integration yet

http://www.seotoaster.com/

Multilingual wordpress with wpml plugin

wpml is a wonderful plugin that has so many  it takes a while to get used to its power.

A new beta version of the multilingual plugin has been published for early adopters who have already switched to 3.0

What I've tested is interesting and allows quick setting of multilingual website

  • Flag displaying is almost instant thanks to dedicated functions or specific coding as documented here. Urls paths are well preserved and extended with the 2 letter language prefix.
  • Post translation is well implemented in the admin, each language displays a + button on the columns of the post / page
  • Posts can share common custom values or images, technique described here
  • all strings thath use the _e function in templates are translatable in the admin or in a mo file
  • as of today the wordpress 3.0 menu and custom post types do not work well with wpml but work is ongoing

vosao CMS

vosao CMS is a java based CMS for google apps engine : meaning free web host for this free opensource CMS. Not a lot top say on the interface side, the project is notable because it works for Google App Engine. Vosao CMS features include visual (WYSIWYG) editing, friendly URLs, internationalization, parent/child page structure, nested and programmable templates, commenting (with moderation), site import/export, content versioning, security and group management, resource management, captcha, Google Analytics, plugins, input forms, SEO URLs, and more, along with free hosting on the Google cloud.

Ionize CMS : create, publish , enjoy

ionizecms

Built from the Code Igniter template, Ionize CMS comes with a lot of features we love : drag & drop tree structure, multi tyope content (images gallery a just a tab away from the page / article editor), multilingual structure, and a flash based file uploader. Interactions are performed by the mochaUI library, a clean and original Mootools project .  Ionize Project is still young and not very active, and is  a live example of an opensource application  that can afford to survive  without a user forum, even though the Code Igniter forum follows it closely. But we believe with a form maker module Ionize CMS would quickly surpass other simple CMS alternatives such as our beloved silverstripe.

version 0.92 is opensource and version 1 has been released privately

Link : http://www.ionizecms.com/en/

Automne : drag & drop cms

automnecms-layouts1

One step further into the  drag & drop AJAX cms adminstration we're all looking for : Automne CMS, developped by french based WS Interactive company, implements block management via ext js library features, that come near to a full  drag and drop interface. The content is added in pages through a template based row system that  gives large flexibility over the final layout of the bloks within the page. Learning curve would typically require a few days work before a developer really gets into the multi template system.

http://www.automne.ws/web/fr/244-essayer-la-demo.php

See also

Flash Moto, web based CMS

FlashMoto-Flash-CMS

The expertise around Flash / Flex based CMS is building up a new area for content management. We haven't had the pleasure to try out the software but the building of wysiwyg interfaces is a promising business, as long as the HTML and Search engine optimization features of pure text are guaranteed : this is where we'd like to know more about FlashMoto's HTML publishing features, which uses the HTML version technique; meaning the flash based web site is also available as HTML for search engines and non flash browser. This technique is also used by Silex RIA, another Flash based CMS.

What distinguishes FlashMoto from a range of other flash content management systems is that it is the first Flash CMS based on ActionScript 3 and realized as RIA on Flex.   The websites powered by FlashMoto are controlled just like a standard CMS but with the extras that Flash offers.  FlashMoto provides a set of SEO tools what makes the Flash CMS website completely crawlable and seen by search engines.

Flash CMS from FlashMoto is characterized by a range of other features:
- ability to add unlimited number of pages;
- convenient WYSIWYG page and pop-up editor;
- rich media library;
- infomodule component;
- video and image gallery component;
- video and MP3 players component;
- deep linking and Google Analytics integration;
- comprehensive documentation and tutorials.

Fuzzle flash based CMS

Fuzzle CMS screenshot (en)web

Fuzzle CMS is a promising Flash CMS delevoped by a group of Russian programmers. The system is claimed to be an extra easy way for creating Flash website thanks to visual content management. Note, Fuzzle’s website is also made with this CMS. Fuzzle brings you advantages of Flash and HTML in one system and affords you create and maintain your website's content without knowing anything about programming. Flash web sites are differ from regular HTML sites mainly by their presentational abilities: Flash technology allows incorporating complex animations and reach multimedia content. However, Flash sites are considered to have such disadvantages as longer time of development (therefore more cost), harder updating, bad search engines ranking. Fuzzle is breaking these stereotypes!
Main Fuzzle features are: :
- multilinguality;
- simple management (convenient visual editing based on blocks placement and multiple selection of blocks );
- design integration from a draft within 5 minutes;;
- SEO support (HTML version auto generation, DeepLinking support);
- continuously replenished Widget Store availability;
- availability of an open simple API for external developers.