How to create mobile app for wordpress with custom data

Mobile traffic becomes even more great than desktop nowdays. So, many people are interesting how to create android and ios mobile app for their websites. Here some technics for this.

First of all, I think, that mobile app must have another look and offer other user experience. If you want to have the same logic as on main desktop site, it’s better to keep it as is without mobile app or use AMP.

The best way to create mobile app is to create or order from mobile app developers. Problem is that, mobile app development is very expensive. I don’t think that creating app less than $3000 has a sense. What is alternative? It’s using special plugins. I investigated several most popular plugins for wordpress which allows to create mobile app and here is my review of them.

Apppresser

I think, it’s most powerful plugin for creating apps. It has very interesting features and allows to create really powerful applications. And this is because it has some powerful features.

Custom pages

First of all, you can create custom homepages and customize it in different ways. For example, home page can be set as link tabs

Or as landing page, post list page or even as map

Custom pages can have own html code and even Ionic components. It means that you can add sliders, cards, accorditions, mediaplayes and other dynamic parts on your custom pages.

Post listings

Second thing which is important in Apppresser is that they allow to customize post loops and use REST API endpoints of wordpress. This means that you can create special list, for example, from events or from directory listing, product listing, list of posts from certain category, author or tag. This can be helpful if you want to build most popular posts page or specific archive.

Customization and template hooks

This thing is most powerful for me and usually other plugin developers ignore it. Of course, many themes and plugins add many information in posts, like prices, maps, dates, specifications. Most of app plugins ignore this data and use only standard content of wordpress. But Apppresser allows to add such data not only in inner posts, but also in custom listings. They have many template hooks and tutorials how to use them, also options to use custom css and even child themes.

Special login features

Another good thing is member options. For example, login modals and pages

There are many other available functions, like custom push notofication, Buddypress module with activity and option to use camera for uploading images, Woocommerce module and offline pages. You can build really professional mobile app with Apppresser, but there is only one bad news – PRICE. For basic plan, you need to pay $19 each month, which is too overpriced for small sites. Also, this plan is basic and doesn’t have many interesting modules, like woocommerce, Admob

Agency plan is more interesting and it has price $49 for month, but you can make 25 apps. So, each app will have price near $2 in month, but, I think this plan is good for developers and small freelance companies which offer creating mobile aps, but not for owners of sites. I hope, they will make special plan for site owners soon, because it’s great plugin

WordApp Mobile App

This is second plugin which I like. It’s also has good design and some customization options.

Just like previous plugin, WApp can have custom logo, menu, colors, background, icons. it allows to add also bottom menu with icons.

Plugin also has option to use custom pages as start page and also you can choose separate theme for app. But instead of Apppresser, plugin uses default wordpress pages as is. To be truth, I don’t think that such pages will work correctly, especially if they have custom scripts, forms which works on desktop version.

Problem is that right column preview works only for demo purpose, real preview is available only if you click on red button, but it’s not available in free version.

Pro version has not big price and starts from $2.99 in month. But it’s a problem that I need to pay first before I can check if my app will work as I want. Using desktop theme inside mobile app can cause some problems, but on fact that you can use separate theme for app, you can use default themes which must work. Also plugin has near 20 different bundled themes and it’s one of advantages of plugin.

Another positive thing, that you can use Admob to monetize your app.

Pro plans also has option to send push notifications.

Prices of PRO version is much cheaper than previous plugin and most expensive plan has near $6 in month. This will include all pro functions + disabling copyrights of author on your app and author’s ads.

To my opinion, this is good alternative for Apppresser if you don’t have enough money.

Worona

This plugin is new and looks like promising. Currently, they don’t have something interesting, the only thing is that it’s totally free and real fast setup. Customization is very basic, you can change only menus and colors of header. But I am following them, because they develop plugin.

How to customize content of inner posts in mobile apps

Almost all mobile app builders use REST API of wordpress. From 4.7 version of wordpress, REST API is inside core of wordpress and I think, that wordpress development will be concentrated on REST API. This is really powerful thing, which can help combine all apps, desktop extensions and even real offline things in one combination with wordpress site. REST API is like way of data storing which can be used everywhere, in any gadget or application.

So, as I wrote, most of app builder plugins use REST API requests to wordpress to get data of posts. Problem is that wordpress has very basic information in REST API for posts and doesn’t include custom fields values which are used by all of themes and plugins. For example, your post has some prices, or post views values, or maybe you store date of your event, location, etc. All of this will not be available in post content in REST API. So, you need to extend content or create separate fields for API.

To test your customizations, I recommend to use google chrome and their extension Postman which is best for testing different API.

For creating separate fields, you can use next code.

this code will add additional field rehub_main_product_price in each request for posts. rehub_main_product_price is custom field of my theme where I store best price deal.

I don’t want to pay much attention on this code, because, usually, you don’t need this way for using with app builders, because they don’t recognize such fields and just ignore them. You can read more about this way in docs.

Second way is most common used for app builder. Instead of registering new field for REST API, you can modify response of post content and attach additional data directly to post content. So, for example, you want to show best deal price which you stored in field with name  “rehub_main_product_price” and also you want to show best deal merchant and icon. Something like this.

In my theme, such block is stored in next keys of custom fields.

Price – rehub_offer_product_price

Price old – rehub_offer_product_price_old

Domain of best deal merchant – rehub_offer_domain

So, my code to add this block to content will have next look

Some explanation. First of all, we use filter rest_prepare_post which change post content in REST API response. When we do this, we can use $post->ID to get anything from post, like custom fields. We can get default content with

In the last line we assign new block to this content. If you need to assign block before content, change to

If you want to assign something for excerpt instead of content, you can change last two lines on

You can use the same way for changing also titles. For example, maybe you want to add price directly in title. So, in last lines, before return $data, add also next code

To check response and to be sure that all is working, use postman and make GET request to one of post route. Url for this will be

http://yoursite.com/wp-json/wp/v2/posts/240

where 240 is your ID of post.

As you see, all is working.

Next thing is styling. What I need to do is copy all styles for element of block to style of app. Many app builder has option to add custom styles for this. So, I press F12 in chrome to open developer tool where I can check styles of my elements

Click on icon and click on element which you want to check.

So, for my block, styles will be next

Not all plugins have option to use styles, if you have such option – insert there css styles. if not – you can try to assign styles directly to content, hope this will work in your app. So, code with styles will be

Let’s check it in Worona dashboard.

Yes, it’s working.

P.s. there are many other good wordpress app builder, for example, Mobiloud. But most of them are not supported now or have too expensive price. For example, Mobiloud has price $69 each month, so, I guess they are better for big companies, not for single sites, but you can check other plugins also, all of them have the same logic of working.

For Wpsoul theme users. Check Rehub list of meta fields which you can use for customizations
How to create mobile app for wordpress with custom data
5 (100%) 1 vote

Want to get unique wordpress tips?

We won't rent or sell or spam your email. We promise!

Leave a Reply

2 Comments on "How to create mobile app for wordpress with custom data"

Notify of
avatar
Sort by:   newest | oldest | most voted
Raj
Guest

Hi Above Infirmation Are For Android App ?? if Yes Then Attach An Apk File

wpDiscuz