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.
add_action( 'rest_api_init', 'appp_register_post_meta' );
function appp_register_post_meta() {
register_rest_field( 'post', // any post type registered with API
'rehub_main_product_price', // this needs to match meta key
array(
'get_callback' => 'appp_get_meta',
'update_callback' => null,
'schema' => null,
)
);
}
function appp_get_meta( $object, $field_name, $request ) {
return get_post_meta( $object[ 'id' ], $field_name, true );
}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
add_filter( 'rest_prepare_post', 'dt_use_raw_post_content', 10, 3 );
function dt_use_raw_post_content( $data, $post, $request ) {
$out = '';
$offerprice = get_post_meta($post->ID, 'rehub_offer_product_price', true );
$offeroldprice = get_post_meta($post->ID, 'rehub_offer_product_price_old', true );
$domain = get_post_meta($post->ID, 'rehub_offer_domain', true );
$offerurl = get_post_meta($post->ID, 'rehub_offer_product_url', true );
if ($offerurl) {
$out .='<div class="compare-button-holder">';
if ($offerprice) {
$out .='<p class="price">';
$out .=$offerprice.' ';
if ($offeroldprice) {
$out .='<del>'.$offeroldprice.'</del>';
}
$out .='</p>';
}
if($domain){
$out .='<div class="mb10 compare-domain-icon"><span>Best deal on: </span>';
$out .=rehub_get_site_favicon('http://'.$domain);
$out .='</div>';
}
$out .='<a href="'.esc_url($offerurl).'" class="re_track_btn wpsm-button rehub_main_btn btn_offer_block" target="_blank" rel="nofollow">Buy for best price</a>';
$out .='</div>';
}
$newdata = $data->data['content']['rendered'].$out;
$data->data['content']['rendered'] = $newdata;
return $data;
}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
$data->data['content']['rendered']
In the last line we assign new block to this content. If you need to assign block before content, change to
$newdata = $out.$data->data['content']['rendered'];
If you want to assign something for excerpt instead of content, you can change last two lines on
$newdata = $data->data['excerpt']['rendered'].$out; $data->data['excerpt']['rendered'] = $newdata;
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
$newtitle = $data->data['title']['rendered'].' - '.$offerprice;
$data->data['title']['rendered'] = $newtitle;
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
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
.compare-button-holder .price {font-weight: normal;font-size: 1.5em;font-family: "Roboto",Arial;letter-spacing: -0.5px; padding: 0 0 15px 0;margin: 0;}
.mb10 { margin-bottom: 10px;}
.compare-domain-icon {font-weight: bold;}
.compare-domain-icon span { font-weight: normal;}
.compare-domain-icon img {vertical-align: middle;max-width: 80px;}
.compare-button-holder .wpsm-button.rehub_main_btn {box-shadow: 0 18px 38px 0 rgba(0,0,0,0.06),0 8px 40px 0 rgba(0,0,0,0.06);}
.wpsm-button.rehub_main_btn {font-family: Roboto,trebuchet ms;position: relative;font-size: 18px;line-height: 18px;padding: 10px 20px;font-weight: 700;background: none #43c801;color: #fff !important;border: none;text-decoration: none; outline: 0;border-radius: 100px;cursor: pointer;display: inline-block;}
.price del {font-size: 70%;opacity: 0.3;}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
add_filter( 'rest_prepare_post', 'dt_use_raw_post_content', 10, 3 );
function dt_use_raw_post_content( $data, $post, $request ) {
$out = '';
$offerprice = get_post_meta($post->ID, 'rehub_offer_product_price', true );
$offeroldprice = get_post_meta($post->ID, 'rehub_offer_product_price_old', true );
$domain = get_post_meta($post->ID, 'rehub_offer_domain', true );
$offerurl = get_post_meta($post->ID, 'rehub_offer_product_url', true );
if ($offerurl) {
$out .='<div class="compare-button-holder">';
if ($offerprice) {
$out .='<p class="price">';
$out .=$offerprice.' ';
if ($offeroldprice) {
$out .='<del>'.$offeroldprice.'</del>';
}
$out .='</p>';
}
if($domain){
$out .='<div class="mb10 compare-domain-icon"><span>Best deal on: </span>';
$out .=rehub_get_site_favicon('http://'.$domain);
$out .='</div>';
}
$out .='<a href="'.esc_url($offerurl).'" class="re_track_btn wpsm-button rehub_main_btn btn_offer_block" target="_blank" rel="nofollow">Buy for best price</a>';
$out .='</div>';
$out .='<style>.compare-button-holder .price {font-weight: normal;font-size: 1.5em;font-family: "Roboto",Arial;letter-spacing: -0.5px; padding: 0 0 15px 0;margin: 0;}.mb10 { margin-bottom: 10px;}.compare-domain-icon {font-weight: bold;}.compare-domain-icon span { font-weight: normal;}.compare-domain-icon img {vertical-align: middle;max-width: 80px;}.compare-button-holder .wpsm-button.rehub_main_btn {box-shadow: 0 18px 38px 0 rgba(0,0,0,0.06),0 8px 40px 0 rgba(0,0,0,0.06);}.wpsm-button.rehub_main_btn {font-family: Roboto,trebuchet ms;position: relative;font-size: 18px;line-height: 18px;padding: 10px 20px;font-weight: 700;background: none #43c801;color: #fff !important;border: none;text-decoration: none; outline: 0;border-radius: 100px;cursor: pointer;display: inline-block;}.price del {font-size: 70%;opacity: 0.3;}</style>';
}
$newdata = $data->data['content']['rendered'].$out;
$data->data['content']['rendered'] = $newdata;
if($offerprice){
$newtitle = $data->data['title']['rendered'].' - '.$offerprice;
$data->data['title']['rendered'] = $newtitle;
}
return $data;
}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.
Hi Above Infirmation Are For Android App ?? if Yes Then Attach An Apk File
It’s for both. I don’t know what apk you mean. Each site will have own file for uploading on google play and store
Worona Plugin information is going above of my head.
you can share video or full information to provide full information
please expalin how to use postman
I am using Worona, very nice solution and it works, but exactly what you described is missing.
But I do not understand where to place the code-sniplets? Very difficult for a non-programmer.
Can you maybe describe it a bit more detailled how and where to insert the sniplets?
thanks
Jörg
better to add this from ftp, because if you do something wrong, site can’t be crashed
Hi. All snippets must be added to functions.php of theme or child theme before closed tag ?> (if you have it)
Is it possible to get price from all the stores in rewise price comparison to make price comparison APP.
possible, but you must have enough skills for this. All data are stored in meta fields, but as associative array
How To Disable Header from WordApp Mobile App