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
2. 2 Contents What are we going to talk about today
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
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
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.
6. 6 WEB DEVELOPMENT ONLINE APPLICATIONS
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?
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/
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
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!
11. 11 How to build the rest?
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.
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.
14. 14 WP Boilerplate Plugin OR you can use https://wppb.me/ to have all the renames generated automatically with a form.
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!
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!
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
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
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(); }
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
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]
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;
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’);
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 ); }
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.
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.
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/
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