Introducing Dynamik Website Builder 2.0

This update was a long time coming, but it’s finally here. Not earth shattering, but not too shabby either. I wanted to provide something that you could smoothly transition into, yet enjoy notable refinements and new features. So let’s see what I came up with.

All New Front-End CSS Builder

First, I completely re-built the Front-End CSS Builder and Style Editor tool. Actually, I created a new Plugin called FE CSS Builder that can be used on other themes and then integrated that into Dynamik and both Genesis Extender and Beaver Extender Plugins. It’s more refined and I believe provides a more intuitive front-end styling experience. One of the coolest bits is that fact that the element selector drop-down menu now highlights elements while hovering over them in the menu. In other words, there’s no need to select a specific element to see the highlight effect, it happens on the fly. Now I rarely even look at the names of the elements in the menu, but instead let the highlighted areas tell me what will be affected by the CSS code.

Genesis/Dynamik Hooks Map

Now, when you have the FE CSS Builder enabled and you’re logged into your site, you’ll find not only a CSS Builder icon, but a Hooks Map icon as well. When clicked it reveals the names and locations of all the Genesis and Dynamik hooks, all live on the front-end of your site. This can be super useful for locating that precise hook to use when working the things like Custom Widget Areas, Hook Boxes and custom functions.

Fixed “Sticky” Header Feature

One, or two, or maybe a few hundred requests came through for this one. πŸ™‚ I resisted making this too big or option-rich as I wanted to make sure it didn’t conflict with the many no-coding design options. So it’s a simple feature, but super flexible and simply implements fixed header functionality with a single “Save Changes”, which I know many members will appreciate. Be sure to check out the screencast below to see some of the various ways it can be customized.

All New Code Editor Integration

The Custom CSS, Functions, and JS editors that were previously using the CodeMirror code editor are now powered by the much more powerful and refined Ace Editor. This provides much better find/replace search functionality, code snippets (can finish writing code for you based on suggestions as you type), and parse error messaging that can helpΒ pinpoint poor or even broken code.

Other Notable Features & Refinements

  • Ace Editor integration and AJAX save functionality for the Dynamik Skin {CSS} {PHP} {JS} code editors.
  • New sections in the back-end CSS and PHP Builder tools.
  • Replaced the “Select All Text” buttons in the Code Builders with “Copy To Clipboard” functionality.
  • Tweaked the Dynamik License page to accommodate requests from members regarding not revealing number of active sites and hiding the license key from plain view.

You can checkout the changelog here:Β

And be sure to check out the Dynamik 2.0 Intro Screencast as well:

23 comments on “Introducing Dynamik Website Builder 2.0”

    1. Yes, as long as your customizations are done through the Dynamik Options and not through direct edits to the /wp-content/themes/dynamik-gen/ folder, they should be safe through auto-update.

      1. Hey Eric,

        I just realized my main site is still on 1.9.6 and want to update to 2.3.0. Partially because I want to visually compare fields/setting for another site that I’ve just installed 2.3.0. on for the first time.

        How does auto-update work for my site with 1.9.6? This video doesn’t have the same options as what I’m seeing

        Is there an actual way to have it automatically update? Or is it more like an alert should show up like plugin updates and then I can click to update it?

        If not, what is a safe way tor retain settings and update through the WP dashboard or FTP

        I’ll keep scouring the forum and hope to find the answer in the meantime.

        1. I believe with that version of Dynamik you’ll have the license activation field in the Dynamik Settings admin page instead of Appearance > Dynamik License like in 2.3.0. If that’s the case then just activate Dynamik using that license area if you haven’t already, and then go to the “Updates” admin page in your WP Dashboard and if you don’t see the Dynamik update available there then just click the “Check Again” button to re-trigger the update check. At that point the update should show up, and then from there you’d simply click the update button to run the auto-update for Dynamik. So it’s not really an “auto-update” in terms of updating without any kind of initiating on your end, but auto in that it does all the work for you (i.e.. replacing the old Dynamik folder with the updated one).

  1. Hi Eric, This is a really great update. I’ve asked for something along the lines of the Hooks Map and I’m really happy to see it. The Front-end CSS builder enhancements with the icon to select the element is also awesome. Thank you!

  2. Thanks for the video! Great to see the code editor with syntax highlighting, the fixed header, and the live highlighting of hook areas. And I really appreciate your “err on the side of caution” approach.

    Thanks, Eric!

  3. Works great on my Dynamik based sites, with various amounts of custom CSS, functions and hooks. Question (I also asked this in the Dynamik FB group), did you do any tests with PHP 7.x? I experienced problems (site could not be reached) and sticked to 5.6 for Dynamik based sites.

    1. Glad to hear it! πŸ™‚ Regarding your PHP question, that’s odd for sure. I’m running Dynamik 2.0 on this site ( and it’s running PHP 7.0 without any issues. Are those PHP 7 sites localhost sites by any chance? XAMPP sites?

Leave a Reply