In this mega tutorial, we are going to walk you through the process of creating an iOS application Using WordPress, Elementor, and WebView Gold.

This method allows you to use the most popular visual builder paired with the most popular content management system to create an iOS application for your business. Not only does it build credibility and usership, but it offers your clients and customers an easy way to access your online resources directly from their iPhone or iPad.

By using Elementor, you can visually build your application from the ground up. Elementor comes with a ton of professional widgets, and a visual editor that you can use to instantly see changes made to your web page. The editor interface has an amazing responsive design tool, which allows you to easily apply styling to mobile and tablet devices.

If you don't know Xcode (the code that makes up iOS apps) building a mobile app from your Elementor website could be a good idea.

Why Make An Elementor Site Into A Mobile Application?

Using Elementor to create an iOS application from the ground up allows those who aren't familiar with Xcode, CSS, HTML, or PHP to visually create an application for their customers and clients. A good application of this tutorial would be if you are a small business looking to offer preexisting customers an iOS application.

Whatever the case is, using WordPress allows you to leverage the thousands of available plugins, adding whatever functionality you may want to your application. And, because it's based off of a website, the application will automatically update as you publish content from your WordPress desktop backend.

Using Elementor means you can build visually, ensure responsiveness, and leverage the hundreds of high quality 3^rd party add-on packs. We can also use the built-in dynamic content features to add membership, login and personalization to our App.

Use Cases

The possibilities for creating a high quality iOS application using WordPress and Elementor are virtually endless. Basically, if you can build it to look good on a mobile browser, it will work as a mobile application. Here are some potential applications that you could build using WordPress, Elementor, and WebView Gold (tools discussed in depth below).

Membership App - By using a membership plugin, you can lock down your application and offer membership only content on iOS natively. For example, if you had training videos that you offered through your website, creating an iOS application would give your members yet another way to access them.

Live webinars – using WebinarPress Pro, you could offer live training through your iOS application. WebinarPress Would allow you to choose a number of streaming platforms, and also offer live chat directly in the application interface.

Appointment Booking - Say you're a nail salon that wants to offer customers an easy way to schedule appointments through an application. Using LatePoint, our favorite appointment booking plugin, and Elementor, You could give customers a way to schedule appointments and pay for them directly through the iOS app.

Whatever the case, an app is a good idea. Research shows that mobile users only spend 10% of their time on sites:

That means building an app and getting users on it encourages more engagement, visits and conversions. Now, it's easy to do this with WP, Elementor and WebView Gold.

When To Get An App Custom Developed

It's also important to understand the scope of the application. Sometimes, it's a better idea to simply pay a development team to professionally build an application for you because it will save you time and money in the long run.

If your app requires complex functionality, unique features, or custom integration, getting it professionally built by a team of developers is your best bet.

On the other hand, if you're looking to convert your WordPress website into an iOS application, doing it with Elementor and WebView Gold could be a great idea.

Our Tools

Here's the exact list of products, tools, and plugins that we will be using to make this possible.

WebView Gold

This is the app template that easily allows you to convert a WordPress website into a native iOS application. Essentially, it is a collection of X code files. All you need to do is change a couple of lines of code (we will walk you through that in this tutorial), and you have a fully functional application based off of your website. This costs $69 as a one time payment. Buying it through any one of the links on this article will support us (at no additional cost to you)!

Elementor Pro

We will be using Elementor pro to build the pages of our iOS application. Elementor pro allows you to visually build WordPress pages and websites. If you're reading this article, chances are you already have a license to this plugin.

Redirections Plugin

The redirections plugin is especially necessary if you are looking to make an existing WordPress website into an iOS application with Elementor. You can easily lock users out of parts of your website that should only be accessible via desktop or a mobile browser.

We will go into detail about how to do this using a custom user agent.

High Powered Hosting

With the standard Elementor WordPress installation, shared hosting doesn't cut it. If you're looking to make your site into an iOS application, you definitely need high powered hosting.

Enterprise level cloud hosting is your best bet. It offers you the power, scale, and dependency that your website and application require. By going the cloud hosting route, you have 100% uptime, and can easily scale your server resources to meet your requirements.

For this project, our recommended host is the Cloudways Digital Ocean $20/mo plan (So you can go as cheap as $10 per month). this host offers the power that our application and website needs, and ensures that everything loads quickly.

