Adding WordPress to an Existing Web App

There’s no doubt that WordPress is a fantastic tool for creating and managing your website’s content.  I don’t think there’s a person out there who would say it’s not absolutely great at what it does best.

But what happens when you need to marry a WordPress site with another web app?

Plenty of us need to do this, right?

We have a web app that has specific functionality that’s better suited to something like a Rails app, but the rest of the site is a perfect fit for WordPress…what to do then?

As I see it, and someone please correct me if I’m wrong, you have 2 choices:

• Build your web app first, and then adapt the styling and layout to your WordPress theme
• Build your WordPress theme first, and then create your web app’s styling and layout to match it

Either way the goal is the same.  You want to have a seamless experience for your site’s visitors, regardless of whether they’re on the WordPress part of your site or the web app portion.

Significant changes in anything from fonts to iconography to navigation will result in a strange user experience, not to mention reduced conversions.

But the question is which way to go?

Create your html/css pages first then morph them into WordPress, or vice versa?

I just recently went through this process, and I have to admit that thankfully due to the feedback from some friends and colleagues I’m on the 4th iteration of our WordPress site design.  This exact problem has reared its head so strongly that we’re pretty much back at the drawing board in trying to create a consistent experience for site users between the two platforms for our new product.

My original plan was to have the entire marketing site (including landing page), support documentation, contact page, and blog all be in WordPress, and leave Login and Register pages only to live in our web app.  Seems pretty logical, right?

But then there’s the question of once a user is logged into your app, since it’s fair to assume you won’t have anything like navigation on your Signup or Login pages so that you can maximize conversions on those pages.  Does the logged in experience for your users look and feel just like the marketing site or blog they were just at a few screens ago?

In many cases if you’re using an off the shelf WordPress theme or styling such as Bootstrap the answer is no.

So we’re left with the rather difficult situation of having to mold the styling from one platform into the other.  Either way I see it this is not a simple experience.

This blog post from WPMUDEV does a great job at explaining just what is necessary to create a WordPress theme from an HTML template, but at 3,500 words this is not a simple blog post or straight forward process for newbie developers.

Brad Williams from BoostrapWP also has a great series on this if you’re interested in a more thorough tutorial series on the topic.

I’d love to hear how others are tackling this problem.  How have you gone about creating either your web app’s styling to match the WordPress theme you want to use, or how have you adapted a WordPress theme to match the styling of your web app?

I can’t get over feeling like there has to be a better way than how I’ve gone about this recently.

Next Time Will Be Different

I’ve learned a few things through this process.  One of them is that relying on completely “done for you” themes or templates is great for just one part of this equation, but you’re NEVER going to get a WordPress theme and HTML template that look exactly the same.

There are a few out there, but the WordPress component of them come with an enormous code base, and dependencies on almost a dozen third party plugins to work.

Next time I create a web app that I know will have a WordPress component I’ll start very much from scratch. I recently ran across the Flat UI toolkit from DeisgnModo, which is great.  It gives you all of the pieces and parts you need to create a great looking, flat design.  This can be incorporated in either HTML template or WordPress.

From there I’ll use something like the Modern Business Template from Start Bootstrap and the Flat Bootstrap theme in WordPress.org.

With this combination I’ll be able to inject the UI and design elements from the UI toolkit into the frameworks already there from the two (relatively bare bones) templates/themes I picked out.

This should cut down on some of the repeated head-banging-against-the-wall experience I had recently.  Hopefully at least.

So, how do you create a web app and WordPress experience that is the same for visitors to both parts of your website?  Hit me up on Twitter @TheCraigHewitt