ElevenPress

version 1.1
Official Documentation

Introduction

  • Item Name : ElevenPress - A full-featured WordPress mobile app
  • Item Version : v 1.1
  • Relase Date : 12/February/2025
  • Author : Eleven Apps
  • Support Email : [email protected]

First of all, Thank you so much for purchasing our App,
You are entitled to get free lifetime updates to this product + exceptional support from the author directly.

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this App is made and how to edit this properly. Basic Drt and Flutter FrameWork knowledge is required to customize this App.

Requirements

Here are the requirements you need to meet to create your app.

  1. A basic understanding of the Flutter framework.
  2. A Flutter development environment set up on your computer.
  3. Code Editing Software (eg: visual studio code, Android studio)
  4. A live WordPress site with WP-JSON API access
  5. A Firebase account for integration and setting up a notification system. (Optional)
  6. A Google AdMob account - to enable ads in your app (Optional)

Getting Started

Access your account to download the app folder and its associated files. Once downloaded, extract the folder. Inside the main folder, you'll find two subfolders:
First Folder: The app’s WordPress plugin, which must be installed first before proceeding.
Second Folder: The project files folder (the app itself).

The first step is to install the app plugin on your website.

Installing the App Plugin

The first step, as previously mentioned, is to install the plugin for your app. This plugin manages many essential functions within the app, including general settings, custom endpoints for app content, notification configurations, member settings, and more

1- Go to your WordPress dashboard.
2- Navigate to “Plugins” from the sidebar menu.
3- Click on “Add New Plugin”

4- Then select “Upload Plugin.”

5- From the upload window, select the ElevenPress Plugin file. 6- Click “Install Now.”

After Installing the Plugin:You will find a new option in your WordPress dashboard sidebar titled "ElevenPress"

Configure the plugin settings

Product Activation

