Slide 1

Slide 1 text

1 Synadakis Angelos Using WordPress as a Framework

Slide 2

Slide 2 text

2 Contents What are we going to talk about today

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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.

Slide 6

Slide 6 text

6 WEB DEVELOPMENT ONLINE APPLICATIONS

Slide 7

Slide 7 text

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?

Slide 8

Slide 8 text

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/

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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!

Slide 11

Slide 11 text

11 How to build the rest?

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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!

Slide 16

Slide 16 text

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!

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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(); }

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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]

Slide 22

Slide 22 text

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;

Slide 23

Slide 23 text

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’);

Slide 24

Slide 24 text

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 ); }

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

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/

Slide 28

Slide 28 text

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