Cell site visitors turns into much more nice than desktop nowdays. So, many individuals are fascinating how one can create android and ios cellular app for his or her web sites. Right here some technics for this.

Initially, I feel, that cellular app will need to have one other look and supply different consumer expertise. If you wish to have the identical logic as on important desktop website, it’s higher to maintain it as is with out cellular app or use AMP.

One of the best ways to create cellular app is to create or order from cellular app builders. Drawback is that, cellular app growth could be very costly. I don’t suppose that creating app lower than $3000 has a way. What’s different? It’s utilizing particular plugins. I investigated a number of hottest plugins for wordpress which permits to create cellular app and right here is my evaluate of them.

Apppresser

I feel, it’s strongest plugin for creating apps. It has very fascinating options and permits to create actually highly effective purposes. And it’s because it has some highly effective options.

Customized pages

Initially, you may create customized homepages and customise it in several methods. For instance, house web page may be set as hyperlink tabs

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

Customized pages can have personal html code and even Ionic components. It means that you could add sliders, playing cards, accorditions, mediaplayes and different dynamic elements in your customized pages.

Put up listings

Second factor which is necessary in Apppresser is that they permit to customise publish loops and use REST API endpoints of wordpress. This implies which you can create particular listing, for instance, from occasions or from listing itemizing, product itemizing, listing of posts from sure class, writer or tag. This may be useful if you wish to construct hottest posts web page or particular archive.

Customization and template hooks

This factor is strongest for me and normally different plugin builders ignore it. In fact, many themes and plugins add many data in posts, like costs, maps, dates, specs. Most of app plugins ignore this knowledge and use solely customary content material of wordpress. However Apppresser permits so as to add such knowledge not solely in internal posts, but in addition in customized listings. They’ve many template hooks and tutorials how to use them, additionally choices to make use of custom css and even child themes.

Particular login options

One other good factor is member choices. For instance, login modals and pages

There are a lot of different obtainable features, like customized push notofication, Buddypress module with exercise and choice to make use of digicam for importing pictures, Woocommerce module and offline pages. You may construct actually skilled cell app with Apppresser, however there is just one unhealthy information – PRICE. For fundamental plan, you might want to pay $19 every month, which is just too overpriced for small websites. Additionally, this plan is fundamental and doesn’t have many attention-grabbing modules, like woocommerce, Admob

Company plan is extra attention-grabbing and it has worth $49 for month, however you can also make 25 apps. So, every app can have worth close to $2 in month, however, I believe this plan is sweet for builders and small freelance firms which provide creating cell aps, however not for homeowners of web sites. I hope, they are going to make particular plan for website homeowners quickly, as a result of it’s nice plugin

WordApp Mobile App

That is second plugin which I like. It’s additionally has good design and a few customization choices.

Similar to earlier plugin, WApp can have customized emblem, menu, colours, background, icons. it permits so as to add additionally backside menu with icons.

Plugin additionally has possibility to make use of customized pages as begin web page and likewise you possibly can select separate theme for app. However as an alternative of Apppresser, plugin makes use of default wordpress pages as is. To be fact, I don’t assume that such pages will work accurately, particularly if they’ve customized scripts, kinds which works on desktop model.

Downside is that proper column preview works just for demo function, actual preview is obtainable provided that you click on on pink button, but it surely’s not out there in free model.

Professional model has not massive value and begins from $2.99 in month. But it surely’s an issue that I have to pay first earlier than I can test if my app will work as I would like. Utilizing desktop theme inside cellular app could cause some issues, however on indisputable fact that you should use separate theme for app, you should use default themes which should work. Additionally plugin has close to 20 totally different bundled themes and it’s one among benefits of plugin.

One other constructive factor, that you should use Admob to monetize your app.

Professional plans additionally has choice to ship push notifications.

Costs of PRO model is less expensive than earlier plugin and costliest plan has close to $6 in month. It will embrace all professional capabilities + disabling copyrights of creator in your app and creator’s advertisements.

To my opinion, that is good various for Apppresser when you don’t come up with the money for.

Worona

This plugin is new and appears like promising. Presently, they don’t have one thing fascinating, the one factor is that it’s completely free and actual quick setup. Customization may be very primary, you possibly can change solely menus and colours of header. However I’m following them, as a result of they develop plugin.

How one can customise content material of inside posts in cellular apps

Virtually all cellular app builders use REST API of wordpress. From 4.7 model of wordpress, REST API is inside core of wordpress and I feel, that wordpress growth can be targeting REST API. That is actually highly effective factor, which might help mix all apps, desktop extensions and even actual offline issues in a single mixture with wordpress website. REST API is like method of knowledge storing which can be utilized all over the place, in any gadget or software.

So, as I wrote, most of app builder plugins use REST API requests to wordpress to get knowledge of posts. Downside is that wordpress has very primary data in REST API for posts and doesn’t embrace customized fields values that are utilized by all of themes and plugins. For instance, your publish has some costs, or publish views values, or perhaps you retailer date of your occasion, location, and many others. All of this is not going to be out there in publish content material in REST API. So, you’ll want to prolong content material or create separate fields for API.

To check your customizations, I like to recommend to make use of google chrome and their extension Postman which is greatest for testing totally different API.

For creating separate fields, you should use subsequent 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 wish to pay a lot consideration on this code, as a result of, often, you don’t want this fashion for utilizing with app builders, as a result of they don’t acknowledge such fields and simply ignore them. You’ll be able to learn extra about this fashion in docs.

Second manner is most typical used for app builder. As an alternative of registering new discipline for REST API, you possibly can modify response of submit content material and fix further knowledge on to submit content material. So, for instance, you wish to present finest deal worth which you saved in discipline with identify  “rehub_main_product_price” and likewise you wish to present finest deal service provider and icon. One thing 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

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

where 240 is your ID of post.

As you see, all is working.

Subsequent factor is styling. What I must do is copy all types for component of block to model of app. Many app builder has possibility so as to add customized types for this. So, I press F12 in chrome to open developer instrument the place I can verify types of my parts

Click on on icon and click on on component which you need to verify.

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

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.

Sure, it’s working.

P.s. there are a lot of different good wordpress app builder, for instance, Mobiloud. However most of them should not supported now or have too costly worth. For instance, Mobiloud has worth $69 every month, so, I suppose they’re higher for giant corporations, not for single websites, however you’ll be able to verify different plugins additionally, all of them have the identical logic of working.