When it comes to creating a website, if you are a developer, you can use the DIY approach and code and host everything yourself. If you are an end-user/consumer just like most of us, you can use a web builder software to create beautiful websites with mere clicks. Wix belongs to the latter, as it is a web builder that allows you to create free beautiful websites with just a few mouse clicks. But with the introduction of Wix Code, it has blurred the lines between doing it yourself and using a web builder. You can now do both. If you are building a web app or dynamic website, you will have to use complicated tech jargon like databases, forms, and javascripts to build an interactive website. Most web builders don’t provide such tools, as it adds tons of complication to their app. Wix Code adds such things to its existing web-building tools without the complication. It offers several templates for you to build and manage your databases, forms and also allows you to add javascript code to your site. Best of all, you can make use of the dynamic pages feature to quickly populate content from the database, making it more like a Content Management System rather than a website builder. In the example below we will create a simple Make Tech Easier blog and add dynamic features to it from Wix Code.
Setting up a new site with Wix
Assuming that you are new to Wix, you can get started by signing up for an account with Wix. Once you have created an account, you will be prompted to create your website. Next it will ask you to select the type of website you want to create. Since I am replicating a Make Tech Easier blog, I selected the “Blog” option.
The next screen will ask how you want to create your website.
Wix ADI makes use of artificial intelligence to create a site automatically for you. If you prefer to go manual, select the Wix Editor method. (To access Wix Code you have to use the latter. If you have chosen Wix ADI, you can still switch to the Editor mode later on.) For this example I used the Wix Editor as I wanted to have full control over the site’s look and feel. From there you can start with a template. (There are thousands of them.)
To keep it simple, I started with a blank template with a classic layout. The following image is what it looks like.
Accessing Wix Code
To access Wix Code go to “Tools” and check the “Developer Tools” option. You will now see a new “Site Structure” column. This is where you can access all Wix Code features.
Creating databases to store posts
One of the great features of Wix Code is the Database function that allows you to create databases (aka Collection) and store data in it. For a blog we will need to create a database to store all our posts. In the Database section click “Add new collection.” Give your collection a name and specify its purpose. There are several database types that you can choose from, ranging from user generated content, member submission, private data, etc.
Once the collection is created, you can start adding fields and data into it.
What we have created is a Posts database containing the title, content, published date and various aspects of a blog post. Next, we need to populate the database content to the main site.
Dynamic Pages
Dynamic pages are more like a template page where you can create one design and connect it to the database, and it will auto-populate all the items in your database to the front page under their own URLs. For example, we have six posts in the database. With one single dynamic page, we can get it to display all the posts in the main site. This saves you the effort to manually create a single page for each post. There are two main kinds of dynamic pages in Wix Code – one is for displaying a single item, while the other is for Category (a collection of similar items in a list). The following shows how to create dynamic pages and link them to the site.
On the floating toolbar click on the first icon and select “Dynamic Pages.” Click the “Add to site” button.
Select “Item Page” from the popup.
In the URL select the field (in the database) that you want it to use for the URL. In this case I set the “title” to be the URL.
Next, design the page and add in fields from the database. With every element you drag to the page, you can click the “Connect to Data” button to link it with the field from the database. For example, I dragged a “Header 1” element to the page and linked it to the “Title” field in the Posts database.
And I did the same for the featured image, post content, etc.
Once you are done with the design, you can preview it and see how it looks on the front end.
The next step is to link the dynamic page from the Home page. Load the Home page and add a Repeater widget from the “Lists and Grids” section. Connect the widget to the Posts database and link each element in the widget with the fields in the database. Under the “Link connects to” section, scroll down and select “Posts” in the Dynamic Pages section.
That’s it.
What you can see is that we have only created one dynamic page, and it will automatically generate all the pages for each item in the database. You can do the same thing to add a Category dynamic page too.
Adding javascript to pages
If you are a savvy javascript coder, you can add javascript to each additional feature on each page. For example, if you have added a user form to your page, you can make use of javascript to validate the form field before submission. Note: to add javascript code to a page, go to any page (or the page where you want the code to appear), and click the “Page Code” button at the bottom of the code. A window will appear, and you can add your code there.
- We have created a simple form that will collect the First Name, Last Name and Email address from the user. For this form we want to validate the email address and make sure the “Confirm email” field is the same as the “Email” field.
- Add the following code to the “Page Code” section: This will validate the email address and show the error message if the email is invalid.
There is plenty you can do with Javascript. Check out the examples here for more information.
External APIs
Conclusion
If you are not technically savvy or a developer, building your own website can be a tedious task. Wix has done a good job of making website creation a breeze. With Wix Code it goes a notch further and gives you plenty of control over your site. You now have access to complicated web developer tools and complete control of how your site should work, all done with a simple click, drag and drop with no coding experience required. Kudos to Wix for creating such an easy-to-use tool that will solve many problems. Try out Wix Code and let us know what you think of it. Wix Code
