WordPress Application Development: An Online Game powered by Twitter’s API

by
on February 28, 2013
(4 minute read)

A few days ago I was reading a post from Tom McFarlin on WordPress Application Development and thought I’d give my five cents with one of the web apps that I built on top of WordPress just last year.

Things I’m buying on Amazon this week

The app is called VentureWars.com, it is a free online business game on startups, investments and success. Still needs some things ironed out but a great fun if you like startups, entrepreneurship and sorts… I’ll wait here, go ahead and check it out :)

venture wars

Why choose WordPress?

WordPress is labelled as a “blogging system” but that doesn’t mean it’s only good for that. I have worked in over 40 WordPress websites for the past few years, know its powerful API which is very easy to learn and use, and how to optimize speed and performance. So once I came up with the idea of building an online game I thought “Hey, why not build it in WordPress? Let’s try it out!“.

After all, I’d say 90% of the application code is pure PHP and the other 10% uses the API of WordPress to communicate with MySQL, identify users and serve the views.

The boilerplate is gone

  • Powerful User Authentication and ACL (Access Control List)
  • SEO out of the box (sitemaps, RSS, pings, trackbacks, etc.)
  • Administration panel
  • Constant updates
  • Quick and easy templating/theming system
  • Nice URLs and hierarchy
  • Clean MySQL tables (easy to query)
  • Security
  • Caching system
  • Decent search engine
  • Thousands of custom features (plugins)
  • Great documentation
  • Massive community and support

Seamless to users

Another requirement I wanted for VentureWars is that WordPress was seamless to the users and they should never see the Admin Panel or anything similar. That’s why I built the Register in WordPress with a Twitter Account Plugin (open source code available for free on Github, feel free to use it).

“WordPress is not a serious framework”

Programming pattern

Maybe one of the turn-offs veteran programmers will have when building applications with it is that WordPress hasn’t got an MVC or MVVM architectural pattern, it’s got its own “hooks, actions and filters” one. You still keep the logic separated from the views, the difference with other patterns is that you assign logic parts into hooks during the runtime process, here’s the list of hooks to give you an idea.

Performance concerns

Another apparent disadvantage of WordPress is its performance. By default, WP is very slow compared to other frameworks or CMS and it is not a wise decision to use WordPress for a high-traffic website as it comes by default. You must make a few tweaks to make it work nicely.

Making WordPress super fast

For static content websites it is super easy, this blog for example, went from 3 requests per second on a shared hosting to 22, that’s 7 times faster (tested with Ab).

But hey, we are building a web application, we are going to have loads of dynamic content! That’s completely fine, and you have several options.

1. Selective Caching

There’s several solutions here:

  • Use hooks to tell the caching plugin about certain dynamic regions
  • Exclude certain pages from being cached
  • Use HTML tags to disallow certain parts (they look like this: <!--mfunc-->echo rand();<!-- /mfunc -->)

2. Client Side Rendering

You just need to tweak your architecture a bit, similar to what LinkedIn did in 2010. We are still used to the old approach to developing web applications where the back-end does all the work and sends everything to the user. Nowadays, Client Side rendering is a great option since personal computers are very powerful and JavaScript engines such as V8 (Chrome), Rhino (Firefox) and SquirrelFish (Safari) have improved a lot in performance compared to the ones we had some time ago.

The idea here is to delegate part of the dynamic information rendering to the client and use a JavaScript MVC framework such as Backbone.js to keep everything organised and send/receive all back-end requests and a JavaScript templating engine such as Handlebars.js or LinkedIn’s Dust.js to generate the views. Then, use a lightweight micro-framework such as Limonade to act as a REST server and provide JSON. Another good thing about WordPress is that the MySQL tables are easy to query directly, not like many other CMS:
Wordpress Database diagram
Source: WordPress Codex

Web App Prototyping

The website you are seeing right now was built in half day… it’s just a blog, I know… But it took just 4 hours to get a fully functional website starting from a blank folder, going through server setup, front-end, back-end, file upload, database, static pages, URLs and so on, a morning as usual.