You can use the code “ISOTROPIC” to get 30% off your first month of hosting. And remember, whatever you do, shared hosting (like Bluehost or GoDaddy) and Elementor do not play nice (here’s proof).

Apple Developer Account

To publish your application on the iOS store, you will need an Apple developers account. This costs $99 per year, but allows you to publish unlimited apps (you can even charge for them).

All in all, our custom iOS application should cost just under $200. That's a pretty good price when you compare it to the cost of a custom application (roughly $5,000k), or a WordPress specific service which averages at about $150/mo.

Current WordPress Site or New Installation?

Before even beginning to think about designing the application, you need to figure out if you want to make your current WordPress website into an iOS application, or create a new WordPress website, build it out with Elementor pro, and publish it as an application. Each option comes with its own pros and cons, which we’ll discuss here.

New Installation

Creating a new installation of WordPress and building your app from scratch allows you to easily separate the application from your website. Typically, this is done by creating a sub domain and installing WordPress on that sub domain. Then, you would use the Elementor builder to create the app from scratch:

app.mysite.com

If you're looking for a standalone application, Or one that is indirectly connected to your business website, this is the route you should go. You can even set it up so logins are shared between the application and your WordPress website.

For example, if you run a membership website and want to create an application where your visitors can easily access membership only content (such as videos), you could run a setup like this.

Users register on your desktop website, and pay for their membership. The application, which is built and installed on a sub domain is able to access and share the logins of users on the existing website using a plugin called “Shared Logins Pro”.

By doing it this way, users can't access your general website on the application. This is good because it gives them a streamlined, focused appearance. in most cases, this is a more professional route to go simply because it doesn't look like you took a WordPress website and made it into an app. Instead, it looks like you had a app custom designed specifically to fulfill its unique role.

Current WordPress Site

Creating an application that is directly connected to your current WordPress website could be a good idea if you have a highly mobile responsive website that would look good as an application.

By publishing your website as an application, you could get more users, and end up making more sales (or whatever your end goal is). user information would automatically be shared between the application and desktop version of the website, because it's the same thing.

If you have an existing WooCommerce store built with Elementor, this could be a good way to convert it into a native iOS application.

This is the method that we're going to use for this tutorial because we feel it will be the more popular of the two. You don't need to set up another WordPress installation website, you can use your existing one, meaning that you won't need to pay for another license of Elementor.

For this tutorial, we will be setting up our application like so:

• website.com/app (this is the subdirectory that will contain all of the pages that make up our application)
• website.com/app/dashboard (This is the initial screen that the application will load. On it will be several buttons that direct users to where they need to go )
• website.com/app/page1 (additional pages and screens within the application will be contained within the “app” sub directory)

By structuring our application like this, we can isolate it from the main website. If we choose to include some, but not all, pages from the main website on our application, structuring it with the sub directory makes it easy for us to set up conditional redirects, locking down sections of the website that should only be accessible on browsers (We talk about this more in a later section of this tutorial).

What This Tutorial Will Build

This tutorial will walk you through how to build an extremely simple iOS application. We will be using the sub directory method, and including it on a pre existing website. This will allow us to show you how to use the conditional redirects to lock down specific sections of the overall website.

For the app that we're going to be building in this tutorial, we went to Upwork and browse through the available jobs. We found a listing of a company looking for an iOS application to fulfill this task:

Prospecting App -- We need an application that real estate agents can use to easily enter Anne store information in. After speaking with a potential lead, the agent needs to open the application and enter the name, budget, comments, and additional information into the lead capture app.

They were offering a budget of 1500 dollars.

This is a relatively simple task, and can be done entirely with Elementor pro and no additional plugins. If only they knew that they could easily do this with Elementor, WebView Gold, and a little bit of time.

This is the iOS application that we are going to build with Elementor.

Of course, each application developer will have their own unique requirements. For example, if your company offers services, you can set up an easy payment portal through your application.

If you're a plumber, you can offer appointment booking through an iOS application, that's connected to a system on your website.

The possibilities of creating an iOS application out of an Elementor website are endless. It's up to you to choose what you want to build. this tutorial will just walk you through the basic steps in theory of creating an iOS application from a Elementor website.

