The future of Drag and Drop WordPress

As a WordPress Designers, I always creating so simple design that just about anyone could use it. A year ago I saw the first few drag and drop wordpress template. I was been so excited back then. I can do thousand of possibilities in one website and not losing my creativity. Dreaming of creating perfect layouts that match the client requirement without coding.

As a web developer, I was also crazy about delivering a perfect site with flawless functionality, based on the client requirements then deliver it to a customer and the left alone. I want to live the rest of my life without constant clients call, tweaking back and forth.

We need meet halfway on this thing, I believe the future of WordPress Core is drag and drop, but not right now. WordPress themes do not have any drag and drop functionality to build layouts right out of the box. Most of these drag and drop themes heavily rely on plugin or theme specific WordPress shortcodes to output complex DOM structures for rows, columns, containers and widgets. By using such a theme or plugin your theme is becoming reliant on these shortcodes. Drag and drop theme entire frontend presentation of the layout is reliant on the plugin to output the code, once you detouch everything, you will have a constant called on your client.

Its not a secret drag and drop wordpress theme have large nested structures make things like code clarity and debugging harder. A large number of nodes also can lead to slower sites.

A designer friend of mine, used a popular drag and drop WordPress, ends up asking me to fixed his client website and remove the client access to the Theme Builder. He told me that he will go back to Starter Theme again and create a theme based on his client requirement only.

The Upcoming WordPress 4.0

WordPress 4.0 Beta Edition

Lets take a tour on what’s new on WordPress released the first release candidate (RG) for the upcoming WordPress 4.0 version.

Media Library — now has amazing GRID View in addition existing list view.
Wordpress 4.0 Media Library
Previews on Media — WordPress.tv and YouTube video can easily input on embedding via URLS in the visual editor.
Wordpress 4.0 Media URL
Plugin Installation — Layout and visual changes made as well as more information when searching for plugins and details
Wordpress 4.0 Plugin
Language — A better internationalization language for non-English country on installation
Wordpress 4.0 Language
TinyMCE — Better and more friendly Blog posting and editing GUI with keyboard shortcut.
Wordpress 4.0 TinyMCE
Widgets in the Customizer — The new WP version has now put all widgets into a sub-section of the customization screen. This essentially minimizes them when not needed — a welcome UI improvement for sure!
Wordpress 4.0 Widgets in the Customizer

POSTED ON WORDPRESS.ORG
“Developers, please test your plugins and themes against WordPress 4.0 and update your plugin’s Tested up to version in the readme to 4.0 before next week. If you find compatibility problems, please be sure to post any issues to the support forums so we can figure those out before the final release. You also may want to give your plugin an icon, which we launched last week and will appear in the dashboard along with banners.”

Responsive website with Matchmedia

Media queries is a great tool, but we often got a problem on loading time and optimization. Often time our website load all the things – even when they don’t apply.

Scott Jehl, Paul Irish, Nicholas Zaka attempts to optimise the loading of CSS based on viewport size and other factors. By using matchMedia() polyfill, we can now test whether a CSS media type or media query applies. Check out Paul Rhayes how to’s, experiment and Christian Hielmann Demo.

Your CSS

.mq {
  -webkit-transition: width 0.001ms;
  -moz-transition: width 0.001ms;
  -o-transition: width 0.001ms;
  transition: width 0.001ms;
  width: 0;
}

Javascript Event Listener

mql = (function(doc, undefined){

  var bool,
      docElem  = doc.documentElement,
      refNode  = docElem.firstElementChild || docElem.firstChild,
      idCounter = 0;

  return function(q, cb) {

    var id = 'mql-' + idCounter++,
      callback = function() {
        cb({ matches: (div.offsetWidth == 42), media: q });
      },
      div = doc.createElement('div');

    div.className = 'mq';
    div.style.cssText = "position:absolute;top:-100em";
    div.id = id;
    div.innerHTML = ' #'+id+' { width: 42px; }';

    div.addEventListener('webkitTransitionEnd', callback, false);
    div.addEventListener('transitionend', callback, false); //Firefox
    div.addEventListener('oTransitionEnd', callback, false); //Opera

    docElem.insertBefore(div, refNode);
    //don’t delete the div, we need to listen to events
    return {
      matches: div.offsetWidth == 42,
      media: q
    };
  };

})(document);

Javascript on the page

$(function() {
  var $dynamic = $('.dynamic');
  mql('all and (max-width: 700px)', change);
  mql('all and (max-width: 500px)', change);
  mql('all and (min-width: 1200px)', change);

  function change(mql) {
    console.log(mql);
    $dynamic.prepend('

' + mql.media + ' — ' + mql.matches + '

'); } });

How to create your own Jquery Modal

Basic modal need a simple and easy code, sometimes it’s more appropriate to create your own than a full featured modal or lightbox plugin. This are guide to have an Instant Modal or you can check out the result here »

HTML

<div id="question"><h1>Question???</h1></div>
<div class="contactdet">
<div class="contactformfooter">
<div id="close">Close</div>
<h1>ANSWER</h1>
</div>

CSS

#question {cursor:pointer;}
.contactdet{display:none; background:#aaa; width:100%; height:100%; 
position:fixed; top:0; z-index:99999;}
.contactformfooter {width:240px; height:240px; position:relative; margin:10% auto 0 auto; padding:20px; border:1px #000 solid; background:#fff;}
.contactformfooter p{padding-bottom:10px; line-height:20px; font-size:12px;}
#close {width:50px; height:50px; position:absolute; right:-25px; top:-25px; cursor:pointer; background:#333; color:#fff;}

jQuery

jQuery( "#question" ).click(function() {
	jQuery(".contactdet").show();
});

jQuery( "#close" ).click(function() {
	jQuery(".contactdet").hide();
});	

Fully responsive Jquery Animation

Remax
The client want a fully responsive animation with the following descriptive details:
On load greenery scene then the beach on the back, the clients want historical event sequence (1693) of the place such as the railroad, the battle, the capitols, the farm and etc. They want also a tramway and the moving carousel on the beach. They also requested a night scenery of the place.

Methodology:
a. Percentage on size of every element
b. Percentage on margin of each position
c. Used jQuery.html5Loader
d. Resize script on screen
e. Created a repeating loop on Remax ballon
f. Separated the night view fade to the morning

Funky Blueman

Blueman

Blue Man Group is a creative organization founded by Phil Stanton, Chris Wink and Matt Goldman. The organization produces theatrical shows and concerts featuring music, comedy and multimedia; recorded music and scores for film and television; television appearances for shows such as The Tonight Show, Scrubs, FETCH! with Ruff Ruffman, and Arrested Development; and a children’s museum exhibit (“Making Waves”). All of the organization’s appearances star a trio of performers called Blue Men.

I was inspired by the Vegas Blueman when I designed this template.

Download of Blue Man Materials and CSS Template.

Classic Blue Template

Classic Blue Template

Blue is a colour, the perception of which is evoked by light having a spectrum dominated by energy with a wavelength of roughly 440–490 nm. It is considered one of the additive primary colours. The Classic Blue Template was one of the first I created. I think I was thinking to have a henna tatoo when I created this template.