Scott
Bolinger

Custom App Spotlight: Life of Dad

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

LOD podcast

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;
}
?>

IMG_4272Now our single post displays the media from the custom post meta properly.

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!

Learn How to Increase Revenue By Selling Apps to Your Clients

Sell to clients cover 150

Download a comprehensive PDF guide on how to estimate projects, mock up apps, and communicate value to your clients.

Powered by ConvertKit

7 thoughts on “Custom App Spotlight: Life of Dad

  1. “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.”

    What do you mean?

    1. Sorry that’s kind of confusing 🙂

      I just didn’t want anyone to think that you have to write all this custom code to make an app. These are custom things we are doing, things generally work out of the box if you don’t need customizations like this. I hope that makes it more clear.

  2. I downloaded the android app life of dad in my phone today, signed up my account, now I am in. Overall it looks like a mobile web version of the buddypress, actually worse version of buddypress mobile web (sorry, just being honest), especially the padding/margin on both sides of the screen is too much, making the real content area in the middle is quite small and narrow. Secondly, it shows all the sub-menu of buddy in a squeezed view. Is there anyway to make this look more like an organic app? such as: filling the screen on both sides, re-arrange the sub-menu so they looks like an app instead of a full width webpage being squeezed. Thanks for reading my feedback. I would love to use this solution asap once this small issues are improved.

    1. Hi John, thanks for your feedback. Everything you mentioned can be changed with CSS. What you are seeing is a WordPress theme, so you can use a child theme and edit every single thing you see.

      If you have any other questions feel free to email us.

      Thanks!

  3. This post is about a year old and I’m looking for inspiration as BP on AP3 just looks awful. So as I’m browsing through examples I’ve just downloaded this app.

    I think it’s probably one of the best BP examples and really does it look really impressive….but how much of that uses AppPresser now? It’s changed a lot from the screenshots and doesn’t look anything like what you can knock up inside the customiser that’s for sure.

    I’d love some tips on making the BP look better, right now it’s pretty gash. No good examples in apppresser.com that’s for sure.

Leave a Reply

Your email address will not be published. Required fields are marked *