Step 1: Set up your application pages/screens

For our app, the only two pages are going to be the dashboard and the form, where agents enter lead information into.

Therefore, our structure will look like this:

• website.com/app - this is the overarching sub directory that the app will be housed in. This page won't contain any content.
• website.com/app/dashboard - This page will be the initial page that loads when the agent opens the application. For now, it will only have one button, but in the future it can be expanded.
• website.com/app/lead-submit - This page will contain the multi step form built with Elementor Pro where agents can easily enter information about the lead that they spoke with.

To set up the pages, we create a page called App. Then, we create the dashboard and lead submit pages. These pages are set up to be child pages of the overall “app” page.

Step 2: Build the application pages

Once you've set up your application pages, it's time to actually build them. Depending on your workflow and requirements, it may be a good idea to hire a professional UI/UX designer to create your application screens period from their designs, you can use the Elementor Pro builder to create the pages.

It is incredibly important to create the pages to be easy to use on a mobile device (Google has good mobile guidelines). Not only is this good for your users, but Apple needs to manually approve the submission of your app. If it isn't usable, they will reject the submission.

For us, we have two pages in our application. The first page is the dashboard. With the dashboard, you can incorporate a Login using a WordPress plugin (Restrict Content), which conditionally redirects to the dashboard. by having users log into the application, you can use the robust dynamic content capabilities that come with Elementor. For example, you could greet a user by his name “Hello James!”.

We won't be incorporating this into our application, but here's how to do that (ensure that the page can only be accessed if the user is logged in):

If you choose to build the application on your existing WordPress installation, you can use the Elementor to build custom headers and footers that only apply to pages within the /app/ sub directory. You can also choose to use the Elementor canvas, removing the headers and footers altogether (as well as all traces of the underlying theme). In this example, we will be using the Elementor canvas.

Here's an app dashboard that we threw together on Elementor in a matter of minutes.

Whatever the case is, we would recommend not using the standard header and footer that come with the WordPress website, as that will give your user unlimited access to your complete site (though you can offer them access to some pages using redirects which we will discuss below).

We don't need to care about the desktop version of the page, and we recommend building the mobile version of the page first, then expanding the responsive editor to fit the tablet.

Make sure that the app is easy to navigate, and the buttons are large enough to be clicked on with a finger. Remember that there's no back buttons or a browser bar in this app. You need to build in menus and links to ensure that a use never gets stuck in a page.

Apple will reject your application If it is not usable. Luckily, WebView Gold will refund your purchase if you're not able to get the app published (14 day money back guarantee).

Step 3: Create The iOS App

Now that we've built the pages for our application using Elementor, it's time to create the actual application which will be submitted to Apple.

If you haven't already, go ahead and purchase WebView Gold for iOS.

Download the files onto an Apple computer. You can't edit Xcode on a windows machine. If you don't have an Apple computer, you can rent a remote desktop online with a service like MacInCloud (this costs about 1 US dollar per hour).

Note: the rest of this step will briefly cover creating the actual iOS application. You can choose to follow this tutorial, or you can use the official documentation. The official documentation is much more detailed and covers all aspects of creating the application: https://www.webviewgold.com/docs/iOS/

Once you've downloaded WebView Gold on a Mac, extract and open WebViewGold.xcworkspace.

From the XCode interface, open WebViewController.swift. Enter the URL of your site (mysite.com), the URL of your initial application screen (mysite.com/app/dashboard) and the Codecanyon licensing code. At this point, you can compile the application and submit it to Apple. It's really that easy.

We would definitely recommend changing the application name, splash screen, and icon.

Here is the section of the documentation that details how to do that: https://www.webviewgold.com/docs/iOS/#name

You can look at the documentation and enable some more advanced features such as push notifications, or in app purchases. There's a lot that you can do with this tool, and it's fairly easy to understand. Everything is laid out in plain English, and you don't need to know Xcode for any thing.

There are some incredibly useful features that WebView Gold comes with. You can send native push notifications, play music, create in app purchases, add native ads, and more.

Once the general application is set up, we recommend testing it out in the Xcode Simulator.

First, build the application, then run the application on a device of your choosing. Here's a tutorial on testing apps with Xcode.

