{"id":4838,"date":"2014-02-11T17:01:10","date_gmt":"2014-02-11T22:01:10","guid":{"rendered":"https:\/\/wpshout.com\/?p=4838"},"modified":"2015-02-18T16:24:00","modified_gmt":"2015-02-18T16:24:00","slug":"wordpress-front-controller","status":"publish","type":"post","link":"https:\/\/wpshout.com\/wordpress-front-controller\/","title":{"rendered":"WordPress and the Front Controller Design Pattern"},"content":{"rendered":"

Computer programmers love to think about systems. In doing that, they generalize how they work and how we can classify them. So you’ll find lots of people talking about “design patterns” \u2014 both loved and hated ones \u2014 that are common across the architecture of many different software systems.<\/p>\n

One of my favorite patterns \u2014 having faced down more than a few legacy PHP apps that would have been much easier to change if they’d used it initially \u2014 is the Front Controller pattern. And WordPress uses it to powerful effect. Understanding the front controller pattern, how WordPress uses it, and what effect that has is really useful and helps you wrap your head around some other things about WordPress, so we’ll dive in.<\/p>\n

What is the Front Controller Pattern?<\/h2>\n

Like a house with only one door, the front controller is the only way that people are allowed to talk to and get data from an application.<\/p><\/blockquote>\n

Put simply, the front controller pattern is observed in a system that only has one entry point. Like a house with only one door, the front controller is the only way that people are allowed to talk to and get data from an application. This pattern is popular on the web because it makes it easier to make good URLs (in the WordPress world we like to call that “pretty permalinks”) and saves us from repeating ourselves in many different scripts building up the same structure we need to use to respond to a web request (a request for data from our website).<\/p>\n

Just for clarity, the “opposite” pattern to the front controller is the “page controller”<\/a> which is actually how the administration section of WordPress is handled. In a page controller system, each thing that person might want is handled by a separate script or web page.<\/p>\n

I’m not gonna dive too deep into the specifics of each as concepts here. But there are a number of good resources on the net about these patterns generally, I recommend this comparison of the two<\/a> from Uchitha Ranashinghe (though the images are broken the text table is a great comparison), and the definitions from Microsoft of the front<\/a> and page<\/a> controller patterns.<\/p>\n

WordPress URLs and the Front Controller<\/h2>\n

If you’ve spent much time in WordPress you’ve probably realized that the theme doesn’t have a file in it for every page on your site, and that your theme isn’t just responding with raw pages to the front of your site. I remember when I was just getting started with it, I wanted to put a raw HTML page into my theme and have it accessible on my site. And it didn’t work. Now I know that’s because of the front controller that WordPress uses.<\/p>\n

\"tracks-in-snow-converge\"
Multiple paths lead to a single place<\/figcaption><\/figure>\n

We all know that there are many different ways the URLs of our WordPress site can look. You’ve probably seen the “ugly” structure at least once before, which looks something like:<\/p>\n

https:\/\/wpshout.com\/?p=4838<\/a><\/p><\/blockquote>\n

Some of your will likely know, but some of you may not, that this is identical to:<\/p>\n

https:\/\/wpshout.com\/index.php?p=4838<\/a><\/p><\/blockquote>\n

The server software \u2014 Apache of Nginx \u2014 massages those two so they work the same. It’s also possible for them to massage less obvious things into this format. Perhaps, something like this:<\/p>\n

https:\/\/wpshout.com\/wordpress-front-controller\/<\/a><\/p><\/blockquote>\n

In Apache, this is done through the mod_rewrite<\/code> module, which you usually interact with in a .htaccess<\/code> file. For Nginx, the term of art is less obscure: it’s the configuration. But in either case, all three of these URLs will get from our WordPress installation here the exact same thing \u2014 this article. They’re all hitting the WordPress front controller and finding this article \u2014 the first two through the\u00a0ID, the last through a bit more complex a procedure \u2014 and\u00a0rendering the page through our theme. Pretty cool, right?<\/p>\n

What the WordPress Front Controller Does<\/h2>\n

As you may be thinking after that the WordPress front controller is your index.php<\/code> file. The root index.php<\/code> file to be exact (since WordPress like many other PHP apps also has a ton of others). The root index.php<\/code> file of your theme is<\/em> your front controller. All requests on the front side of your site \u2014 whether for search results, a tag archive, a static page, or a blog index page \u2014 gets rooted through the index.php<\/code> file.<\/p>\n

So what’s in there? Well, not much really:<\/p>\n

<?php\n\/**\n * Front to the WordPress application. This file doesn't do anything, but loads\n * wp-blog-header.php which does and tells WordPress to load the theme.\n *\n * @package WordPress\n *\/\n\n\/**\n * Tells WordPress to load the WordPress theme and output it.\n * @var bool\n *\/\ndefine('WP_USE_THEMES', true);\n\n\/** Loads the WordPress Environment and Template *\/\nrequire( dirname( __FILE__ ) . '\/wp-blog-header.php' );\n<\/code><\/pre>\n
If you’re at all familiar with PHP \u2014 or almost any other \u2014 programming syntax, you’ll notice that much of this file is comments. Only two lines of actual code exist in it.<\/p>\n
A constant \u2014 WP_USE_THEME<\/code> is defined, and then another file is required (which is to say included in the execution of this file). That’s it.<\/p>\n
We could follow the chain of require<\/code>s and definitions along the chain of WordPress’s functioning all the way until your page is rendered and returned, but that’s far past the sane scope of one single internet article. And well past what you need to understand to know the front controller pattern.<\/p>\n
Things to know about the WordPress front controller<\/h2>\n
So what have we learned?<\/p>\n