Developing web platforms, using WordPress as a Framework - Άγγελος Συναδάκης

WordCamp Thessaloniki 2018

Το WordPress χρησιμοποιείται συνήθως ως εργαλείο για την κατασκευή κομψών ιστοσελίδων. Οι ιστότοποι ενδέχεται να διαφέρουν από απλές επιχειρηματικές παρουσιάσεις ως εντυπωσιακά καταστήματα ηλεκτρονικού εμπορίου, αλλά μπορεί επίσης να είναι πολύπλοκες ψηφιακές πλατφόρμες. Οι πλατφόρμες με προσαρμοσμένες λειτουργίες συνήθως κατασκευάζονται με πλαίσια MVC όπως Laravel, Yii2, κλπ. Αλλά τι γίνεται αν το WordPress μπορεί να κάνει την ίδια δουλειά εξίσου καλά; Σε αυτήν την παρουσίαση θα δούμε πώς χρησιμοποίησαν το WordPress για να δημιουργήσουν ιστότοπους με προσαρμοσμένες λειτουργίες. Πώς μπορούμε να διαχωρίσουμε το WordPress από την επιχειρησιακή λογική και να εφαρμόσουμε προσαρμοσμένες λειτουργίες ενώ αφήνουμε το WordPress να χειριστεί όλα τα υπόλοιπα (όπως διαχείριση χρηστών, διαχείριση βάσεων δεδομένων κλπ). Με αυτόν τον τρόπο, δημιουργούμε λειτουργίες που χρησιμοποιούν το WordPress, αλλά δεν εξαρτώνται από αυτό! Σημαίνει ότι οποιαδήποτε στιγμή δεν είναι το μέλλον μπορούμε να χωρίσουμε τα δύο και να πάρουμε το έργο μας αλλού. Αν και το μεγαλύτερο πλεονέκτημα είναι ότι ενώ οικοδομούμε τον πυρήνα της επιχείρησής μας μπορούμε ακόμα να χρησιμοποιήσουμε ό, τι είναι τόσο διάσημο για το WordPress!

WordPress is normally used as a tool to build elegant websites. Websites might vary from simple business presentations to impressive eCommerce stores, but they might also be complex digital platforms. Platforms with custom functionalities are usually built with MVC frameworks such as Laravel, Yii2, etc but what if WordPress can do the same job equally done? In this presentation we are going to see how they used WordPress to build websites with custom functionalities. How we can separate WordPress from business logic and implement customized functionalities while letting WordPress handle all the rest (such as user management, database handling, etc). In this way, we build functionalities that use WordPress but are not depended on it! Meaning that anytime in the future we can separate the two and take our project elsewhere. Though, the biggest advantage is that while building the core of our business we can still use everything that WordPress is so famous for!

Transcript

1. 1
   Synadakis Angelos
   Using WordPress as a Framework
   

   View Slide

2. 2
   Contents
   What are we going to talk about today
   

   View Slide

3. 3
   Let’s use WordPress as a Framework, but what is
   a Framework after all?
   Part 1
   What is a Framework
   A few words about WordPress and Web
   Development requests.
   Introduction
   What are we talking about?
   Contents
   What are we talking about today
   

   View Slide

4. 4
   WordPress is handling a lot of things… How to
   build the rest?
   Part 3
   How to build the business logic
   Any thoughts? Questions maybe?
   Epilogue
   Q&A
   What can WordPress do as a Framework?
   Part 2
   WordPress as a Framework
   

   View Slide

5. 5
   Social Mind is a unique Digital Marketing agency that
   helps businesses drive results. We are doing so by
   About Social Mind
   creating awesome Websites, eCommerce stores and
   mobile applications, by designing and launching online
   advertising campaigns, by implementing loyalty systems,
   etc.
   During the last 5 years we had the great opportunity to
   work with more than 150 different companies from
   various business sectors and design together digital
   strategies and tools that produce traction, sales and
   awareness.
   

   View Slide

6. 6
   WEB DEVELOPMENT
   ONLINE APPLICATIONS
   

   View Slide

7. 7
   WEB DEVELOPMENT
   WordPress is normally used as a tool to build elegant
   websites.
   Websites might vary from simple business
   presentations to impressive eCommerce stores, but
   they might also be complex digital platforms with
   custom functionalities and requests.
   Such complicated platforms with custom functionalities
   are usually built with MVC frameworks such as Laravel,
   Yii2, etc but what if WordPress can do the same job
   equally done?
   

   View Slide

8. 8
   Pre-Built Modules
   Frameworks take care of
   various common
   functionalities.
   Stability
   Frameworks offer stability
   and security.
   Speed
   Frameworks make coding
   fast since we have a very
   big code reusability rate.
   What is a Framework?
   A Framework is a basic platform that allows
   us to develop web applications.
   In other words, it provides structure. By
   using a Framework, you will end up saving
   loads of time, stopping the need to produce
   repetitive code, and you’ll be able to build
   applications rapidly.
   Without a Framework in place, it gets much
   more difficult to produce applications since
   you’ll have to repeatedly code a lot of
   functionalities. You’ll also have to execute
   the connection between the database and
   whatever application you develop from
   scratch.
   Meanwhile, using a Framework makes it
   easier for you to ensure this connection.
   Source: https://onextrapixel.com/an-overview-of-php-framework-guides-for-developers/
   

   View Slide

