Posts

Drag and drop categories and taxonomies : woocommerce full admin new release

After a 12 months of silence here comes a new release of my preview version of a special enhanced admin interface for woocommerce. Its main purpose is to provide a better interface for viewing and admistering products, from the point of view an organized shop manager that works intensively with categories

The new version labelled 0.3 adds drag and drop for categories. This feature is for the moment limited to dealing with sub categories, whereas a real drag and drop component should also deal with category order, but for the moment do not expect that much : use this plugin to sort categories and sub categories on big databases where you need to get a clear idea of a hierarchy tree.

The idea for this feature came after I had to deal with a big migration from Magento to Woocommerce, where a lot of categories were imported with their products and I needed to check that everything was OK. having no public theme yet, I needed a more convenient interface for viewing the results of the import.

Link :

Other plugins work with taxonomies :

  • Taxonomy terms order is the most famous of all plugins with more than 20000 downloads . It uses the admin menu style interface for allowing taxonomy order.

Beyond the wordpress theme paradigm : block based design

Ever wondered how to share  common design elements between wordpress sites ? A lot of predesigned themes that are used in thousands of websites use predefined templates that allow you to play with variable layouts, but what if you want to design a neat block based page and use elements in pages as you want ?

There is a big constraint when working with predefined themes : can't get out of them easily. I discovered the idea of block based design after trying out the free mobirise static website builder, which allowed me to work out a simple full width responsibe  site in a few minutes.

Layout editors like visual composers or elementor now incorporate predesigned pages too : the obligation to use  a specific theme to get the design you want is now less important than before, time to move to block based design.

In its essence, the best solution I have found for responsive block based design is Visual Composer Extension — Block Builder + Addons, an additional plugin developped by pixelthrone, and sold on themeforest. The concept is very well layed out and the extension works as a folder organised list of specific blocks. Combining the now universal VISUAL COMPOSER extension with a list of predefined blocks seems an ideal combination for bringing web based block editing to the web.

 

Optimizing images for WordPress

There are two main methods for optimizing images when working on wordpress.

First method is to work on your computer before uploading : batch processing is easy if you take the time to find the right software. Windows user will like  Image Resizer or light image resizer while Mac users will find Image Optim or Iresize.

SEcond method is to use a software as a service provider associated with a wordpress plugin, that will resize images on the fly. services like that cost a few dollar per month and offer the advantage of not working on your computer, saves one step, time saver. disavantage is time loading of the image which can vary depending on you rinternet connection. Such services are  zara4, cheetaho, kraken.io ...

Elementor hover tooltip for carousel

Visual composer addict can quit : free wordpress plugin Elementor is out and keeps growing with basic and very efficient widgets, like the carousel that visually beats VC's native. One drawback I encoutered though was the lack of explicit tooltip on image hover that we love to interact when viewing multiple images in a carousel :

elementor-hover-tooltip-illustration

Assembling pieces of code from all over the web, it took me quite a while to get that so I thought I might share. This piece of code is good for experienced wordpress theme developer who knows how to integrate style and javascript, any jquery powered script will accept that one, make sure the carousel you want tooltips has the hovertooltip class because you might not want to apply the effect to all carousels, big full screen might not need that.

javscript hack : creating title attribute from alt, and creating tooltip from title

styling the tooltip : css

 

 

Woocommerce : reasons for choosing additional field plugin

Developping additionnal fields for woocommerce products can be done using custom fields, but this method is not user friendly for the ecommerce administrator. There are many plugins for wordpress that enhance this feature, and we will start comparing the two best known plugins : Advanced Custom Fields (ACF) and (Custom Field Suite) CFS. These two plugins are not specific to woocommerce : they are designed to work for any  custom post type, including woocommerce products.

Popularity

popularity is the first relevant  indicator for the choice of a wordpress plugin, for many reasons : when a plugin is used by a consistent community, you can safely rely on it for the present and medium term future : you have less chance that it will be abandoned, amount of users  gives a good idea of how the plugin will be maintained in the future. Security is a  big issue on wordpress and active plugins are more subject to attacks, and as such more subject to receiving security patches in time.

As of today, the biggest difference between ACF and CFS is their popularity : ACR has been downloaded on more than 1 million active installs, while CFS ranks 30000, which is not a bad indicator, but largely below ACF, the community preferred custom field plugin.

Features

Basically, all you can do on CFS can be done with ACF, with one big exception. the CFS plgin page itself mentions : "This plugin is a free, lightweight alternative to Advanced Custom Fields."

both plugins have basic field types : text input, date input, wysiwyg input, relationship, file  upload. While ACF offers more diversity on the selection of input types, CFS has a big advantage on its free version with the repeater section that is only available in the premium (paid version) of ACF.

Admin Columns

the ability to display products in a single list is a basic operation that any wordpress data type provides, and products in woocommerce obey to that rule. The possibility to include custom fields in the list can be implemented via specific code (ACF / CFS). For those who do not want to code, or if you want an easy to use interface, Admin columns (premium version) do the job and integrate very well with both ACF and CFS, with the problematic fact that you would have to renew your license every year if you want updates.

Method for choosing

First thing you should do is plan : make a list of fields you will need for your products. If you do not plan to make purchases soon, and if you require the repeater field, then go for CFS : its simple API will let you work with custom fields very quickly. On the other hand if you plan more advanced features like color chooser, google map location chooser, then go for ACF.

Other extensions to watch

WordPress customizer : style chooser

I started working with scss bootstrap variables : very easy now to build dozens of color variations for your favorite all in one theme. Imagine you have ten stylesheets to choose from : you can reuse the same theme everywhere and concentrate on color choosing. Here is the piece of code for wordpress customizer that will allow you to select a stylesheet (named main-something.css) among all available from the dist / style folder !!

 

