Creating mobili themes

To create a mobile mode template, we will act like other WordPress templates, in other words, it will be programmed like them. But there are several principles and standards that must be observed. In the following, we will examine these principles and standards.

 

Mobili themes style.css file

This feature is the most important and only feature of mobile mode template recognition by the plugin, and by adding this feature, your template will be transferred to the mobile mode templates section in the WordPress admin panel when installed, and will no longer be displayed on the desktop mode templates section. To add this feature to the style.css file, proceed as follows.

 

Desktop theme style.css
/*
Theme Name: Example
Theme URI: https://example.com/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Some text.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentytwo
Tags: one, two
*/

 

Mobili theme style.css
/*
Theme Name: Example
Theme URI: https://example.com/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Some text.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentytwo
Tags: one, two
Mobili: 1.0.0
*/

 

Mobili.php File

This file should be in the main path of your template and for example, if your template name is hello-mobili it should be in the path hello-mobili/mobili.php.

In mobile templates, no file other than this file will be uploaded anywhere if your template is enabled unless the user logs in with the mobile and is called in the after_theme_setup hook.

If you have settings for your template or you have added widgets or custom locations for page builders, it is better to call them in this file so that they can be displayed in desktop mode for site management.

 

Mobili Folder

Adding this folder is optional and by adding it you can change some default parts of the plugin.

To better understand the use of the mobili folder, consider this example. In the PWA feature, when the user logs in to the site with a mobile phone, he receives a message about installing the PWA application at the bottom of the page. The content of the message is uploaded from the templates/install.php file in the mobile plugin folder. Mobili folder in your template, change its contents.