9. 9
   What to expect from a Framework
   Factor
   06 The Framework should be supported
   from an active community to help
   new users and address issues.
   Community
   Factor
   04 Of course, a Framework should be
   secure.
   Security
   Factor
   05 A Framework should be well
   documented in order to help the
   developer use it.
   Documentation
   Factor
   03 Framework should have a build-in
   user management and
   authentication system.
   User Management
   Factor
   01 Framework need to take care of the
   communication between the DB
   and the application.
   Database Management
   Factor
   02 Framework is responsible for
   speed, caching, etc.
   Performance
   Some first thoughts
   

   View Slide

10. 10
    WordPress offers extended
    tools for media
    management.
    Media Management
    Database management
    (CRUD) is handled by
    WordPress.
    Database CRUD
    Tons of themes to choose
    from! Also, it is very easy to
    alter design at will!
    There are a lot of plugins
    that take care of Caching.
    Design
    Caching
    WordPress has a powerful
    and fully extensible admin
    dashboard.
    Admin Dashboard
    User management and
    Authentication can be
    handled completely by
    WordPress.
    User Management
    WordPress is SEO friendly
    (permalinks, etc). There are a
    lot of plugins offering more
    SEO tools as well.
    The developer can use
    hooks, actions and filters to
    extend WordPress
    functionalities.
    SEO
    Filter and Hooks
    WordPress as a Framework
    What can WordPress do as a Framework?
    Translations, API, Plugins and many, many, many… more!
    

    View Slide

11. 11
    How to build the rest?
    

    View Slide

12. 12
    How to build the
    custom functionalities?
    OK, so far WordPress is taking care of a lot of stuff, but how are we
    going to implement the rest of the functionalities we need?
    Custom functionalities will be implemented as a plugin. A plugin
    that will handle and serve all of the project’s custom needs.
    While writing the plugin we should have two things in our mind:
    1. We’d like to be tied up with WordPress as less as
    possible.
    2. We’d like to take advantage of WordPress as much
    as possible.
    

    View Slide

13. 13
    WP Boilerplate Plugin
    We are going to use WordPress Boilerplate Plugin.
    The steps are:
    1. Download the plugin from:
    https://github.com/DevinVinson/WordPress-Plugin-
    Boilerplate
    2. Make all the appropriate changes to give to the
    plugin a unique name. For instance, if we want to
    rename the plugin to “My Awesome App”, then:
    • Rename files from plugin_name to my_awesome_app
    • Change plugin_name to my_awesome_app
    • Change PLUGIN_NAME_ to MY_AWESOME_APP_
    3. Upload the plugin on WordPress and activate it.
    

    View Slide

14. 14
    WP Boilerplate Plugin
    OR you can use https://wppb.me/ to have all the
    renames generated automatically with a form.
    

    View Slide

15. 15
    WP Boilerplate Plugin
    By default, the plugin comes with the structure shown in
    the image on the right.
    On the admin folder we are going to write the code that
    has to do with the backend, while on the public folder
    we will write the frontend. Languages folder will held
    our .po/.mo files for the translations and the includes
    folder has all the “glue code” that does the magic.
    Let’s create a basic functionality
    to see how it works!
    

    View Slide

16. 16
    Let’s print something
    Let’s assume that we have create a code that does some
    functionality for us and now we want to print the
    outcome to the user.
    To do so, the easier way is to register a shortcode and
    then use it a page to print the outcome of our
    functionality.
    This can be done in 4 easy steps!
    

    View Slide

17. 17
    Create a page and use
    the shortcode.
    Create a page
    Register a JS file that
    includes (maybe) some of
    the functionality.
    Register a JS file
    Register a shortcode that
    calls a function.
    Register a Shortcode
    Create the function that
    does the magic and
    returns the outcome.
    Create a function
    Print Something!
    How to print the outcome of our functionality
    

    View Slide

18. 18
    Register a shortcode
    A. Go to the file includes/class-plugin-name-loader.php and add the following code:
    protected $shortcodes;
    Public function __construct () {
    // …
    $this->shortcodes = array();
    }
    public function add_shortcode( $tag, $component, $callback, $priority = 10, $accepted_args = 2 ) {
    $this->shortcodes = $this->add( $this->shortcodes, $tag, $component, $callback, $priority, $accepted_args );
    }
    public function run() {
    //…
    foreach ( $this->shortcodes as $hook ) {
    add_shortcode( $hook['hook'], array( $hook['component'], $hook['callback'] ), $hook['priority'],
    $hook['accepted_args'] );
    }
    }
    Source: https://github.com/JoeSz/WordPress-Plugin-Boilerplate-Tutorial/blob/master/plugin-name/tutorials/register_a_shortcode_in_plugin.php
    

    View Slide