To activate your application:

  • 1- Obtain the purchase code from your Envato account.
  • 2- Navigate to the Product Activation page in the Admin Panel and select "Activate Product" as shown in the image below.
  • 3- Enter the product code in the designated field shown in the image, then click "Activate.

  • Finally, you should see a badge indicating the product has been successfully activated, as shown in the image below.


    • General Settings Screen for the Application

    This screen includes several options:

  • The application's title and logo.
  • Enabling or disabling certain posting features.
  • Settings for the Privacy Policy page in the application.
  • Contact information settings.
    • You can enable or disable any of these options as needed.


    Home Screen Settings

    The home screen settings for your app include everything that should appear on the app's first screen. This allows you to specify the key sections whose content should be displayed on the home screen (according to the template), as well as to determine what should and what should not be visible among the main components on the app's main screen.

    Configure your options as you prefer, and don’t forget to save your changes.

    Post Screen Settings

    The post settings provides a comprehensive set of options that allow you to precisely control the display of every element within your post, from the author's name to keywords and comments.

    Configure your options as you prefer, and don’t forget to save your changes.

    Configure user settings

    This screen allows you to enable or disable features related to user behavior within your application, such as registration, login, etc.

    Configure your options, and save your changes.

    Notification Settings

    The notification settings screen includes various options, such as enabling or disabling notifications entirely, setting a custom title, adding a custom image, and, of course, uploading the service file for your Firebase project.

    Configure your options, and save your changes.

    About Firebase Service Account File : You will need to upload the service file for your Firebase project, as will be explained later during the Firebase setup for your app

    Post Options

    Defining a Post as an Opinion Article


    To mark a post as an opinion article, you need to select the corresponding option in the app settings displayed below the article, as shown in the image below.

    Defining a Post as a Trending post


    To mark a post as a trending article, you need to select the corresponding option in the app settings displayed below the article, as shown in the image below.

    Defining a Post as a Video post


    To designate a post as a video post (so that the video player appears instead of the featured image), the following conditions must be met:
    - The post type must be set to Video.
    - A video URL must be added in the link field, which will appear below the post settings on the creation page, as shown in the image below.

    Application Environment Requirements

    Install Flutter

    To customize and build your application, a complete installation of the Flutter framework environment is required. It’s always recommended to use the latest version.
    To install Flutter based on your operating system, please follow the official documentation at the following link:

    install Flutter

    Verify that all requirements are correctly installed by running the following command: 
                                        flutter doctor


    Install a Code Editor

    This step is usually part of the previous one, but to be sure, you'll need a suitable code editor to edit, customize, and build your application. The recommended editors are Visual Studio Code or Android Studio.

    App Identity Configuration

    It refers to the App Identity, the unique identifier for your app on Android and iOS, and updating all files that require these values to be updated.

    - To begin Configuration, and building your application : Navigate to the main project folder, then open it using your code editor:

    Android Configuration

    First: Open the build.gradle file from the path: android/app/build.gradle

    1- Update the value of the namespace by replacing net.elevenapps.flutterpress with your app's namespace
    2- Update the value of the applicationId by replacing net.elevenapps.flutterpress with your app's ID
    - Save and close the file.
    Second: Open the AndroidManifest.xml file from the path: /android/app/src/main/AndroidManifest.xml

    Update the android:label in the application tag to reflect the final name of the app.
    - Save and close the file.

    IOS Configuration

    Open the Info.plist file from the path: ios/Runner/Info.plist

    1- Update the string value of the CFBundleDisplayName by replacing Fpnews with your app's label
    2- Update the string value of the CFBundleName by replacing Fpnews with your app's label
    - Save and close the file.

    Configuring App Settings

    Project File Structure


    The project structure should appear as shown in the image below.


    - First run the following command in the terminal: 
                                        flutter pub get

    Note: Most configuration options are found in the configuration folder, so most of the following steps will involve updating some files within this folder.

    Update Site Domain

    Open the general_settings.dart file located in the configuration/general directory.
    Find the variable named domainName

    update its value to match your full website address (including https://). For example, if your website address is https://www.domain.com/word/press, copy and paste this exact address into the variable. If your website is on a root domain only (like www.domain.com), simply enter the domain name without any additional path.
    Important note: Do not include a trailing slash (/) at the end of the address, and ensure that your website has a valid SSL certificate

    About API (WP-JSON) : Test your website's link in a browser by requesting the following URL: YOURDOMAIN.COM/WP-JSON. If the response is a JSON data page, then everything is working as expected.
    If you encounter a 404 error or any other error, this means your permalink structure is set to the default 'Plain' setting, or you are using a plugin that is blocking JSON output. If you are using any plugins that disable the API, you should deactivate them.
    If your permalink structure is set to 'Plain', go to Settings > Permalinks and select any other option except 'Plain', then save your changes. After making these changes, retest the JSON endpoint by requesting YOURDOMAIN.COM/WP-JSON in your browser."




    Google AdMob Settings

    Your app is already integrated with most AdMob ad formats and has pre-defined placement areas.
    All you need to do is:
    Create an AdMob account: Follow this link to create your account.
    Register your app: Refer to this link for instructions on how to register your app and its requirements.
    Then you need to set up the main configuration and link your ad account according to the requirements of each operating system.
    Below are the steps to follow.

    Android Configuration

    The AdMob app ID must be included in the AndroidManifest.xml.
    Failure to do so results in a crash on app launch.
    Add the AdMob app ID, as identified in the AdMob web interface, to the app's android/app/src/main/AndroidManifest.xml file

    Simply replace the value of android:value with your AdMob app ID which you will receive when registering the application.

    IOS Configuration

    Update Info.plist In your app's ios/Runner/Info.plist file, Replace GADApplicationIdentifier key with a string value of your AdMob app ID.

    Simply replace the ca-app-pub with your AdMob app ID which you will receive when registering the application.

    Configuring ad options

    Create ad units: Create the ad units you want (Native Ads, Interstitial Ads, Rewarded Ads, Banner Ads). Refer to this link for instructions on how to create Ads.
    Then Customize settings: Open the ads_configuration.dart file in the configuration->ads folder to adjust ad settings.
    As shown in the image above, you'll find all options to enable or disable ads completely, or to disable specific ad placements.
    Replace the unit ID values for each ad unit with the values you'll get when creating the ads.
    Do not enable ads with the current values in the file (they are for testing purposes only).
    Note that each ad unit has a different ID for Android and iOS.

    Language Settings

    Multilingual Requirements

    To enable multilingual content in your application, you must have one of these plugins installed and activated:
    - Polylang Pro
    - WPML
    In addition, you need an additional language installed.
    Naturally, you must have content in multiple languages on your website.
    Note that this refers to content languages, not the application interface language.

    Multilingual configuration

    If you wish to enable multilingual content, please follow these steps to customize and configure the supported languages.
    - Open the file language_settings.dart located in the configuration/language folder.
    1 - Update the variable isAppMultilingual to the value true.
    2 - Define the Default Language.
    3 - Defining supported languages: Update the languages map to include only the languages supported on your site.

    Language File: The language file is related to the translation of the app’s user interface and includes all aspects and different screens of the application.
    All language files are located in the path /assets/lang, as shown in the image below.
    - You can update the values in any file that matches any of your languages.

    To Create a new language file, duplicate the existing en.json file, rename it to match the new language "using only 2 lowercase letters", and update the content as needed.


    Default Language

    If the default language of your application is not English, you should update your language Code in the language_settings.dart file, regardless of whether your application supports multiple languages for content or not.

    Use lowercase letters only for the language code, as shown in the image below.

    Firebase Integration

    You need to integrate with Firebase to enable these options in your application:
    App Analytics : (if you want to enable analytics)
    The app is already set up to gather essential analytics (Google Analytics) on navigation and user interactions within your application.
    User Notifications: Send notifications for new or updated posts/news from your website. The app and its plugin are set up to send notifications to users about new or updated news when you choose this option during the publication of a new post/article or an update to an existing post.
    Please follow the steps below to link your project and configure Firebase settings.

    Creating a Firebase Project

    - Go to the Firebase Console
    Click on Create a project.
    Enter Project Name And Click Continue
    (Optional) : Enable Google Analytics, And Click Continue.
    Click on the Select an account and choose the (Analytics) Account for Firebase.
    Click on Create Project.
    After successfully creating the project, click Continue.
    The project page after creation will often look like the image below.


    Uploading The Service File

    The next step before setting up the project is to create a service file from your project and then upload it to your website through our plugin.

    To do this, please follow these steps:
    1- From the main project page, click on the settings icon and select Project Settings as shown in the image below.

    2- On the Project Settings page, click on Service accounts as shown in the image below.

    3- On the Service accounts page, scroll down to find and click on Generate New Private Key as shown in the image below.

    4- Click Generate Key again to confirm.

    - A service file in JSON format will be created. Save this file in a secure location.

    Now, you need to upload this file to your website through the plugin.
    This is required to enable notifications for creating or updating posts/news on the WordPress Admin.
    To upload the service file to your website, please follow these steps:
    1- Go to the WordPress dashboard of your website.
    2- From the sidebar, ElevenPress => Notification Settings Page.

    3- On the Firebase Notification page, scroll down to Firebase Service Account File.
    Then select the service file that was previously downloaded and click Save Settings to upload the file.
    Finally, you should receive a confirmation message as shown in the image below.


    Firebase Project Configuration

    Now you need to create your apps (Android & iOS) within your Firebase project, configure the necessary settings, and link them to the app.
    The best and recommended method is to complete this via the Firebase CLI.
    1- Install the Firebase CLI : Follow the official documentation to install Firebase CLI via this link.
    2- Once Firebase CLI is installed: go to the main root of the project and run the following command: 
                                    firebase login
    This will require permission to confirm login to your Firebase account.

    3- After a successful login: run the following command in the command line: 
                                    dart pub global activate flutterfire_cli

    4- Then, run this command: 
                                    flutterfire configure --project=TestProject
    Of course, replace TestProject with the actual name of your Firebase project as created earlier.
    This automatically registers your per-platform apps with Firebase and adds a lib/firebase_options.dart configuration file to your Flutter project.

    If all steps were completed successfully, this is all you need, and your project should now be configured successfully via Firebase.

    Enable Video Players

    By default, video players and related widgets are disabled.
    To enable video playback for video posts, follow these steps:
    Step 1:
    1- Open the pubspec.yaml file from the main root of the project
    2- Uncomment the two video-related packages as shown in the image by removing the # and adjusting the indentation. As shown in the image below:

    Then, run the following command from the command line: 
                                flutter pub get

    Step 2:
    1- Navigate to the video widgets folder in your project at the following path:
    presentation/widgets/video_player/native_video_player_widget.dart
    uncomment the entire code.
    And
    presentation/widgets/video_player/youtube_video_player_widget.dart
    uncomment the entire code.
    Step 3:
    Open Post page presentation/screens/post_screen/post_page.dart
    1 - Uncomment this lines as shown in the image below:

    2 - Then Uncomment this lines as shown in the image below:

    3 - Uncomment widget as shown in the image below:

    After completing the modifications, save and close all files.
    That's it!

    Splash Screen Configuration

    flutter_native_splash : When your app is opened, there is a brief time while the native app loads Flutter. By default, during this time, the native app displays a white splash screen. This Option automatically generates iOS, Android, code for customizing this native splash screen background color and splash image. Supports dark mode, full screen, and platform-specific options.
    To implement your app's Splash Screen:
    1- Open the app_splash.yaml file from the main root of the project as shown in the image below:

    2- Edit the values within the file: (background color of the splash screen, the logo link that will appear on the splash screen, and any other options you prefer). As shown in the image below:

    These are most of the necessary options you need. However, you can learn more about customization options through this link
    After completing the modifications, save and close the file.
    Then, run the following command from the command line: 
                                dart run flutter_native_splash:create --path=app_splash.yaml

    This command will create the Splash screen for your app according to your customizations.

    App Icon Configuration

    flutter_launcher_icons : tool which simplifies the task of updating your Flutter app's launcher icon. Fully flexible, allowing you to choose what platform you wish to update the launcher icon for
    To implement your app's Icon:
    1- Open the app_icon.yaml file from the main root of the project as shown in the image below:

    2- Edit the values within the file: (Path to your app icon, Background fill color, and any other options you prefer). As shown in the image below:

    These are most of the necessary options you need. However, you can learn more about customization options through this link
    After completing the modifications, save and close the file.
    Then, run the following command from the command line: 
                                dart run flutter_launcher_icons -f app_icon.yaml

    Build and release an Android app

    Since there are no special requirements or restrictions in our app, we strongly recommend following the official FLUTTER documentation to complete the final build and release your app for release on the stores.
    Please follow the link below for the official documentation on building and releasing your app.

    Build and release an Android app

    You can also watch the following video on how to build and release your app for Android:


    Publishing to Google Play:

    The video below provides a detailed guide on the process of publishing your app to the Google Play Store.


    Build and release an iOS app

    Please follow the link below for the official documentation on building and releasing your IOS app.

    Build and release an IOS app

    You can also watch the following video on how to build and release your app for IOS:

    Publishing to App Store:

    The video below provides a detailed guide on the process of publishing your app to the Apple App Store.


    Help & Support

    We provide full support and assistance throughout the active support period for your product, according to the following terms:
    - Availability of the author to answer questions
    - Answering technical questions about item’s features
    - Assistance with reported bugs and issues

    However, item support does not include:
    - Customization services
    - Installation services

    You can request support and assistance via our email: [email protected]
    Note: Please provide your purchase code when submitting your request.

    Customization Services

    Looking for additional customization for your app, plugin modifications, application tweaks, or custom features?
    We offer a full range of additional customization services, modifications, or add-ons upon request.
    For example:
    - Building your app and publishing it on your store accounts.
    - Customizing the app or plugin according to your business requirements.
    You can request our custom services via email at: [email protected]