Feast of wordpress drag and drop composer

The big battle for the best drag and drop visual composer has begun. Who will win ? We(ve already reviewed a few of them, among which the most popular of them, Visual composer.

Stand alone builders

  • http://massivedynamic.co/
  • https://fr.wordpress.org/plugins/forge/
  • https://wordpress.org/plugins/elementor/
  • https://wordpress.org/plugins/live-composer-page-builder/
  • https://www.layerswp.com/

Theme integrated builders

  • http://www.elegantthemes.com/plugins/divi-builder/
  • Avia Builder from enfold theme

Torro form drag and builder for wordpress / opensource

I am a big Gravity form user, and that very good and long used plugin has given me a lot of extension possibilities. Now comes a free opensource plugin , torro forms, which a nice way of displaying entry data via charts. Of course, it's new and does not have the extensions that gravity forms has, like Paypal payment, article creation, but it has a good array of available field types

Reverse Engineering Visual Composer for footer design

The Visual Composer drag and drop content manager for wordpress is one the most used component for WORDPRESS. It is not perfect but is used all around the world and many third party  plugins enhance its default capabilities. I have one specific use for this component that's not easily documented : using visual composer for designing footers is something that can be easily achieved thanks to the Custom Post Widget plugin that creates a new content block custom post type that can now be included in sidebars via widget.

Activating and configuring

First thing to do is install and configure plugins. A little trick is necessary here : by default, visual composer is activated only on page post type. After you have activated Visual Composer and Custom Post Widget, you can go and check out visual composer role manager settings. You will see that you can activate visual composer for some post types, but you will not find content blocks : this is because the Custom Post Widget defines content blocks as private, whereas Visual Composer only accepts public custom post types. Fortunately, someone has thought about it and you will find here a piece of code that makes content blocks public.

function filter_content_block_init()
$content_block_public = true;
return $content_block_public;



At this stage you can create content blocks, activate visual composer for content blocks and include them in sidebar using the content block widget !! very nice !! But one specific hack remains to include : if for example you want to use background for rows, visual composers uses specific custom styles inserted in the html head. But when you use the widget, html head is the head of any page and custom visual composer styling is not included, and you cannot benefit from extra styling features. So here is some clue that I fond out via reverse engineering.

have a look at you js_composer folder : the initPage function (line 128) from class-vc-base.php add an action to the wp_head . This is the key to the process. You need to include addFrontCss from the footer now

add_action( 'wp_head', array(
), 1000 );

the function addFrontCss itself calls addShortcodesCustomCss function, which gets some post custom meta value  : the only way to combine best of both worlds is to reuse this function in the ooter display function, which would be in the custom-post-widget plugin folder, in the  post-widget.php file, function widget : add the following code before the shortcode rendering :

//wave201603 compatibility with visual composer styles
if (function_exists('vc_set_as_theme')) { $id=$content_post -> ID;
$obj = visual_composer();
$obj->addShortcodesCustomCss($content_post -> ID );

or alternatively, use the code straight from Visual Composer's addShortcodesCustomCss function. [UPDATE : ] This last method turned out to be more reliable because it includes the style sheet on all pages, where as the previous method from visual composer class only works on pages where visual composer is actually being used for main page content...

$post_custom_css = get_post_meta( $id, '_wpb_shortcodes_custom_css', true );
echo "<style>". $post_custom_css . "</style>";


Solving the image sizes wordpress issue

One big drawback of wordpress as a content management system is the way it deals with various image sizes : when you upload an image to the wordpress media interface, your favorite CMS software creates thumbnails, medium and a variable occurence of intermediate image sizes, depending on your main theme and installed  plugins. For example, Woocommerce is a top plugin and it creates three intermediate images. It is good if you have all plugins prepared and installed before working on images and content, but if you need to make changes to  layout or front end display requiring specific or new image sizes, you have no other options than going into the code, declaring that new image size, and use one of the numerous plugins that allow you to regenerate all images for that specific size you've just created. Apart from the fact that it is not a very funny operation, it also creates images for all media files you've ever uploaded including the ones that will never need to be resized to the new size. And if you don't regenerate the images you need to display, well they simply won't work.So as a result if you have been working on your website for years and trying out dozens of different image sizes, they will all be stored on your hard disk, and that's size intensive and slows down your staging / backup / restore operations that are a minimum for each serious site

Well that's one solution, and the other solution is to use dynamically generated images. Some plugins do that, and hopefully one of them combines the best of both world : fly images resizer allows you to create new images sizes that will be cached to a specific directory that can be cleaned if you need to. I'm just after testing the plugin and it comes with the same kind of feature that wordpress has imagined : creating new image sizes including crop option, registering those sizes or in code dynamic image size creation. It has a small back end link that allows you to delete cache, and one improvment I suggest would be to allow specific image size cleaning.

Testing bootstrap for woocommerce

developing custom theme for woocommerce is quite easy : default product archive view are coded within the plugin. But if you need to go deeper, why not try the famous bootstrap code framework.

  • My first attempt at a starter theme led me to try SAGE from ROOTS. Very good tutorial showed me how to install the theme from git clone, then install node js and gulp. I don't understand why so many folders are created in my theme though, really interferes with theme coding. Well this is not theme related but that's how far I got with SAGE and gulp. I also managed to implement a good default navigation system using classic bootstrap menu walker.. Strange that this would come by default to SAGE theme
  • Second attempt with a bootstrap theme is also from GIT, and it's not too bad either : wordpress-bootstrap has this top fixed navigation implemented, even though  it's not exactly mobile responsive yet  . But this is not very disturbing. this theme is also interesting because it comes with language management...

woocommerce themes with thumbnail image slider in loop

Displaying many images for one single product is a default feature of woocommerce product interface : in its primary setup, woocommerce displays the single product page with the featured image in main display, layed out above thumbnails of product gallery images. But within the category pages,  or more generally within the product loop, woocommerce displays only the single image. One interesting feature is to allow user to view all product images within the category page (or within all products loops), either via a carousel or a lightbox. Here is a selection of themes that integrate this feature natively. All these themes share the same following features : they integrate visual composer, and most of them show off the quick view feature, provided by free quick view plugin


OXYGEN : woocommerce boostrap theme with product slider and quickview in default archive page



POLARIS : woocommerce boostrap theme with product slider and quickview in default archive page


The alternative : product list hover




Woocommmerce product filter plugins comparison

attributes  custom taxonomy filter SEO friendly url magic widget / shortcode
FREE PLUGIN with  premium options
Advanced AJAX Product Filters
from BeRocket
Y  premium  Y
WooCommerce Products Filter
Premium : WOOF
Y Yes Y
 YITH WooCommerce Ajax Product Filter
WordPress Meta Data and Taxonomies Filter
 WooCommerce AJAX Product Filter
from CodeNegar
all premium (30$)
 Visual Composer - Sortable Grid & Taxonomy filter

Displaying search results with various content type within wordpress templates

examples from real web sites

interesting wordpress search plugins

Beyond mobirise website builder

Six months after writing my mobirise review, I'm still amazed at the quality of this free software. It has spawned a new business model for my web design business in the west of Brittany where I deal with an important  market share  of customers who do not wish to pay for wordpress or CMS powered web design : small and medium companies just need to be online, not to pay for extra content management services they absolutely do not need.

SELF HOSTED web site creation 

This is why I am investigating domain management and webdesign, and two new tools have caught my attention. Remember SILEX FLASH CMS ? their original website has gone down and there is a new SILEX, are these the same guys ? anyway this is a good web design interface that generates static HTML and sends it straight to your FTP. the project is available online for try and test and abuse (free) !! and also hosted on github. But I honestly don't know if it generates modern pages like MOBIRISE does... I have also been looking at another self hosted solution, that runs on CPANEL, this is useful for hosting business where you want to give your customers access to website design : look at KOPAGE if you want something dynamic  integrated into your webhosing CPANEL package, or Aloha Editor, opensource javascript application that provides a very neat editing interface for HTML pages, and its PHP integration CreateJS. Or opensource SITECAKE

FREE website creation tools

apart from squarespace or WIX, a dozen of website creation tools allow to start free : investigating domain reservation api led me to try moonfruit which has lot of initial templates to start from. But the real deal breaker is pagecloud, which promises to create your HTML5/  CSS compliant webpage straight from photoshop


To conclude,  let's return to static generation : I have found a really net webdesign app that will cost you 70 bucks, I really like the HTML it produces, and that's all for now, here is a screenshot, enter BLOCAPP for mac, their front page says it all : simplicity, quality, clarity ...





Woocommerce category admin early release

Hi all, this is 2016 and after analysing many customer comments from both magento and wordpress shops, I decided to switch to wordpress... But the category / product management interface in woocommerce is not easy for previous Magento users and this is why I created this new plugin (not yet released on wordpress.org) to display categories and products together with the hierarchy. Obviously is for developers and I hope this will help you make the switch to wordpress, please go and download this early release of the future Full Woo Commerce Admin plugin, and most importantly, please comment !!

The idea of this plugin comes from the best opensource ecommerce platform after woocommerce : Magento really beats them all in terms of ease of administration, and the most interesting feature is the category tree hierarchy with products display : this plugin brings this magical feature to wordpress.

Download : very early release - WARNING  : this is for developers only !!


>> read also :  front end woocommerce hierarchical category shortcode

All-in-One Event Calendar vs The Events Calendar

We have at least two powerful and free event calendar plugins for wordpress, and we have tried both on live websites. Both distributed as opensource plugins from wordpress plugin repository, their contributor company rely on advanced  features to make money via premium version of the plugin.  All-in-One Event Calendar (AIOEC) is developed and maintened by Vancouver based http://time.ly/, has more than 100 000 downloads and is actively maintened, which is a sign of future reliability and compatibility with coming wordpress updates. Same story for The Events Calendar (TEC): it's given to you by a company called TRIBE, shows more than 300 000 downloads, and last update is just a few days ago. The team page from Tribe company is quite impressive with highly specialized engineering profiles, and the pro version is clearly distributed as a well packaged product Event Calendar Pro version, at various prices depending on the licensing, starting at 89$ / site / year.. AIOEC has its own premium version in the form of various addons.

Events basic : time place and location

AIOEC and TEC both comme with special  custom fields within the editor : quite similar in their approach, they have small differences that can help you make a choice.

Typing events can be a time consuming affair : both plugins have their own custom post type within a specific wordpress admin menu. If you have many events TEC has a big advantage because it stores organiser and location information in separate tables, which helps grouping events by location and by organiser.

On the other side, if you want to go free, AIOEC allows Recurring events, while on the case of TEC this is only for the premium users.

AIOEC screen is better organised with accordion nested fields, but TEC is more efficient with specific data tables for location and oragniser information

AIOEC screen is better organised with accordion nested fields, but TEC is more efficient with specific data tables for location and organiser information


TEC also provides  very nice free category color plugin, which can help you further organize events : this is a very strong argument in favor of TEC in terms of visual display on the front end. On the other side, AIOEC has a very nice card layout free extension that also allows list view, this is really nice for quick display of neat calendars. Just like AIOEC, default TEC templates need to be trimmed of extra elements you might not want to show : the default event calendar month view has a lot of extra stuff you don't need, like search engine . Detailed event view also needs trimming, depending on what kind of event you need to show.

don't understimate the editing work in php templates : posterboard view is nice but might require simplifcation

Other significant calendar solutions for wordpress

WordPress recommended plugins for our themes

there are a few plugins you cannot live without, and while all our theme can work with default worpdress install, we strongly recommend you to use the following for faster results

  • Visual editor widget will give you tinymce wysiwyg editing with image upload, link, bold, etc... for widget sidebars and footers
  • Pronamic google map can link each of your articles , posts and pages to a google based geolocation. We use Pronamic for our custom city search integration for fotowave plugin

Woocommerce design elements examples

There are many woocommerce free themes available out there (check out this article on bashooka.com) , but you can also start from scratch with your own development. Building a woocommerce theme from scratch is not a difficult task when you spend a little time preparing your layouts. Here is a list of basic elements your need to figure out before you switch to theme development. Time saving operations can help you design a nice layout for woocommerce!!


  • Header design : usually the header is the place to display main logo and navigation menu  : above that main menu position you can add a small horizontal bar with contact details, social networking icons, user and cart information. Of course the menu bar should be responsive, meaning that a small width device will transform the menu bar into 3 small horizontal graphic bar with drop down interactivity.
    Find examples of powerful menu design on designyourway
  • Cards : a design for product list in category page, and search results/
    Cards design is rapidly becoming a standard for responsive website development, as explained in this good tutorial from TUTSPLUS : Learning Material Design Lite: Cards
  • Footer design
    • trust elements : 4 or 5 icons at the bottom of the page to build trust with quality, shipping, customer testimonials, payment information
    • a great example of footer design on medium.com featuring an abstract landscape

JQuery mobile framework

iphonedevelopmeentRostov-on-Don / Russia based company has developped a full featured html  mobile interface for application like smartphone web development. An alternative to the famous jquery mobile touch optimized framework, or pretty mobile, to name just a few. To bridge the gap between HTML and native mobile application, you will need to embed your work in a specific browser component :  this can be done via various systems that we explicit an a previous article : Developp Iphone apps without – or with – mac

Mobirise, easy html bootstrap builder

Released by a dutch company, Mobirise is a small html builder tool that creates HTML5 bootstrap pages with predefined full screen responsive elements : it is the perfect tool to build quick web  prototypes with 2105 trendy layout. Premade HTML elements include full-screen hero images, scrolling with parallax effect, YouTube video backgrounds, mobile burger menu, sticky header and more. The fact that it's free is definitely a game changer but we can't guarantee that this is going to stay. Pinegrow is a good alternative that is commercially available : it advertises the possibility to build wordpress themes with is wysiwyg software : more than interesting !

Mastering drag and drop with Qards for wordpress

It's been a long way since wysiwyg editing was introduced to  wordpress via the implementation of tinymce for wordpress, back in 2005 with the release of version 2 of the famous blogging platform. The world of WYSIWYG editing was just in its early stages and the possibility of front end editing was still a dream. It's now a common feature of most content editing plugins for wordpress, and the front end editing feature is actually in good position for core integration, even though the best candidate plugin for that is now in "inactive" status as it was not updated for months.

Today advanced users of wordpress are familiar with tools like Visual Composer who has become a de facto standard for complex page layout editing. The recent addition of front end editing  in the plugin has not brought magic to the drag and drop usability of the stuff but it can help in tricky situations. A big drawback of Visual Composer is the complex code it produces and the not so easy use of its many functions and add-ons.

Enter Qards, a new plugin for wordpress that comes with a really new approach and threatens to end work for developers. Well if that could be true ! One thing is certain, Qards stands out as  a new step in the development of powerful user interfaces for building web sites.

First trial of the plugin brings a good feeling and ease of use. In seconds you design and prototype surprisingly neat layout of modern looking pages : full screen pages, image grids, text and video combined within attractive predefined and responsive layouts. A beginner will not have difficulties working with Qards but the experienced  wordpress developer will have to spend some time getting away from traditionnal wordpress tools.

For small websites it seems the perfect tool. For big web sites qards suffers for lack of compatibility with the basic wordpress tools : admin bar, media library, widgets , sidebars, footers are useful for website building and they are not perfect within wordpress, but we need some link to the tool we know to embark new stuff like Qards.

More about Qards drag and drop plugin : designmodo.com/qards/

More reviews of Qard plugin