At this point, we haven't created any redirects, and if you're building the application as part of an existing WordPress website, you'll probably want to incorporate some (though in many cases, the application may be ready for submission to the App Store. If so skip to step 6).

Step 4: Make the application pages only accessible from an iOS device

The page at website.com/app Is only created to organize our application. We don't want it to be accessible on Google or by the public. To address this, we will simply redirect the website.com/app page to our homepage at website.com.

We also only want the application pages to be accessible from our iOS application. To do this, we will be using a custom user agent paired with our redirect plugin.

The redirects plugin looks for the user agent. If the user agent identifies that the visitor is accessing the app page from the iOS application, no redirect will apply. If the user agent identifies that the visitor is attempting to access the application page from any other device, they will be redirected to the website home page (or perhaps an app download/sales page).

To do this, we will be setting up a custom user agent identifier that only the web view browser will transmit.

This is done by editing our WebViewController.swift file within the Xcode project.

On that file, set the user agent by populating this string:

useragent_iphone = “myElementorapp”

We then create a redirect that applies IF the url contains "app" AND the user agent does not match "myElementorapp", meaning it's not coming from the app.

Regex for User Agent: ^((?!myElementorapp).)+$

This will apply the redirect if the user is trying to access the page on anything that's not the app. If it is the app that's trying to access the pages, no redirect will apply.

Step 5: Lock down sections of the main website (when user is in app)

Our app is basically a web browser within iOS that display our mobile Elementor page as a native iOS application. That means that if you're using your main website to build this app, and there's any link to a page outside of the "app" pages, they will load. Sometimes this is what you want.

Typically, you'll want users to be able to view parts of your site on the app, but not everything. For this we will make another URL redirect.

This redirect will trigger if the visitor (in the app) tries to access any page that doesn't contain one of the following strings:

Regex: ^((?!app|blog).)+$Code language: HTTP (http)

As an example, they can access all URLs with “Blog”, referring to blog posts and "app" referring to app pages. Anything else, any they’re redirected back to the app dashboard.

This regex string will redirect the user if the URL does not contain one of the terms contained within it. This string only applies to those using the application due to the custom user agent.

By incorporating this, you can selectively redirect users if they try to access pages outside of the scope of the application. This step is usually only needed if you app is attached to your main website. If you build it on a separate, dedicated WordPress installation, you can purpose build the pages.

Step 6: Test, Compile & Submit To The App Store

If you are considering creating an application using Elementor and WordPress, we recommend enrolling in the Apple developers program sooner rather than later. It can take up to 48 hours to process your payment if everything goes well. In our case, it took several days because they were unable to verify our identity automatically.

You can apply as a individual or a business.

Once you've applied, it's time to test the app one last time, compile it, and submit it to the App Store.

Test the app by creating a build (command+b) and then running it (command+r). This will initialize the simulator which will allow you to view the application on a simulated iPhone or iPad directly from your Mac. Test everything out, and ensure that it will meet the submission guidelines of the App Store.

Then, create an archive of the application and upload it to App Store Connect. This is fairly simple to do, simply navigate to Product > Scheme > Edit Scheme…, then select the Archive action for your app in the Build pane.

This will create the archive, which you will then need to upload to App Store connect. Just follow the instructions given in the archive wizard, and it will automatically be uploaded to your Apple developer App Store connect account.

This guide is helpful: https://developer.apple.com/ios/submit/

Within the developer dashboard (which can be accessed on any browser), click on My Apps.

Create a new application and fill out all of the necessary information. Be sure to upload high quality screenshots -- one of our applications was initially rejected because of this.

Follow this Tutorial for step by step instructions on how to upload and create an application from your Apple developer dashboard.

After your application is submitted, it takes anywhere from a couple of hours to a few days for Apple to review an accepted. Once Apple accepts it, it will be pushed to the App Store (which is a process that could take up to 24 hours).

What is their common you can download it and your users can begin Making use of your new iOS application created with WebView Gold, Elementor, and WordPress.

Conclusion

This tutorial should have showed you how to convert your WordPress website into a mobile iOS application. By incorporating the Elementor visual builder, you can create all pages and screens on your desktop, and then easily make it into application form.

If you have any questions, feel free to leave a comment below. We recently completed and published several apps using this method. Also, if you're looking for a custom app created using this method, contact us.