skip to Main Content
How To Build The User Interface For Your Business Web Application

How to Build the User Interface for your Business Web Application

First things first, we need to talk about your system pages and user interface. Generally, WordPress is used for websites, blogs, and even portals. That’s why you will find a lot of free and premium themes out there to support your idea.

However, when it comes to the business application this won’t be the case. You must use a totally different user experience and interface to allow the users to accomplish the tasks they have in hand. Thus, you need to build your own WordPress theme which is specific to this type of use.

Step 1: Create your own blank theme

To start building things, you need to start with empty or blank WP theme, and you will find a lot of resources over the internet teaching you how to start one from scratch. For us, we like the easy way which is to download one of the free blank themes available on the internet and start from there. You can visit these links to find the best suitable one for you:

Step 2: Choose the front-end framework you want to use

When looking to build your application, what you should keep in mind is, the business you want to serve and what the users could accept. We are not UX experts, so we do ask for help FROM all over the internet. There are many free front-end frameworks, such as Bootstrap and ZURB Foundation. But these free libraries won’t give a wide range of user controls to use. They only give you the basics layout and components.

Therefore, I do recommend you look for a premium HTML library built over Bootstrap or ZURB Foundation. The one we are using is INSPINIA IN+. These guys are great, they have one of the most profound libraries we’ve ever seen. With this library with a little bit of work, you could integrate your WordPress theme.

Step 3: Determine how you want to use your theme components

As mentioned before, you have to build your own WP theme. To start, you need to figure out what you want to put in the header, footer, default page template, etc…

On our case, we used header.php to hold the top actions center, global search, and the main system menu. The footer.php has been used to close the HTML tags and add the application copyright. In addition, we added another header-report.php and footer-report.php to work as reports headers and footers.

We used the default page template to display the dashboard, and the blogs index.php and single.php templates had been used to show the help and user manuals for the user.

Step 4: Figure out what front-end library you want to use

You can use whatever library you want to use for your front-end data manipulation such as (Angular, ReactJS, Vue.js, Ember.js, Meteor.js, etc…). We used AngualrJS is to handle the front-end data manipulation. Of course, we had to build our own AngularJs app, controllers and JS files. These controls should communicate with the back-end APIs which you need to build. We had made one oasis controller that we called “Page Controller” which contains all the basic functions for all the pages (Save, Delete, List, etc…), each one of these functionalities calls a specific API in the backend.

This is all that you need to convert your blank WordPress theme into a basic interface for your system. In this link, you will find a sample theme which demonstrates what we were talking about here and you can download it from GitHub.

On the next article, we will talk about the API you have to build and how you could use it to control your data.

Post Series: Build your Application Framework on top of WordPress
  • 1.How to Build the User Interface for your Business Web Application

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top