Implementing the MVC Pattern in WordPress Plugins

Follow along at:
http://iandunn.name/wp-mvc

Ian Dunn <ian@iandunn.name>
Automattic, Inc

Intended Audience

Mid-level plugin developers.
Many principles/techniques can be used in theme development too.

Interaction

Ask questions if anything's unclear
Jump in with comments, tips, etc

Overview

Intro to MVC
Implementing it in WordPress plugins
Browsing WordPress Plugin Skeleton
Closing
Q&A at the end of each section

MVC: Distilled

This is bad:

<html>
<head><style type="text/css">
body { background-color: #E8E8E8; font-family: Arial; }
</style></head>
<body>
<h1>Dolor Sit Ipsum Lorem Amet</h1>
<?php
$x = get_some_data( $y );
$z = mysql_query( "SELECT * FROM foo WHERE z = ". $z );

echo '<div>z:'. $z[ 'foo' ] .'</div>';
?>
<script type="text/javascript">
function foo() {
if ( bar ) alert( 'bar' );
else alert( 'foo' );
}
</script>
</body></html>

MVC: Distilled

This is better:

<?php

function controller() {
$x = get_some_data( $y );
$z = model( $x );
require( '/views/foo.php' );
}

function model( $x ) {
$z = mysql_query( "SELECT * FROM foo WHERE z = ". (int) $z );
return $z;
}

?>

MVC: Distilled

This is better:

<html>
<head>
<style type="text/css">
<link rel="stylesheet" type="text/css" href="/css/main.css" />
</style>
</head>

<body>
<h1><?php echo $heading; ?></h1>

<div>z: <?php echo $z[ 'foo' ]; ?></div>

<script type="text/javascript" src="/javascript/main.js"></script>
</body>
</html>

MVC: Why Should I Care?

Organization and readability
Flexability and code re-use
skin application easily b/c views are separated models are more abstract/independent example: export function, separate generating raw csv from echo'ing headers, etc. then can send or browser or call from wp-cli script
Ease of maintenance
Programming is a craft
web development is a subset of the software engineering discipline if you want to grow as a programmer, you'll need to learn about and embrace best practices

MVC: What Is It?

Stands for Model-View-Controller
It's a design pattern
a design pattern is a formal best practice something developers have reached a consensus about not a detailed perscription for implementation, but generic, abstract approach for similar situations just like oop, it's not new snippet or different tangible output just a different way to structure the code you already have.
Separation of concerns and code re-use
main points are separation of concerns and code reusability separtation of concerns: kinda like modularity, also allows you to more easily have front-end dev working on views while back-end dev works on models reuse: same idea behind get_template_part() - have a view that you use over and over in different places, DRY
Dominant pattern for web applications
Zend Framework, CodeIgnitor and CakePHP all use it this isn't the holy grail of web patterns. there is some criticism of it several variant applications of principles (MVP, MVVM, etc) also some alternatives patterns, but none have really caught on so far

MVC: What Does It Look Like?

Separates components into 3 parts

Views: The user interface
HTML, CSS, maybe JavaScript
Models: The business logic layer
Create and store the data Domain/business logic worker bee
Controllers: The application logic layer
Route requests through the application kind of like traffic cops, or logisticians or manager

MVC: What Does It Look Like?

Image: Understanding Model-View-Controller

MVC: What Does It Look Like?

MVC: Views

Only the presentation of the data - HTML/CSS
the user interface / the presentation of the data sometimes js is included in view, depending on what it's doing. line is kinda blurry never put html/css/js inline w/ php (also never put css or js inline w/ html, similar principles)
Use inline PHP, but sparingly
Just for basic control structures, to output variables
No data manipulation
Doesn't call models to get data, Controller gets data from models, then passes it to view

MVC: Views

/views/class-name/metabox-example.php

<p>Meta box introduction / user instructions</p>

<table>
  <tr class="alternate-row">
    <th>Example Box Field:</th>
    <td>
      <input
        name="example-box-field"
        type="text"
        value="<?php echo esc_attr( $example_box_field ); ?>" />
      </td>
  </tr>
</table>

MVC: Models

Data layer
create, manipulate, store data reading/writing to db define the data - e.g. a function that you pass a price and zip code and it returns the tax rate
Handles business/domain logic
Does the heavy lifting

MVC: Models

/models/shopping-cart.php

function calculate_tax( $items, $zip_code ) {
	$tax = 0.0;
	$tax_rate = mysql_fetch_assoc( mysql_query("
		SELECT rate
		FROM tax_rates
		WHERE zip_code = " . (int) $zip_code
	) );
	
	foreach( $items as $item )
		$tax += $item->price * $tax_rate[ 'rate' ];
	
	return $tax;
}

MVC: Controllers

Direct traffic within the application
aka route requests
Collect data from models, pass to views
Doesn't maniuplate the data

MVC: Controllers

/controllers/custom-post-type.php

function markup_meta_boxes( $post, $box ) {
	$example_box_field = get_post_meta(
		$post->ID, 'example-box-field', true
	);
	
	require_once '/views/class-name/metabox-example-box.php';
}

MVC

Fat Models, Skinny Controllers

Image: MVC - Fat Models and Skinny Controllers

MVC

Any questions / Comments / Tips?

WP + MVC: Introduction

Now we can move on to implementing MVC in plugins
now that we know what mvc is, and why we should use it, we can talk about practical how to implement them in the context of a wp plugin

WP + MVC: Views

Put all HTML/CSS/JavaScript in separate files
Use wp_enqueue_script() and wp_enqueue_style()
other methods are usually bad for various reasons

WP + MVC: Views

Include HTML files from a controller function instead of echo'ing

public function markup_meta_box( $post ) {
	$example_box_field = get_post_meta( $post->ID, 'example-box-field' );
	
	require_once( dirname( __DIR__ ) . '/views/class-name/metabox-example-box.php' );
}

WP + MVC: Views

Use output buffering to return a view file as a string
when you need the controller to return a string (like shortcodes)

public function shortcode_example( $attributes ) {
	ob_start();
	require_once( dirname( __DIR__ ) . '/views/shortcode-example.php' );
	$output = ob_get_clean();
	
	return $output;
}

WP + MVC: Views

Combine multiple items into a single controller and view
like when marking up metaboxes, or settings

WP + MVC: Views

public function markup_fields( $field ) {
	switch( $field[ 'label_for' ] ) {
		case 'field-example1':
			$foo = '123';
		break;
		
		case 'field-example2':
			$bar = 'abc';
		break;
	}
	
	require( dirname( __DIR__ ) . '/views/wpps-settings/page-settings-fields.php' );
}

WP + MVC: Views

<?php if( $field[ 'label_for' ] == 'field-example1' ) : ?>

	<input id="field-example1" name="field-example1" class="regular-text" value="<?php esc_attr_e( $this->settings[ 'field-example1' ] ); ?>" />
	<span class="example"> Example value</span>

<?php elseif( $field[ 'label_for' ] == 'field-example2' ) : ?>

	<textarea id="field-example2" name="field-example2" class="large-text" /><?php echo esc_textarea( $this->settings[ 'field-example2' ] ); ?></textarea>
	<p class="description">This is an example of a longer explanation.</p>

<?php endif; ?>

WP + MVC: Models/Controllers

Break them into separate classes
some devs break them, but i like to keep together for larger, more complex projects, probably good to break apart
Or use unofficial @mvc tag in phpDoc to keep them straight

WP + MVC: Models/Controllers

/**
* Validates submitted setting values before they get saved to the database. Invalid data will be overwritten with defaults.
* @mvc Model
* @author Ian Dunn <ian@iandunn.name>
* @param array $newSettings
* @return array
*/
public function validate_settings( $new_settings ) {
	// ...
	
	return $new_settings;
}

WP + MVC: Models

Called by controllers or other models
Filter callbacks are usually models
shortcodes are an exception to that, they're controllers even though they're glorified filters

public static function add_custom_cron_intervals( $schedules ) {
	$schedules[ 'ten_minutes' ] = array(
	'interval'	=> 60 * 10,
	'display'	=> 'Every 10 minutes'
	);
	
	return $schedules;
}
add_filter( 'cron_schedules', __CLASS__ . '::add_custom_cron_intervals' );

WP + MVC: Controllers

Action callbacks are usually controllers

public static function save_user_fields( $userID ) {
	$userFields = self::validate_user_fields( $userID, $_POST );
	
	update_user_meta( $userID, 'user-example-field1', $userFields[ 'user-example-field1' ] );
	update_user_meta( $userID, 'user-example-field2', $userFields[ 'user-example-field2' ] );
}
add_action( 'save_post', __CLASS__ . '::save_user_fields' );

WP + MVC

Any questions / Comments / Tips?

WP + MVC: Plugin Skeleton

Implemented these ideas in WordPress Plugin Skeleton
Browse code
Fork on GitHub

Takeaways: MVC

HTML/CSS/JavaScript in separate files from PHP (and each other)
Application logic and business logic in separate functions

Takeaways: WP + MVC

Action callbacks are usually controllers
Filter callbacks are usually models
Output buffering to capture views into a string
Single callback/view to markup settings, etc

Additional Resources

Starters / Examples

WordPress Plugin Boilerplate by Tom McFarlin
WP MVC by Tom Benner
Tagregator by Ian Dunn
swpMVC by Streetwise Media
WordPress Plugin Skeleton by Ian Dunn
Tina MVC by Francis Crossen
WordPress Plugin Kickstarter by Vasyl Martyniuk
PW_Archives by Phillip Walton

Implementing the MVC Pattern in WordPress Plugins

Follow along at: http://iandunn.name/wp-mvc

Intended Audience

Interaction

Overview

MVC: Distilled

This is bad:

MVC: Distilled

This is better:

MVC: Distilled

This is better:

MVC: Why Should I Care?

MVC: What Is It?

MVC: What Does It Look Like?

MVC: What Does It Look Like?

MVC: What Does It Look Like?

MVC: Views

MVC: Views

MVC: Models

MVC: Models

MVC: Controllers

MVC: Controllers

MVC

Fat Models, Skinny Controllers

MVC

Any questions / Comments / Tips?

WP + MVC: Introduction

WP + MVC: Views

WP + MVC: Views

WP + MVC: Views

WP + MVC: Views

WP + MVC: Views

WP + MVC: Views

WP + MVC: Models/Controllers

WP + MVC: Models/Controllers

WP + MVC: Models

WP + MVC: Controllers

WP + MVC

Any questions / Comments / Tips?

WP + MVC: Plugin Skeleton

Takeaways: MVC

Takeaways: WP + MVC

Additional Resources

MVC in General

MVC in WordPress

Criticism / alternatives

Starters / Examples

Q&A

Any questions / Comments / Tips?

Follow along at:
http://iandunn.name/wp-mvc