You’ve downloaded our WordPress iPhone app template. Now you want to take full advantage of it. This page contains the technical documentation for integrating our WordPress iOS App Template. While the downloaded template is fully working already, in order to wire up your own WordPress site or blog, you’ll need to make a couple of changes.
This extensive documentation also contains the overall architecture of the Swift code, in order to make it as simple as possible for you to modify the existing theme and add further customizations, as needed.
How to compile the Xcode project
1. Decompress the downloaded archive – The resulted folder will be essentially a Xcode project
2. Open up a terminal and navigate to the downloaded folder (by running “cd ~/Users/path_to_folder/WordpressApp”)
3. Install CocoaPods if you’ve never used before. For more details about what CocoaPods is and how it can be installed, please refer to https://cocoapods.org.
4. Run “pod update” in your terminal, in order to make sure your cocoa pod is up to date. This will ensure you’ll be working with the latest version of all the pods that this project is relying on.
5. In the terminal window, run “pod install” command. This will fetch all the dependencies this project is relying on (libraries such as Alamofire, Stripe, etc). If everything works properly, you’ll see the following results in your terminal:
6. Open the file “WordPressApp.xcworkspace” with Xcode. Once it’s opened, execute Product -> Run (or press Command + R). Make sure an iOS Simulator is set up as the running device. The project is now running.
How to integrate the iPhone template with your WordPress site
This section describes how you can wire up your WordPress feed to the iOS app template.
1. Download and install the following plugins on your WordPress site:
- REST API v2 Plugin (you only need to install this if your WordPress version is lower than 4.7.3)
- Advanced Custom Fields Plugin
- ACF to REST API Plugin
If you have the latest version of WordPress, you don’t need to install the REST API plugin, since it’s already integrated with the official WordPress source code. In this case (WordPress 4.7 or later), you can just access the endpoint at http://your-site.com/?rest_route=/wp/v2/posts. For example, for our blog, you can find the JSON data at http://iosapptemplates.com/?rest_route=/wp/v2/posts.
If you’re running an older version of WordPress, to check whether the REST API was installed properly, just go to “<your-site.com>/wp-json/wp/v2/posts” in your browser, and you should see a JSON response, listing your blog posts. For example, see our own JSON data at http://iosapptemplates.com/wp-json/wp/v2/posts.
2. Add a new custom field group, containing all the post fields that are exposed to the mobile app
In your WordPress admin dashboard, go to Custom Fields (left main menu) -> Add New. Name the group “iOS App” and add four different fields:
- category_name
- author_name
- author_photo
- read_duration_in_seconds
Make sure you use exactly these names as the “Field Names”. The “Field Type” should be “text” for all of them. Feel free to use any suggestive name as the “Field Label”.
3. Configure the custom fields for each blog post with the appropriate values
These values will be served to your iOS app, so make sure their values are correct and relevant since they’ll be presented to your users. In order to do this, you can edit any post and the 3 custom fields you’ve added previously will show up at the end of the editing page. Here’s how the fields look like for our own WordPress blog:
After saving the post, you can go to your JSON posts response (e.g. http://iosapptemplates.com/wp-json/wp/v2/posts) and check that the custom fields show up for that post.
4. Update the Swift source code to link to your WordPress backend
So far, you’ve exposed all the data you need for your app. Now, it’s time to make the app use it. In order to do that, you need to change the body of the “urlEndpointPath” method, which is provided by the ATCRemoteHostContextProvider protocol. Take a look at the view controllers (LargeNewsCollectionViewController, MediumNewsCollectionViewController and SmallNewsCollectionViewController) and change the function to return the path to your WordPress website.
Now build and run the app. The app should load your own blog posts. You now have your WordPress iPhone App template ready to rock!
If you have any issues with any of the steps above, please contact us as soon as possible. We offer free support for anything you might need, so don’t stay blocked if you run into any problems.
The main UI components
This section is currently in progress
Architecture Overview – WordPress iPhone App Template
This section is currently in progress