4elements, Amsterdam, Holland

  1. Fast Web UI With Webknife

    Final product image
    What You'll Be Creating

    The modern web demands faster and faster development cycles. With this greater demand, there is a need for tools to help meet these deadlines. Webknife is a web development framework to help in creating nice layouts and designs with the least amount of coding. In this tutorial, I am creating a web-based application to help instructors at Tuts+ create their course paperwork in Markdown more easily.


    Before coding, it is a good practice to get an idea of the application layout and how you want it to work. This application creates a properly formatted Markdown document for placing a video course into the Envato CMS. Therefore, it will mostly consist of input fields.

    I used Affinity Designer to create a wireframe of the application. Here is the main Properties tab. This is the main information needed to create the CMS entry for the course.

    Course Properties Form
    Course Properties Form

    Selecting the Lessons tab shows this form. This is where the instructor can input the chapter headings, lesson titles, lesson descriptions, and lesson links. The numbering will be automatically calculated by the program. This tutorial only shows enough demo items in order to see the layout.

    Course Lessons Form
    Course Lessons Form

    The Export tab has a single element: a button to export the course to a Markdown document.

    Course Export Form
    Course Export Form

    Getting Started With Webknife

    To download the library, go to the website for Webknife and download the latest version. While writing this tutorial, the latest version is 1.4.0. Unzip the file in your working directory.

    Webknife is a group of style sheets and some JavaScript files that make creating HTML sites fast and easy. Therefore, I will walk through the creation of the HTML first, show its outcome, and then add just enough CSS to make it look the way I want it. The Webknife toolkit does most of the work.

    The top of the HTML will be the header that loads the style sheets and sets the title. Create the file index.html and add the following:

    That is the beginning of the HTML file for the project. Everything else goes on between the <div id="main"></div> tags.


    The first part is the tabs. They will have icons and some text describing what that tab does. Place this piece of code in the main div:

    The unordered list has a class of w-tab. This Webknife class formats the list items to be tabs. The first list item has the class of w-active. Webknife uses this to change the color of the tab to be the active colorization. All the rest do not, so they will be inactive.

    Each list item has an anchor with an onclick function. These functions I will create to support switching of content panel contents.

    Inside the anchor tabs, there are two spans. The first span has a class of w-icon. All spans with this class have a data-name selector with the name of the icon to insert inside that span. The Properties span has the data-name="clipboard". The Lessons span has the data-name="compose". The Export span has the data-name="share". Webknife has 77 svg icons to choose from. Refer to the HTML Reference Guide for more details.


    After the Tabs Panel, place this code:

    This section begins with a div that contains all of the panel contents for all three tabs. This div also contains two message areas: one for save completion and another for error messages.

    WebKnife Messages - with my added formatting
    Webknife Messages—with my added formatting

    Webknife has the CSS style large for making the icon larger and the CSS style coloured to color it red. In both messages, I am using the data-name:"alert_circled" for a rounded triangle with an exclamation mark icon. Each message has the Webknife class w-message to have the message styling. The saved message uses w-information, and the error message uses w-error.

    In the source files for this tutorial, I have these lines commented out. I will use JavaScript to inject this code into the DOM as needed.

    Properties Panel

    For the Properties Panel, add this code:

    The Properties Panel div contains two classes: w-form and w-active. w-form defines the styling for a form and w-active designates it as being actively displayed. Since the application should start on this panel, it is set from the beginning.

    Inside this div, there are divs with the class w-form-group. This class keeps everything inside it on one line. Each of these divs contains a label and an input or a textarea. Each input has a unique identifier to get the information easily from JavaScript. There is a w-form-group dev for each of the inputs on this panel.

    Lessons Panel

    After the div for the Properties Panel, place this code:

    The structure of the Lessons Panel is the same for the Properties Panel. The labels indicate different section numbers and lesson numbers. The inputs are text inputs for the headings and titles, and are textareas for the descriptions.

    Each header, lesson title, and link has a span element with the data-name of close_circled. This places a circle with an ‘x’ in the middle for deleting those items.

    Each link input has a span element with the data-name of earth. This places an icon that looks like a globe.

    All of the buttons have the Webknife classes w-small and w-colored. The addButton class is for adding specific styling in the CSS file.

    The ids are not the final ones, but the JavaScript code will create them as needed. These just show the basic format.

    Exporting Panel and JavaScript Importing

    After the div for the Lessons Panel, place this code:

    The Export Panel has a simple button. The Webknife classes of w-large and w-colored make the button larger and a darker blue.

    After the closing divs for the panels, the three script tags load JavaScript files from Webknife and my JavaScript file. My JavaScript file contains the functions needed to switch the tabs and display the date picker, and the modal dialog for adding a link.

    JavaScript Code

    In the file js/basic.js, add this code:

    The first function is an onload function. It will execute when the page load finishes. This function sets up the svg icon injector with the Webknife framework. After that, it sets up the date picker, also from Webknife, for the due date of the course.

    The global variables and the three functions following perform the tab switching. I use the variables to keep the jQuery wrapper for the different tab elements and panels. That way, they aren’t created each time the functions are run.

    The last function is for popping up the modal dialog on the Add Links button. When the user clicks the button, the following dialogue gets displayed:

    Model Dialog for Adding Links - with my formating
    Modal Dialog for Adding Links—with my formatting

    More code needs to be written to get the application fully functional, but this is enough for this tutorial.

    Custom CSS

    Before adding the custom CSS, the application looks like this:

    Application with Default WebKnife Styling
    Application with Default Webknife Styling

    This doesn’t look too bad, except that all the panels show at once and the background colors are not what I wanted. But this is easy to fix. In the file css/basic.css, place this code:

    This is all the CSS needed to get the look that I wanted. Most of it is getting the icons in the proper location, properly hiding the panels that are not visible with the tab selection, and setting the background colors.

    With the CSS in place, the Properties tab looks like this:

    Properties Tab
    Properties Tab

    The Lessons tab looks like this:

    Lessons Tab
    Lessons Tab

    And, the Exports tab looks like this:

    Exports Tab
    Exports Tab

    They are not exactly like the wireframe, but I like the way this looks.


    In this tutorial, I walked you through the creation of a basic web application for creating course sheets in Markdown for Envato. This project just shows the front-end graphics, but demonstrates how to use Webknife to quickly create the look and feel of your web application or web site. There are many more elements to use than I was able to make use of in this project. It’s up to you to experiment now. So, go create something new in Webknife.



    Leave a comment › Posted in: Daily

    1. The Beginners Guide to WooCommerce: An Introduction to Managing Orders

      WooCommerce is quite a versatile plugin which allows you to convert any ordinary website into an online store. With this plugin you can sell your products to customers in the best possible way. The reason is that WooCommerce offers a user-friendly interface to place orders. Customers can complete their checkout process with great ease, without facing any kind of hassle.

      Like all other shop owners you will definitely want to keep a record of all the product sales. WooCommerce allows you to track each and every order which is placed by your customers. In today's article I will explain how WooCommerce helps you in managing your product orders.

      Orders in WooCommerce

      If I talk generally in terms of an online transaction, then any order is considered as 'placed' the moment any customer completes the checkout process. After this every order is assigned with a unique Order ID and is displayed to the online store owners who can view it at the back-end via their site's WordPress dashboard account.

      WooCommerce Orders

      You can view your store orders by going to WooCommerce > Orders.

      Order management page

      This will lead you to the order management page, which will list all the placed orders so far. You will notice that this page is quite similar to any post management page, with some very similar options.

      Order filtering options

      The first row of options allows you to filter the list of displayed orders by date, status and customer. You can also apply a variety of Bulk Actions like Move to Trash, Mark processing, Mark on-hold and Mark completed.

      Order details columns

      In this section you will notice some columns bearing useful details under which each order is displayed in a separate row. The details which these columns offer are about Order, Purchased, Ship to, Customer Message, Order Notes, Date, Total, and Actions. Like any other post you can edit any order separately by clicking on the order id.

      Let's look into the details of these columns separately.


      Order details

      The first column displays the basic details about the order. First of all you will come across an icon which is shown towards the left of the Order ID. If you hover the mouse over this icon, then it will display the current status of the order, i.e. whether it is complete, still processing, etc. Next to this icon are some details which bear an Order ID, the name of the customer who has placed the order, and his or her email address. Order ID is a unique identification code which is non-sequential in nature and is quite similar to the post id.


      Number of items purchased

      The next column displays the number of items which are purchased in a single order. A customer can purchase multiple items in a single order.

      Ship to

      Ship to address

      The name of this column explains its meaning quite well. It will contain details about the address where the customer wants the order to be shipped. It also displays the details about the method of shipping which the customer chose. The above figure shows that the shipping address is in Germany and the customer has selected the Flat Shipping Rate. 

      Customer Message

      Customer Message icon

      The next option is an icon, and when you hover the mouse over you will get to know that it is for the Customer Message. Any customer can leave a message for the online store owner, and it will be displayed in this column.

      Order Notes

      Order Notes icon

      Just like Customer Message, this field is also optional, and it will display Order Notes if any. Both the Customer Message and Order Notes will be displayed to the admins/owner of the online store.


      Date of order

      This column will list the exact date when the customer placed the order.


      Total amount of order

      The column for Total displays the total amount of the items that are the part of the order. This will display the total sum no matter how many items there are in a single order. Here you will also find details of which payment gateway has been selected by the customer (in this case it is Direct Bank Transfer).



      The last column will allow you to perform certain actions on the order placed by a customer. Three different icons are displayed in this column. These are:

      • Processing: The first icon is for Processing, which means the order is still being processed.
      • Completed: The second icon shows that the order has been completed and supplied to the customer.
      • Edit: The third and last option is for Edit, which obviously allows store owners to edit the status of the placed order.

      Important Note

      An important thing to note is that you can edit the details of any order at any time. This editing is done in the same way as you edit your posts. Simply click the details of the column which you want to change.

      As far as managing orders in WooCommerce is concerned, that's about it. In the next article I will explain how you can add a new order. Till then if you have any queries use the comment section to ask.



      Leave a comment › Posted in: Daily

    1. The Web Audio API: Make Your Own Web Synthesizer

      Robert Moog famously created one of the very first commercial modular synthesizers. His inventions consisted of banks of wires and knobs, allowing musicians to create sounds never heard before. These instruments weren't cheap either, costing thousands of dollars for even the most basic model.

      Now, thanks to the Web Audio API, we can create our own similar-sounding synth that we can configure to our heart's content for the grand total of $0. Not only that, we can distribute our synth instantly to anyone in the world thanks to the web.

      If you haven't read the previous tutorials in this Web Audio series, I'd suggest going to back and reading them before undertaking this one, as they cover the basics of using the Web Audio API and creating a sound from scratch.

      Getting Started

      Let's start by creating a basic HTML page.

      And some basic styling in our styles/main.css file.


      Perhaps the most important thing your synth needs is a keyboard. Luckily, I've created a little snippet of JavaScript that will add a virtual keyboard to your page. Download a copy of Qwerty Hancock and reference it at the bottom of your page like so.

      Then add an empty div to your page with an id of "keyboard".

      This is the place on the page that the keyboard will be inserted into.

      We'll also want to set up a dedicated JavaScript file for our synth, so let's create that too and reference it after where we've included Qwerty Hancock.

      Within synth.js we'll initialise our keyboard by doing the following.

      This tells our page to insert an instance of our keyboard into the element with the id of "keyboard", resize it to 600 x 150 px, and make the number of keys on the keyboard cover two octaves. Save and refresh your browser to see a lovely onscreen keyboard. Use keys, touch, or your mouse to see notes light up as you press them.

      Qwerty Hancock provides us with two event listeners, keyUp and keyDown. These allow us to hook into the keyboard and write code that fires when the keyboard is pressed. It also tells us which note was pressed, and its corresponding frequency in hertz.

      Oscillate Wildly

      Let's start an oscillator when a key is pressed. We'll stop it after one second so it doesn't go on forever.

      Why are we creating the oscillator inside the keyDown function? Isn't that inefficient? Oscillators are designed to be lightweight and to be thrown away after use. You can actually only use them once. Think of them as some sort of bizarre audio firework.

      Now when we press a key, we hear a sound. It's a bit loud, so let's create a gainNode to act as master volume control.

      A keyboard that plays one single note over and over isn't very fun, so let's plug in the frequency to the oscillator before we start it playing.

      Lovely. We now need to stop the oscillator playing after we lift a key rather than after a second. Because we're creating the oscillator inside the keyDown function, we need to keep track of which oscillator is playing which frequency in order to stop it when the key is released. A simple way of doing this is to create an empty object and add the frequencies as keys, along with which oscillator is playing that frequency as its value.

      This means we can easily use the frequency we get from our noteUp function to stop that specific oscillator.

      We now have a fully working (very basic) synthesizer in the browser! Ok, it doesn't sound great at the moment, but let's see if we can change that.

      The first thing to do is change the type of wave the oscillator outputs. There are four basic types to choose from: sine, square, triangle and sawtooth. Each different shape of wave sounds different. Play about with them and choose your favourite. For this example, I'll choose "sawtooth".

      There, that sounds better.

      It's very rare you'll find a synthesizer that uses a single oscillator. Most synths beef up their sound by combining different oscillators of different types. Let's see how it sounds if we add another. Remember, we need to double up all our connections, and we'll need to add oscillators of the same frequency to an array. This means we can iterate over them in order to stop all of the oscillators that are playing the same note.

      To finish things off, let's use a trick we learned in the previous tutorial. We can add a bit of chorus to add more shimmer to our sound, by detuning the oscillators slightly.

      Beautiful, a synth Kraftwerk would be proud of! Play along with the finished article, or fork the repo on GitHub to tweak the synth to your heart's content.



      Leave a comment › Posted in: Daily

    1. Toolbox of the Smart WordPress Developer: Series Finale

      You thought you'd never see the end of this series, didn't you? After all, there are thousands of great WordPress tools to talk about in the WordPress community! But as the wise Oracle in the Matrix once said, everything has a beginning has an end, Neo.

      In this last part of the "Toolbox of the Smart WordPress Developer" series, we're going to go through what we covered in the previous parts and conclude the series with both joy and sorrow.

      The Tools We Went Through

      Over the course of the series, we've covered 13 great tools that you can use with your next WordPress project. Since this is just a "series finale", I'm not going to go into much detail; instead I'll just do a recap of all. Feel free to navigate through the parts that cover the tools you're interested in.

      In the first part, we (naturally) did an introduction for the series.

      In the second part, we started off reviewing our "WordPress developer toolbox" with Kirki, a great tool to extend the abilities of the Customizer.

      In the third part, we continued our journey to the toolbox with GenerateWP, a website to generate WordPress-related code. Even though it might seem as if the website is for WordPress beginners, I believe that even WordPress gurus can make use of it. Plus, it's a great way to share our WordPress-related snippets as well.

      In the fourth part, we went over the Theme Check plugin. No matter what your intention is while creating your theme (whether it be for Envato Marketplaces, the WordPress theme directory or even yourself), Theme Check is a great tool to check your theme against bad coding practices and worse mistakes. You can even use it for checking your existing themes against, say, malicious code.

      In the fifth part, we took a gander at WP Quick Install, a nice little tool to build a customized WordPress installation. It can even be automatized to build WordPress installations with plugins and themes inside, so be sure to learn about this tool—you never know when you might need it.

      In the sixth part, we reviewed the WordPress Plugin Boilerplate by Tom McFarlin. It's one of the best tools to help create WordPress plugins with an OOP mindset, so don't forget to bookmark it in your "WordPress Developer Toolbox" folder if you're making (or want to make) plugins.

      In the seventh part, we took a glance at the Envato WordPress Toolkit. If you're buying your themes from ThemeForest, this one's is especially handy for you, since it only requires your ThemeForest API keys in return for giving you the opportunity to install the themes you purchased straight from your admin panel.

      In the eighth part, we went over two tools at once: WXR File Splitter and WP Serialized Search & Replace. The first tool helps you split the XML backup file that WordPress generates, while the second one lets you do "search & replace" operations inside the WordPress database, while keeping serialized entries error‑free.

      In the ninth part, we reviewed WordPress GitHub Plugin Updater, a tool whose name explains itself: It helps you push update notifications to your plugin's users, even though you're hosting your plugin on GitHub instead of the WordPress Plugin Repository.

      In the tenth part, we went through Instant WordPress, a Windows program that generates WordPress installations that can run from a completely portable web server inside Windows. Crazy, right?

      In the eleventh part, we had a look at Vafpress. Vafpress is an absolutely awesome options framework, allowing you to create options panels for your themes and plugins. It has an impressive set of features and not-so-good documentation. Be sure to check out this part.

      In the twelfth part, we ran through CMB2, a cryptically-named WordPress tool that helps us create custom meta boxes.

      In the thirteenth part, we checked out WP-CLI, probably the most unusual tool in our developer toolbox. It's a command-line interface which saves you a ton of time, if you're into that sort of thing (server controls with command-line interfaces).

      In the fourteenth part, we glanced at some other tutorials that have been published on Tuts+ Code over the past few years about useful tools that could have been covered in this series, if they hadn't already been covered on Tuts+ Code.

      And in the last part, this part, we're finishing up the series. Almost done.

      The End

      There are many, many more WordPress tools out there which I can't possibly talk about. Even so, I believe that I've managed to present to you a satisfying set of tools over the course of this series. If you learned something new from reading this series, I'm happy to have helped you learned it.

      Did you like this series? Did you learn about any new tools that you're anxious to talk about? Tell us what you think in the Comments section below. And if you liked it, don't forget to share some (or all) of the parts with your friends!


      PS: If you think there's another tool that needs to be shared with the readers of the Tuts+ community, feel free to let me know about it. It would be cool to have an "addendum" part, don't you think?



      Leave a comment › Posted in: Daily

    1. Easy Digital Downloads: Tools

      This series was aimed at highlighting the features of Easy Digital Downloads to help you set up an online digital downloads store. I have reviewed a major portion of this plugin, and by now you must be aware of almost everything you need to know about EDD. What we have left is the section of Tools with which this series will come to an end. So, let's dive right into it.

      The section for Tools provides some additional options which can be helpful in improving the functionality of your store. Broadly speaking, this section allows you to restrict a few things, generate secret keys for members (API stuff), export/import the settings of EDD for the future, etc. 

      Tools in Easy Digital Downloads

      The Tools section contains some additional settings for the digital store. With this part of the plugin, you can save that information for future use by exporting and then importing (in future) a .json file. This section contains different tabs which are labelled as: General, API Keys, System Info and Import/Export. I will discuss them one by one in detail.

      Easy Digital Downloads Tools

      To access this section follow this path: Downloads > Tools. Let's start with its first tab, which is General.


      Easy Digital Downloads Tools

      Inside the Tools section, you will directly enter the General tab. Here, EDD has made it easy for you to restrict and block any customers who are disturbing you and affecting your store's rapport. This is simply done by adding the customers' Email IDs in the text box provided for banned emails. Once this field is filled, click on the Save button to confirm your settings.

      Easy Digital Downloads Tools

      This is the layout of the General tab, which contains a large text box which is named as Banned Emails. It can come in handy sometimes when you want to ban somebody.

      In the figure shown above, you can see that I have placed different emails. Entering these emails will mean that these specific customers will not be able to purchase any downloadable product from the digital store.

      You must enter one email per line.

      API Keys

      Easy Digital Downloads Tools

      Let's move on to the second tab of Tools which is for the API Keys. EDD includes a complete RESTful API, through which you can retrieve the store's data remotely. It can access different kinds of information like: store products, store customers, store sales and store earnings in a JSON or XML format. API is a way through which you can connect to any EDD related Mobile App.

      Easy Digital Downloads Tools

      This is the layout of the API Keys tab, which includes a list of users/members who can use the keys generated for them. In this tab, you can Generate New API Keys for the members/users of your digital store. These keys are of three types:

      1. Public Key
      2. Secret Key
      3. Token

      The keys mentioned above act as nonces to confirm access for specific kinds of data. For example, if a user wants to access information about sales then he or she needs to submit these keys for verification, after which the required info will be sent in a JSON or XML formatJSON is a very useful format which uses the JavaScript coding in order to display the required details of the sales. But if you are a beginner, there is nothing for you to do here. Leave it alone, until you want to build an App based upon EDD's API.

      Easy Digital Downloads Tools

      In the figure displayed above, you can see the API Keys generated for various users. You can Generate New API Keys by entering the name of a member in the box provided and then clicking on the Generate New API Keys button to do the magic. New API Keys will be generated for the users of your digital store.

      Normally, you should only generate these keys for profiles you trust and want to share your data with. 

      System Info

      Easy Digital Downloads Tools

      This is the third tab of the Tools section. As the name suggests, it contains information about the system, which can be downloaded for future reference when a developer needs it.

      Easy Digital Downloads Tools

      This area displays the following info:

      • Site Info
      • User Browser
      • WordPress Configuration
      • EDD Configuration
      • Webserver Configuration
      • PHP Configuration
      • Session Configuration

      If you want to download this information, simply click the Download System Info File button. Under normal circumstances you'll be downloading it only when you run into an issue and the support of EDD asks you for your System info file, to provide you with better help.


      Easy Digital Downloads Tools

      The very last tab allows you to Import/Export different files at any time you want. You can export the copy of EDD settings in a JSON format into your system. You can also import EDD settings from another site to apply on this site without configuring it one by one. This means that once you have configured an EDD-based digital store, after reading my series, then all you need to do is export these settings while creating a new store (and obviously import them into the new store).

      Easy Digital Downloads Tools

      This is the layout of the Import/Export tab, which includes two meta boxes. Let's discuss them one by one.

      1. Export

      Easy Digital Downloads Tools

      The first meta box is for the Export Settings, which is used to export the EDD settings of your digital store locally to your system in a JSON format. You can import these configurations to another site. Click on the Export button to achieve the results.

      2. Import

      Easy Digital Downloads Tools

      With this meta box you can import the JSON file of EDD settings if you want to configure the same settings as before. Just Choose File from your system and upload it. You can also Import the file to configure the same settings as a whole without configuring it one by one. 


      This ends the section of Tools and the series at the same time. If you encounter any problem, you can always ask without hesitation. Now, you can set up an online store to sell digital downloadable products and control every single bit of it. 



      Leave a comment › Posted in: Daily

  • Page 3 of 94 pages  < 1 2 3 4 5 >  Last ›
  • Browse the Blog