We recently had the opportunity to build a mobile app for Life of Dad, a community of dads from around the world.
The app’s main focus is a social network, allowing dads to post photos, join groups, and interact with each other. There is also lots of great content like videos, podcasts, articles, and other media. The app was built using AppPresser, and connects to the Life of Dad WordPress and BuddyPress site.
You can download the app for iOS or Android.
How the App Was Built
We used the AppPresser Agency Bundle plugins for this app, the Ion theme, and a child theme with our customizations.
The main functionality is achieved using our plugins out of the box. If you are interested in making your own app like this, the customization we discuss below is not required.
There was a lot of customization required for this app, including dealing with custom theme features, and custom post meta. These are common things to do in an app, so let’s talk about how we did it.
Custom Theme Features
The Life of Dad site had a lot of custom features baked into the theme, which we see a lot.
Themes should not be registering post types and adding a lot of custom functions, because if you switch themes you lose all of that functionality. Of course many of them do it, and that doesn’t work out of the box with AppPresser because we switch your theme. So what do we do?
Move these features to a plugin.
The Life of Dad theme was registering post types in a theme file, so we simply moved these register functions to a plugin. It was also manipulating some BuddyPress features like a “trending” activity feed, and we wanted that in the app. By moving this and all other functionality we needed in the app to a plugin, it allowed the desktop site and app to both work the way we wanted.
Custom Post Meta
Many times plugins add custom post meta for things like audio and video players. For example, you may see a custom meta box when you create a new post that asks for an embed code, or a url to a media file.
This is custom post meta, and it needs special treatment to work in an AppPresser app.
In our case, we wanted to see if there was a custom embed code, and if so, display it on the single post page. The first thing we did is create a child theme.
Next, we copied content-single.php from the Ion parent theme to our child theme folder. That will allow us to make edits to the file that will not be overwritten in an update. To get our custom embed code to display, we have to figure out what the post meta key is called. You can get this from the plugin author, in our case it was ‘cb_soundcloud_embed_code_post’.
Now we just need to add this code to the top of content-single.php, underneath the article tag.
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php
// Get our custom meta, and maybe output it
$lod_soundcloud_embed = get_post_meta( $post->ID, 'cb_soundcloud_embed_code_post', true );
if( $lod_soundcloud_embed ) {
echo $lod_soundcloud_embed;
}
?>
This code will vary depending on your situation, but you get the idea. We did the same for video and photos, just using a different meta key.
Note: we do not offer email support for custom post meta in your apps, but hopefully this helps you.
Child Theme Customizations
We made some other customizations that you may be interested in using in your apps. The code below can be added to the functions.php file in your child theme.
Note: we do not offer support for the code below, it is for example purposes only.
Custom Menu Profile
This code adds a BuddyPress avatar with a profile link to the left menu. Note, this will conflict with AppWoo if you are already using that.
Add BuddyPress Register Link to Login Modal
Add a link to your registration page in the login modal. This is especially useful if you have removed the AppBuddy login page.
Custom BuddyPress templates
To add your own custom BuddyPress templates, simply create a folder in your child theme called buddypress. Add the custom templates you want in the exact folder structure they appear in the Ion theme. For example, my-child-theme/buddypress/activity/activity-loop.php.
We did a lot of other customizations, including custom Javascript, CSS, templates, and more.
Hopefully this article helps you customize your app, make sure to download Life of Dad and give them a 5 star review on the app stores!