DevExtreme Integration for WordPress


A WordPress Plugin to allow you to add DevExtreme widgets (from Developer Express) into your WordPress pages and Posts.

Adds the following stylesheets to the head of every page (when not in Admin mode);

  • dx.common.css
  • dx.light.css

Adds the following Javascript files to the footer of every page (when not in Admin mode);

  • globalize.min.js
  • dx.all.js
  • dx.webappjs.js
  • dx.phonejs.js
  • dx.chartjs.js

Adds two new meta fields to every post and page.  Note you have to edit your page in “Text” mode for now.  We are planning to extend this plugin with short codes that will allow you to use Visual mode and see widgets live in the page editor.

The first new meta field “devextreme Custom Javascript” allows you to create Custom JavaScript code that will be added inline into your page as it’s delivered.  Here you can use the jQuery extensions for DevExtreme to turn elements of your HTML into DevExtreme widgets.

The Second new meta field “devextreme Custom CSS” allows you to override styles that your WordPress theme has applied to the elements of your widgets.  For example the theme for our website automatically applies an extra 10px padding on all 4 sides to <TD> and <TH> cells in a table, which affects the layout of the DevExtreme Calendar widget – the following fixup style then corrects that.

The JavaScript code for your page will be added to the footer template of every page or post (when not in Admin mode).  The Custom Styles will be added to the header template of every page or post (when not in Admin mode).

You can see a sample of this page running HERE.

You can get the Plug-in by downloading the following file and unzipping it into your plug-ins folder.