WordPress Architecture – The Building Blocks of Web Publishing

(Reading time: 6 – 10 minutes)

Once again, the multi-talented Deacon provides another guest post. This time, we get the bird’s eye from 50,000 feet on the architecture and structure of the WordPress publishing platform. WordPress really is composed of building block components, something not always easy to see when staring at a dozen lines of code deep in the bowels of functions.php. Deacon breaks it down!

WordPress Architecture – The Building Blocks of Web Publishing

By Sean “Deacon” Neprud

WordPress snaps together like Legos

I’m a firm believer that form and content are closely related. Understanding how WordPress works, and how a WordPress site can be structured will help to create the vision for your site. The content you create, and how you create it, is intrinsically related to the structure and organization of your web site.

With that in mind, this may help you to develop your own website.

Programming language background

Most – if not all – modern web applications are programmed using two or more programming languages, and WordPress is no exception. WordPress is functionally based on PHP and MySQL. The presentation is based on HTML and CSS. Adminstration is handled in part using Javascript. Here’s what you can expect to see in various parts of the WordPress code base:

• MySQL – This is a database that stores all of the information you enter into WordPress.  The title, content, and data (author, time, categories, etc) for each post or page are all stored in the database
• PHP – PHP is a web programming language that can do stuff with the data in the database, and use variables, operators, control structures, and functions.  The output of PHP is HTML, which your browser then reads.
• HTML – basic internet language.  The server throws a bunch of HTML at your browser, your browser displays a web page.
• CSS – CSS organizes and designs the HTML.  Color, size, location, images, etc, are all determined by the CSS
• JAVASCRIPT – is the key enabler for WordPress on the administration side. If you only work with themes and styling, you won’t have much interaction with the javascript underpinning of the interface. If you dig deep into WordPress hackery, you’ll need to pick up some Javascript.

Fortunately, all of these programming languages are fairly easy to learn.

Basic WordPress, or WordPress straight out of the box

WordPress displays three main kinds of content: posts, pages and sidebars. Be default, the header, footer, and sidebar(s) remain the same on every webpage of your site. Unless you customize your theme otherwise, only the content area changes.

Posts are blocks of content that are then displayed alone or as groups on webpages. Posts are shown in reverse chronological order on the homepage. Conceptually, this format creates a website where the most recent post is the most important, and the older a piece of content is, the less important it becomes. You can view a single post, or you can click on various archives of posts to see only posts of that type, such as by date, a certain category, or a certain tag. WordPress can also create lists of posts displayed by category, tag, or other attribute you choose.

Pages are content that is always on a certain webpage.  They are “static” (though they are still dynamic in the web programming sense of the word). Typically, pages display content about topics that change much less frequently than content displayed using posts. For example, your contact form should go on a page.

Sidebar material represents a 3rd type of content, which cannot be easily characterized. Basically, in sidebars, anything goes: newsletter signup forms, RSS feeds, lists of recent posts, comments, whatever you choose.

Now let’s take a look at how WordPress actually does it’s business.

Building Blocks of WordPress

WordPress is composed of 4 types of building blocks: Regions, loop, templates and metadata. Let’s take a closer look at each building block:

1. The Regions: Each part of a web page generated by WordPress is part of a designated region. There are four default regions on a WordPress page: Header, Footer, Sidebar(s), and content. You can add regions other than these.
2. The Loop: The loop controls which posts appear in each template. The Loop is a basic engine of WordPress. It collects posts from the database and displays them. The front page is a loop of all your posts. An archive of a category, date, tag, etc, is a Loop of posts of just that type.
3. The Templates: Control the layout and appearance of each type of WordPress generated web page:
   • A template is a PHP file that describes what information is contained in a certain page or element
   • Every webpage has a template. index.php is the template for the main page, page.php is the template for your pages, archive.php is the template for looking at a category or date archive, etc.
   • Many regions have a template. header.php, sidebar.php, footer.php are templates for the content in those regions of the webpages, comments.php describes content of that region, etc. The individual posts do NOT have a template to decribe their content. This is done in the Loop.
   • A theme is just a collection of templates and a CSS file.
   • You can create custom templates to extend WordPress beyond it’s default content presentation
4. The Metadata: Each web page generated by WordPress has descriptive metadata allowing better indexing by search engine tools.
   • Content has metadata attached, such as author, time, and very importantly, category and tag. You can use metadata to organize and display content.
   • Categories and Tags allow for a 2-D organization of content (which can be limiting)
   • Categories can have custom templates, not sure about tags.

From these four simple tools, and almost infinite number of websites can be designed!

Even so, everyone wants to be unique, and WordPress is easy to customize.

Customizing WordPress

The primary (and quickest) way to customize your WordPress website is by changing your theme. Themes change how your site is displayed by changing the styling on individual elements. For example, the theme defines the font style, size and weight for each type of text. While most customization is done by modifying the theme templates and CSS file, there’s a few other, more advanced ways to customize WordPress. Here’s a few simple guidelines:

• Plugins can add new building blocks independently of the WordPress core. After theme customization, plugins are the fastest and easiest way to modify WordPress behavior.
• It’s easy to customize the supplied building blocks. Simply modify the functions in your template files as necessary.
• It’s harder to add new building blocks to WordPress. This may require changes in how the WordPress loop performs. Be careful here!

WordPress is a very rich platform, and this “view from 50,000 feet” barely does it justice. But keeping these simple principles and guidelines in mind will help you understand how WordPress operates, and how you can use WordPress to achieve your goals.

Sean Neprud operates Bad Deacon Design under the moniker Deacon (surprise!), where he works in a range of mediums from wood block to web design.