How we customized our BuddyPress app, PressChat

Update: The customization in this post only works with AppPresser 2. If you are using AppPresser 3, please see this post.

We recently built a mobile app that integrates with BuddyPress called PressChat.

To develop this app, we customized AppPresser and BuddyPress with things like a custom intro screen, changing the login screen, a custom photo modal, and custom styles. In this post we’ll show you how we did these customizations, and how you can add them to your app.

Much of the customization below is already done for you by installing the child theme we have created. The AppTheme, AppBuddy, AppPresser, and BuddyPress must all be installed to use this child theme.

| Download Child Theme

Custom Homepage

We used a custom homepage with icon based navigation and an image above it. This works very well with AppPresser apps because the page is very lightweight. Using a font icon instead of images helps the app load quickly, and it looks great.

You can learn more about how to create a custom app homepage here. (You don’t need to add any custom styles, they are already in the PressChat child theme)

Don’t force login on home screen

AppBuddy forces users to login or register before they can access the app by default, similar to Instagram.

We realized you may not want to do this, because the community section of your app may only be a small part. To remove the login/registration page, add this line to your wp-config.php file:

define( 'APPP_REMOVE_LOGIN', true);

If you remove this, you will want to add a link to your registration page somewhere else. You could add it to the side menu, or in an intro screen like in PressChat.

Custom Intro Screen

The custom intro screen was created with the AppSwiper extension.

It allows you to add a few welcome slides that are only shown the first time the app is used. The final slide can be used to ask users to sign up, or just direct them to the app home screen.

You can learn more about creating a custom app intro screen here. (You don’t need to add any custom styles, they are already in the PressChat child theme)

Custom Photo Modal/Gallery

The custom photo gallery in PressChat contains a nice modal that displays the images full size when they are clicked. It uses the AppCamera extension, along with the WordPress gallery shortcode.

If you are using the PressChat child theme, create a custom page and insert this code (in text mode):

[app-camera]

<hr/>

[gallery link="file" columns="4"]

<div id="gallery-modal" class="io-modal">
    <div class="modal-content"><img class="gallery-modal-image io-modal-close" src="" /></div>
</div>

That will automatically create the custom gallery page in your app.

To learn more about this custom photo modal, please see this post.

Check Ins

PressChat contains a new feature in our App Geolocation extension that allows users to check in to a specified location.

You can add a business from Google Places, or a custom address. After a user checks in through your app, their location is displayed in a custom post type. You can get meta such as latitude, longitude, place name, and address.

You can display these check ins in your app by using a custom page template, or use a filter to do a custom action. For example, send your app user to a page with a coupon after they check in, similar to Yelp.

To display the check ins on the front end of our app, we used the Display Posts Shortcode. After installing and activating that plugin, we added this code to a page:

[display-posts post_type="checkin" wrapper="div" include_date="true"]

See our app geolocation documentation for more information.

What app will you build?

In this article you’ve seen some examples of how to customize your AppPresser app. This is just a start, you can do almost anything with a little custom code.

Have fun, and let us know what cool stuff you build!