It’s a great solution to use WordPress when building initial prototypes and MVPs. I’ve never found WordPress falling short and it has kept up with more than several hundreds of connected users at peak times without a problems. I can even integrate it with Limonade PHP, Kohana or CodeIgniter and use both of them on parallel using the same MySQL database. Oh, and to speed development even further use Twitter Bootstrap and you are ready to go!

Try it out on your next project and you’ll see, even big companies are starting to rely on WordPress for their websites!

Did you enjoy this article?

Thank with a coffee ☕

Or help me out by clicking one of these buttons:

    
    

42 comments

  • ivandurham says:

    Awesome post dude. You are going really well in blogging. I like it really much. Keep up the good work !

  • Seth Etter says:

    Thanks for this, very helpful.

  • Jonas says:

    Thanks, just what I was looking for.
    Just one question, is it possible to output:

    $wpcf7_data->mail[‘body’]

    but then replace the variables with the posted ones?
    in other words, is it possible to get the mail body of the mail 1 or 2 being send?

  • Andrea Moro says:

    Hello there,

    thanks for the interesting post. It gave me a lot of indication and I was wondering if you can perhaps help me to encapsulate the name of the sender in a session variable I can recall in the subsequent Thank you page.

    What I did in my function.php code is

    function get_contact_form_details($cf7){
    $_SESSION[‘cf7data’] = $cf7->posted_data;
    return false;
    }
    add_action( ‘wpcf7_before_send_mail’, ‘get_contact_form_details’ );

    whereas in the thank you page I have this code

    Hi,

    but nothing appear on screen, like the value has never been stored. Any help?

    Thanks

  • Xavi Author says:

    Hi Andrea,

    I would suggest you to post your question here: http://wordpress.org/support/plugin/contact-form-7

    The author of the plugin itself and thousands of developers will be able to help you faster than myself (I’m quite busy these days).

    Cheers

  • Cube3x says:

    Your post really helped me to add contact form 7 name and email to my email marketing site. Thanks for writing this post.

  • tonyb says:

    Thanks for this useful information.

    I used your plugin but had problems getting all your snippets of code to work.

    Then I realised the ones that use:

    $WPCF7_ContactForm-> worked, and those that use

    $wpcf7_data-> didn’t work.

    When I substituted the former for the latter, the other snippets worked as well. Wonderful!

    Tony

  • Sanket Vyas says:

    I Use Contact form 7

    add_action('wpcf7_before_send_mail','save_to_the_database');
    function save_to_the_database($cf7) {
    	global $wpdb;
    	//declare your varialbes, for example:
    	$id = $cf7->posted_data["id"];
    	$first_name = $cf7->posted_data["first-name"];
    	$email_txt = $cf7->posted_data["email-id"];
    	
    	//echo $ticket_id;
    	$result = $wpdb->get_results( "INSERT INTO databasename (`id`, `firstname`, `emailid`) VALUES ('$id','$first_name','$email_txt')");
    }

    Its work fine , also insert data into database.

    Now I have Three Contact Form, contact-form-7 id="411" contact-form-7 id="412" and contact-form-7 id="413"

    How can I trigger

    If id of form = 411, Insert into DB -> Table1
    If id of form = 412, Insert into DB -> Table2
    If id of form = 413, Insert into DB -> Table3
  • Javayim says:

    Just perfect, thanks !

  • MikeS says:

    Sorry but I’m new to to programming.
    Where exactly will I add this codes?

  • MarcelM says:

    Thanks Xavi this was a huge help. I spent a while searching and this is exactly what I needed.

  • Krony says:

    Thank you, exactly that’s what i’ve been searching for :)

  • Y-Love says:

    Thank you SO much for this, I’ve been searching everywhere for this. Fantastic post.

  • Patrick Van Hoof says:

    Hello Xavier

    My contact form title is ‘guide_pvh’

    The code is :
    title;
    //if ($title==’pvh_guide’){
    // $wpcf7_data->additional_settings = “on_sent_ok: \”location.replace(‘http://locationcontainernamur.com/blog/’);\””;
    //}else{
    // $wpcf7_data->additional_settings = “on_sent_ok: \”location.replace(‘http://google.com’);\””;
    //}
    $wpcf7_data->additional_settings = “on_sent_ok: \”location.replace(‘http://locationcontainernamur.com/blog/’);\””;
    }
    add_action(“wpcf7_before_send_mail”, “wpcf7_do_something”);
    ?>

    but although CF7 told me that the message was sent, in my code the redirection does not work, you have an idea of the problem?

  • Etienne says:

    Hi Xavi, thanks a lot for this excellent post. As one of the (lower end) midweight PHP developer, this is what I needed.

  • barry says:

    Hello Xavi,

    I like to pick your brain: do you know if a CF7 form can have multiple thank-you redirections based on selected form values??

    i am testing with a custom function in functions.php but i dont see an appropiate hook.

    Any ideas, tips?

  • Xavi Author says:

    Hello barry,

    Yes, copy the code at “Redirecting someone to a different page depending on submitted data” but instead of $foo == "provider" use $_GET['the-select-field-name'] == "option1", etc.

    You may want put that in a plugin instead of the functions.php, the code at “Creating a WordPress plugin” in the article should work for you.

    Cheers,
    Xavi

  • Laura says:

    Thank You! I have two CF7 forms and Flamingo installed. Would this be a way I can prevent one of the forms from being saved in the database from the Flamingo plugin?

  • Xavi Author says:

    Hi Laura, I can’t tell for sure but it should. Try returning an empty variable for $WPCF7_ContactForm.

  • Sohail says:

    Hi Xavi,

    Would this not work if write this in functions.php file ?

  • Xavi Author says:

    Hi Sohail,
    It will, just make sure to call it through the hook (add_action…).

  • Pratik says:

    “WordPress Contact 7 , make Conditional Email Body ??”

    Hello i am using Contact 7 form plugin. I get option to have HTML body for email template like

    Name:

    [your-name]

    Here [your-name] is actually value of textbox,I Dont want to make REQUIRED field,

    So what i want is IF THE NAME TEXT BOX VALUE is filled only then show labels and textbox value.Means show the above given Table in email ONLY IF IT IS FILLED .

    I searched a lot ,i didnt get any help on any website ,Please help me .Thanks

  • Xavi Author says:

    Hi Pratik,

    The email is in this variable: $wpcf7_data->mail['body'] so you can modify it freely. You can even empty it and start filling it conditionally:

    $wpcf7_data->mail['body'] = "";
    if ($wpcf7_data->posted_data['your-name']) {
        $wpcf7_data->mail['body'] .= "Hello [your-name]!";
    }

    untested code

  • remco says:

    Hi Xavi,

    I like to redirect when email is not successfully send. Have you got an idea for this? Thanks, Remco

  • mary says:

    Hi Xavi,
    I’m new to wordpress so I’m having some issues.
    I need to change the recipient mail address based on a parameter that is called $citta (it means city)and is in the url of the page where the form is (ex. http://www.test.com?citta=Florence). So, if $citta is equal to Rome the form must send to a certain address and so on.
    I created a plugin following your tutorial but when I compile the form it does not send anything.
    Could you possibly check my code? Thank you so much.
    A last question: what should I write in the recipient (To) field in Contact form editing page? I wrote [recipient] but I am not sure about it.

    function wpcf7_do_something (&$WPCF7_ContactForm) {
    if ($citta == “Rome”) {
    $WPCF7_ContactForm->mail[‘recipient’] = “Rome “;
    }
    if ($citta == “Turin”) {
    $WPCF7_ContactForm->mail[‘recipient’] = “Turin “;
    }
    if ($citta == “Florence”) {
    $WPCF7_ContactForm->mail[‘recipient’] = “Florence “;
    }
    }
    add_action(“wpcf7_before_send_mail”, “wpcf7_do_something”);

  • Rob W says:

    FYI, this code will need to be updated to reflect the latest version of WPCF7 (3.9)… The access to the posted data has changed. See: http://contactform7.com/2014/07/02/contact-form-7-39-beta/

    This was code example was causing headaches when posted_data was NULL… see link on how to access data.

  • Vir J says:

    Hey thanks Xavi for this wonderful article..

    Though it did not solved my problem but I was able to manage to catch the tweak required for adding this data to salesforce CRM and was successful.

    I had to replace $wpcf7_data->posted_data[‘your-name’] with $POST[‘your-name’] to get the data of form fields.. else it was all coming blank variables.

    Anyways, Thanks for the post.

    Good Luck.

  • Andrew says:

    Wanted to say thanks. With the new release at http://contactform7.com/2014/07/02/contact-form-7-39-beta/ I wanted to mention that some of these have changed. Until I found that reference it was a little bit of a pain to debug!

    For example a new URL redirect is

    $goURL = 'http://contactform7.com';
    $cfdata->set_properties( array( 'additional_settings' => "on_sent_ok: \"location = '".$goURL."';\"" ) );
  • Xavi Author says:

    Thanks a lot Vir J and Andrew, I’ll update the post ASAP.

  • Classic Mike says:

    Hi Thanks for the post. Just a heads up apparently the original developer has changed the way how you can get and modify the posted data in contact form 3.9. If you would like you can look the link here: http://contactform7.com/2014/07/02/contact-form-7-39-beta/

  • Tom says:

    Hi Xavi,

    When can we expect the ASAP update? I’m trying to use your code, but it’s not working with the new version of CF7.

  • alenb says:

    Passing the form object by reference in the function breaks feedback messages, though the message itself is sent through no worries

  • sikandar says:

    Superb, Thanks for this code

  • Piotr says:

    I want to create an form who will send email based on option selected from radio. Is it possible using contact form 7?

  • Philipp says:

    Whenever I activate my plugin the whole code is displayed on every single page of my website. Right above the actual content. What could that be?

  • Montina says:

    Hi Xavi,
    I m new in wp. I want to add two more fields in contact form and i m blind to do that. 1st I want to add date of birth which should use regex to check whether person is 18 yrs old or not.
    2nd I want to add Security number which again require some restrictions. can u help me plz I will be really thankful to u

  • Mike says:

    Cheers for this saved me a few hours researching :)

  • Faizyab says:

    Thumbs up!

  • Roee yossef says:

    Thanks for the article, i have a page with multiple forms and i’m am trying to send an event to analytics after a form is sent successfully.

    The thing is that i need a different event for each form, how can i get the form id (after submission) using PHP ?

  • Matías Saavedra says:

    Hellow

    First of all sorry about my english ( im from Southamerica )

    I have a question ..

    I have CF7 and i made a form , i need to change the subject of the email.

    For example: In the label Subject i used mail-tags like this

    “Email from the website – [nameperson] [lastname] [phonenumber]”

    The mail-tags works fine, but i want that the name and the lastname arrives in a capitalize format.

    Like this:

    “Email from the website – Hector Johnson 8238832”

    The problem is that the subject of the mail is like this.

    “Email from the website – hector johnson 8238832”

    I need a hook to change this please .. please help me with this issue.

    Thanks

  • Shahrukh says:

    Hello. Please help. Added this code to the file:

    add_action(‘wpcf7_before_send_mail’,’printDatas’);
    function printDatas($cf7) {
    global $wpdb;
    //declare your varialbes, for example:
    $id = $cf7->posted_data[“id”];
    $first_name = $cf7->posted_data[“your-name”];
    $email_txt = $cf7->posted_data[“email-id”];
    }

    In the template file I added this code: do_action(‘wpcf7_before_send_mail’);

    Did a redirect in the advanced settings of the Contact Form 7 did a redirect to the page where you display the data. But nothing is displayed what is the error?

  • Shahrukh says:

    Sorry
    add_action(‘wpcf7_before_send_mail’,’printDatas’);
    function printDatas($cf7) {
    global $wpdb;
    //declare your varialbes, for example:
    $id = $cf7->posted_data[“id”];
    $first_name = $cf7->posted_data[“your-name”];
    $email_txt = $cf7->posted_data[“email-id”];
    echo $first_name;
    echo $email_txt;
    }

Follow me for cool new products and interesting findings on graphic design, web development, marketing, startups, life and humor.


/*Twitter*/ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); /*Facebook*/ (function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=28624667607";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk')); /*Google+*/ window.___gcfg = {lang: 'en-GB'};(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();
Airbnb 25€ discount