Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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!

WordPress Greek Community

December 15, 2018
Tweet

More Decks by WordPress Greek Community

Other Decks in Technology

Transcript

  1. 1
    Synadakis Angelos
    Using WordPress as a Framework

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

  6. 6
    WEB DEVELOPMENT
    ONLINE APPLICATIONS

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

  11. 11
    How to build the rest?

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

  28. 28
    Thank you!
    www.socialmind.gr
    Monastiriou 90, Thessaloniki
    +30 2310551107
    Thessaloniki, Greece
    Ethinikis Antistaseos 11,
    Kaisariani, Athens
    +30 2107243276
    Athens, Greece
    [email protected]

    View full-size slide