Woocommerce : working with automatic emails

Woocommerce, the most popular ecommerce extension for wordpress, comes with a very efficient HTML template based automatic email system. The first thing to look for when customizing wordpress automatic emails is to go to the woocommerce/settings/emails area, where you can customize the subject of the emails for creating new account, new order, etc... If you want more customization , you have to go your theme and override the default woocommerce email templates.

After that you can test how mails react with the following extensions

Gravity forms : create a new composite field

Ever wanted to create a new type of advanced field for gravity forms ?  for example, I needed to create a dimension field with two select boxes, limiting the choices available for selecting a dimension in centimeters and millimiters. Well it took me quite a while to find out that a lot of documentation on the web is outdated : the "simple field addon" published on git hub simply does not work on latest gravity forms (version 2.0.6 as of today)... Instead of trying to debug that one I found a better explanation of extending fields on gravity forms GF_FIELD documentation page. It turns out that extending that main class in a simple file that you can include in your theme (or create a plugin from it), works fine. here is a sample code taken from the standard time field, quickly transformed to a centimeter / millimeter select box. NO GUARANTEE that this works, it is in development, it still contains some code from the original time field,  I will post updates as I progress, feel free to use it and make your own plugin out of this one

 

 

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;
}

add_filter('content_block_post_type','filter_content_block_init');

Customizing

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(
&$this,
'addFrontCss',
), 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.

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
PREMIUM PLUGINS
 WooCommerce AJAX Product Filter
from CodeNegar
all premium (30$)
 Visual Composer - Sortable Grid & Taxonomy filter

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 !!

screenshot

>> 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

LAYOUT AND EVENT DISPLAY

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

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 

wordpress vs prestashop : product feed options

There's nothing like a good coding session if you wish to export your products : in that case both solutions Woocommerce and Prestashop have their own integration rules that will allow you to build specific module with various hooks and cron implementation. On the side of existing plugins, both prestashop and woocommerce have specific extensions for exporting products to various product aggregators and online comparators. Here is a list of various aggregators, please note that you should check module version and compatibility with your own installed version of woocommerce or prestashop.

WordPress woocommerce vs prestashop : 10 minutes to try

If you had only ten minutes to try a full featured opensource ecommerce solution, how would you start ? In my eternal search for the optimal ecommerce platform, I have chosen Woocommerce over alternate solutions because of the technical knowledge I've acquired with wordpress development. But the level of time investment you can spend on each trial depends on how advanced you are on each platform. We have two solutions for you here :

  • CASE NUMBER 1 : COMPLETE WEB BEGINNER
    you have no knowledge of web development of little hosting experience ? want to try something before you make a choice of web agency or ecommerce solution ? Prestashop guys are smart, they have implemented a full featured on line service based on the latest version of prestashop. You create a shop easily and it comes prefilled with products so you can try the backend and front together.

 

  • CASE NUMBER 2 : WORDPRESS GEEK
    Well you love wordpress and do not want to change solution  ? WOOCOMMERCE should be your choice for ecommerce development. PRESTASHOP users won't be surprised to find the same kind of backend navigation, with a lot of CMS features that are the signature of wordpress : custom post types allow you to work with a lot of various content definitions, like pages, posts, portfolio, but also  products and categories that come with WOOCOMMERCE.  Distributed in the form of a plugin, it can be activated in seconds but requires a few additionnal steps to be properly configured and plugged in the existing installation.

Events Calendar Yearly grid view

The famous Event Calendar wordpress plugin from Modern Tribe Company is one of the most popular event manager for wordpress. It creates a custom post type with all required field for event management, and comes with several views including a monthly grid view with very nice tooltips. Many free extensions exist for that plugin and one of them is the category color for event calendar, very useful for dealing with categories and colors for event display in the grid. What was missing was the yearly view and here comes a quick review of how I implemented it on my customer that delivers renewable energy traininig in brittany.

  • create a new template with a loop using the function 
    global $bzhEventDate;
    $bzhEventDate= '2015-03-01' ; tribe_show_month( array( 'eventDate' => $bzhEventDate ), 'month-small' );
  • customise month grid stylesheet to display smaller grid : 
    <style>
    #tribe-events-content {height:400px; margin-bottom:0}
    #tribe-events-content table.tribe-events-calendar { font-size:11px; }
    .tribe-events-month {display:inline; float:left; width:30%; margin-right:2%}
    #tribe-events-content .tribe-events-calendar td {height:50px; padding-bottom:0}
    </style>
  • customize event calendar views (month-small)
  • don't forget to add styles to body class (functions .php)
    add_filter( 'body_class','breizhwave_classes_body' );
    function breizhwave_classes_body( $classes ) {
    if (is_page("3088"))
    $classes[] = 'events-gridview';
    return $classes;

    }

Yearly events view for tribe calendar – sorted by month

wordpress-event-calendarA customer asked me a specific page with all events displayed for the famous Event Calendar Plugin. Nothing hard here : I created a custom page template with the following code - does the job... note that this is for ENFOLD wordpress theme stylesheet but you can easily adapt to other column frameworks like visual composer...

 

 

WordPress drag and drop base themes

I'm just after trying 2 alternative methods to the now famous visual composer.

  • LayersWP is a base theme that come with an amazing layout builder. It relies on installed widgets, which give a huge flexibility. This featured is common to the Page builder free plugin, that I reviewed last year. LayersWP is really good to use but one drawback I found is that it does not allow you to place a widget over a column : you have the possibility of using columns over content (text / image ) elements but the functionality seems restricted to this very single element
  • Make from ThemeFoundry free layout builder comes with only three elements : text, gallery and slider. not bad for a start but Page Builder plugin does better.