Understanding AppPresser as a Total Beginner – Part 2

This is part 2 of Understanding AppPresser as a Total Beginner.

In Part One I noted that it was important for me to understand the difference between a mobile app and mobile site.

I also mentioned how I tried installing the AppTheme as a plugin rather than a theme, but that was probably just me having a “Leif” moment. And finally, that I installed the Genesis theme for my website.

There is a connection here. I promise.

If you haven’t had a chance to read Part One of this article, then please, go ahead and read that section first and come back … we’ll wait for you.

Get Understanding

If I had spent a little more effort reading the documentation and doing more research to learn about AppPresser, it would’ve saved me some time from trying to decide which Genesis child theme I should use for my site. Because in the end it doesn’t matter what theme I picked.

Well, OK. That’s not entirely true.

Yes, the theme I chose for my website wasn’t going to be the same theme that would be used for my app. So as far as my app was concerned, it didn’t matter if I used Genesis, Thesis, WooThemes, Divi, or Avada for my website.

if I was creating an app from an existing site – and I wanted everything to look and work the same in my app as in my site – then my theme would definitely matter in that case…

However, if I was creating an app from an existing site – and I wanted everything to look and work the same in my app as in my site – then my theme would definitely matter in that case and it would be a different story. And I happen to have one.

Theme Story

When I first started cobbling together websites using WordPress, I didn’t always read the docs or Codex. In fact, I’ll be honest: it was rare. I know, I know. Anyway…

I was about midway through a site design for a friend-client using a free theme carefully chosen and downloaded from… uh, this place online. Things looked pretty good. With this new theme, I had just been introduced to shortcodes and let me tell you – it was just magic.

But during one of those moments when, you know, while looking for a solution, sitting there clicking through the rabbit trail of links on the internet, I landed on a certain theme marketplace and found myself staring at one of the coolest. themes. EVER! It was perfect for the project I was working on and would save me a ton of time.

I had to have it.

Within minutes, I’d downloaded that puppy into my half-finished project and eagerly activated it. No live preview, no customizer mind you. No sense either. Any guesses as to what happened?

That’s right. My beautiful site was destroyed. Why?

Shortcodes.

The theme I was using had generously provided shortcodes to ease the pain of dealing with pesky layout and functionality chores. I didn’t realize that when I switched themes, not only did I lose the functionality and professional-grade layout of the old theme, but now my pages had all this weird gibberish all over it.

To top it off, my site didn’t look anything close to the demo.

In a panic, I switched the theme back but it was too late. My old theme had suddenly contracted some kind of amnesia and was acting like it didn’t even know me. It wanted to start over again! Are you kidding me? But we’d spent hours together – days even! No. It was no joke.

That was that day I decided to learn more about shortcodes, how they related to plugins, and why I try to stick with plugins now.

And your point is?

Going back to creating my app. When someone grabs their iPhone or Android device and opens up an AppPresser app, AppPresser switches out the WordPress site theme to use the app theme enabled in the settings menu. So if you’re using a theme for your website that depends on shortcodes or other custom coding to work – and you enable the same theme for your app – be prepared for a letdown. Save that headache for another time and go with AppTheme.

When someone grabs their iPhone or Android device and opens up an AppPresser app, AppPresser switches out the WordPress site theme to use the app theme enabled in the settings menu.

Since I had AppTheme + my AppTheme child theme installed – and now correctly enabled – it would only be visible to app users. Genesis was still there for my mobile/website visitors to enjoy. Speaking of Genesis…

Beginning with Genesis

Not too long after learning about shortcodes and plugins, I went through a similar painful lesson that enlightened me to the virtues of using child themes when customizing a theme. I’ll save that disaster for another time but I will mention that it involved me directly editing a theme’s files, live – and in the WordPress dashboard editor, and hitting the ‘update theme’ button late one night. Yes, I can feel that collective cringe. I told you it was painful.

(Note: I’m a Genesis fan and user, so the following comments are my own and not an endorsement by AppPresser. Also, no one paid me to say these nice things about them. Yet.)

For me, one of the benefits of using the Genesis theme framework is becoming familiar with using child themes. Somewhat similar to WooCommerce and AppPresser, Genesis users purchase and install a core component + an extension. In this case it’s the theme framework together with a child theme that can either be custom-built (a starter child theme is provided) or purchased from the StudioPress store. So anyone who says they are using a Genesis theme is actually using a Genesis child theme. The other beneficial aspect of being a Genesis user was that I found myself gradually becoming familiar with hooks and filters, a foundational premise for customizing Genesis child themes.

All of this prepared me when starting to think of how I was going to customize my app. Naturally, to me now, it begins with a child theme – and AppPresser conveniently provides one based on the AppTheme, hooks and all.

By the way, did I mention that AppTheme is built on Underscores, Bootstrap, and Font Awesome? It is. These 3 tools are familiar friends to many. So dig in.

AppTheme

The big question now was, “So what happens when I turn this thing on?” After I’ve gone through and configured everything, set my colors, fonts, uploaded pictures and logos – What will people see when they view my app?

The answer is… It depends.

Before I go any further, some of you may be thinking ,”Hey wait a minute – you skipped over the whole AppTheme setup!” You’re right. I figured that rather than just write everything down that I learned from Scott Bolinger’s video, I would just let you watch it on your own. However, there are two things you’ll want to do first.

---

before you hit the customizer…

• Figure out what pages you want to include in your app – especially the home page. It may make sense to create a number of pages that are specifically for your app only.
• Create the menus you’re planning to use for your app. This gets taken care of the same way you create any menu for your site, in the Appearance > Menus section. That way it is available as an option in the AppPresser customizer.
• To customize your app, go to AppPresser settings->Open Customizer (not Appearance->Customize as that’s for your website theme, not for the app)

---

Since I was using AppWoo and AppBuddy, that meant I also had eCommerce and social media components to consider. These features generated special pages of their own that required some thought as to how they would be available in my app as well. Unfortunately, I wasn’t thinking and it took some bouncing back and forth between the WordPress menu settings and AppPresser menu settings to get it right. Checking the box that loads AppPresser for Admins = lifesaver.

Take some time to plan out your app pages and app menu structure. This is what your users will see when opening your app.

Now listen up. Class is in session…

---

Iconic Menus

Go grab your smartphone or tablet and turn it on. What do you see? Walls of tiny text? No. I see icons. Lots of them. When designing for mobile, think icons.

I had messed around a bit with font icons before but never really took the time to implement them into a project. One of the ‘musts’ on my app list was the generous use of icons. I did say that AppTheme comes with Font Awesome. So I took a good couple of hours on the Font Awesome website learning about all the cool ways (like stacked!) to use these very useful scalable graphics.

I then put this new knowledge to good use when creating my menus. How, you ask? Scott explains in that video above, so check it out.

Cleared for take-off?

Up to this point, I had touched very little code and just proceeded along the design phase of my app project with (nearly) the same workflow I was used to for a WordPress project. Including the missteps and hiccups.

I still had plans to install and configure the AppCamera and AppSwiper extensions that will enhance both the store and social media user experience. But I felt that these components would be better tested once I had it on an actual device – which in my case, would include a hybrid Android phone and tablet by Asus, called the PadfoneX, and my Amazon Fire Phone – which is unsupported by AppPresser.

Call me a maverick.

What I had was sufficient to move forward to the PhoneGap build phase of my app project. It was time to get this plane out of the gate and onto the tarmac.

What are you struggling to understand about AppPresser as a beginner? Ask me in the comments.