19. 19
    Register a shortcode
    B. Go to the file includes/class-plugin-name.php and add the following code:
    private function define_public_hooks() {
    $this->loader->add_shortcode( "shortcode-name", $plugin_public, "shortcode_function", $priority = 10,
    $accepted_args = 2 );
    }
    Source: https://github.com/JoeSz/WordPress-Plugin-Boilerplate-Tutorial/blob/master/plugin-name/tutorials/register_a_shortcode_in_plugin.php
    C. Go to the file public/class-plugin-name-public.php and add the following code:
    function shortcode_function( $atts ) {
    ob_start();
    include_once( 'partials/plugin-name-myfile.php');
    return ob_get_clean();
    }
    

    View Slide

20. 20
    Register a JS file
    A. Go to the file public/class-plugin-name-public.php and add the following code:
    public function enqueue_scripts() {
    wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . ‘js/plugin-name-public.js', array(
    'jquery' ), $this->version, false );
    }
    Source: https://github.com/JoeSz/WordPress-Plugin-Boilerplate-Tutorial/blob/master/plugin-name/tutorials/register_a_shortcode_in_plugin.php
    

    View Slide

21. 21
    Create a Page
    A. Go to WordPress Dashboard and add a new page. Or edit an existing one. Then, add the
    shortcode to the page.
    [shortcode-name]
    

    View Slide

22. 22
    Create a Function
    A. Go to the file partials/plugin-name-myfile.php and add create your function:
    echo “Hello World!”;
    Here, you can build all the business logic of your project. You can:
    • echo things if you want to print something
    • use the js files you have included in the previous steps
    • use all WordPress functionalities!
    require_once("../../../../../wp-load.php");
    $currentUser = wp_get_current_user();
    echo $currentUser->user_firstname;
    

    View Slide

23. 23
    Good Practice
    In the public folder, create a file called my-plugin-name-functions.php and add all the custom functions you will need.
    function print_my_name($name) {
    if ($name) {
    echo $name;
    } else {
    echo “How are you?”;
    }
    }
    and then, use these functions to all your other files.
    include_once('my-plugin-name-functions.php’);
    echo print_my_name(‘Angelos’);
    

    View Slide

24. 24
    Admin Panel Page
    Sometimes we need a backend functionality as well.
    Maybe to give to the admin some settings or maybe
    display some stats or whatever.
    Easily enough, we can create a backend page as well.
    Simply create the appropriate files to the admin folder.
    These files will handle all the business logic and the
    interconnection with WordPress.
    If you want to add the settings page in the Dashboard
    menu, then simply go to admin/class-plugin-name-
    admin.php file and add the desired menu items in the
    display_admin_page() function.
    //Add a menu item at the WP dashboard
    public function display_admin_page() {
    add_menu_page(
    ‘My Settings Page’, //page_title
    ‘My Title’, //$menu_title
    ‘manage_options’, //$capability
    ‘my-slag-admin’, //$menu_slug
    array($this, ‘showPage’), //function
    ‘my_icon.png’, //$icon_url
    ‘81.0’ //$position_on_menu_from_top
    );
    }
    

    View Slide

25. 25
    What about the database?
    Working with the database is pretty easy since WordPress is doing most part of the job! Let’s see a quick example:
    global $wpdb;
    $rows = $wpdb->get_results(“SELECT * FROM my_table");
    return $rows;
    We just declare the $wpdb global item and it takes care of all the rest! We only need to prepare our
    SQL Queries depending on the database structure, the data we need, etc.
    

    View Slide

26. 26
    Good Practice
    Since we need to be as less depended on WordPress as possible, it is highly recommended to create some extra tables
    on the database to store our data and don’t use the default ones (even though we can).
    In this way, at any time we decide to take our project elsewhere (than WordPress) we can just export our tables from the
    database and import them to the new one and continue from there. The only thing that we’ll have to do is change the
    wpdb functions with the corresponding one from our new Framework.
    

    View Slide

27. 27
    WordPress Functions
    Full access to WordPress
    funcitions.
    Independent
    Business logic is separated
    from WordPress. They only
    connect on WordPress
    functions.
    Custom Needs
    PHP, HTML, CSS, JS – Use
    everything you need to
    build the required custom
    functionalities.
    Conclusion
    In this way you can build all the custom
    functionality – the business logic – using
    PHP, HTML, CSS, JS or whatever else you
    need.
    You can still use WordPress to handle all the
    rest such as user management, db handling,
    etc.
    In this way, your code is “WordPress
    independent” meaning that you only use
    WordPress’s functions. At anytime, you can
    take your code some-platform else, change
    the “glue code” and you are ready-to-go!
    Source: https://onextrapixel.com/an-overview-of-php-framework-guides-for-developers/
    

    View Slide

28. 28
    Thank you!
    www.socialmind.gr
    Monastiriou 90, Thessaloniki
    +30 2310551107
    Thessaloniki, Greece
    Ethinikis Antistaseos 11,
    Kaisariani, Athens
    +30 2107243276
    Athens, Greece
    info@socialmind.gr
    

    View Slide