Identifying the components of WordPress

WordPress comes up with a set of prebuilt components, which are intended to provide different features and functionality for an application. A flexible theme and powerful admin module act as the core of WordPress websites while plugins and widgets extend the core with application-specific features. As a CMS, we all have a pretty good understanding of how these components fit into a WordPress website.

Here our goal is to develop web applications with WordPress, and hence it is important to identify the functionality of these components in the perspective of web applications, so we are going to look at each of the following components, how they fit into web applications, and how we can take advantage of them to create flexible applications through a rapid development process:

• The role of the WordPress theme
• The role of the admin dashboard
• The role of plugins
• The role of widgets

The role of the WordPress theme

Many of us are used to seeing WordPress as a CMS. In its default view, a theme is a collection of files used to skin your web application layouts. In web applications, it's recommended to separate different components into layers such as models, views, and controllers. WordPress doesn't adhere to the MVC architecture, but we can easily visualize the theme or templates as the presentation layer of WordPress.

In simple terms, views should contain the HTML needed to generate the layout and all the data it needs should be passed to the views. WordPress is built for creating content management systems and hence it doesn't focus on separating views from its business logic. Themes contain views, also known as template files, as a mix of both HTML code and PHP logic. As web application developers, we need to alter the behavior of existing themes, in order to limit the logic inside templates and use plugins to parse the necessary model data to the views.

The structure of a WordPress page layout

Typically, posts or pages created in WordPress consist of five common sections. Most of these components will be common across all the pages in the website. In web applications, we also separate the common layout content into separate views to be included inside other views. It's important for us to focus on how we can adapt the layout into a web-application-specific structure. Let's visualize the common layout of WordPress using the following diagram:

Having looked at the structure, it's obvious that the Header, Footer, and Main Content areas are mandatory even for web applications, but the footer and comments section will play a less important role in web applications, compared to web pages. The Sidebar is important in web applications, even though it won't be used with the same meaning. It can be quite useful as a dynamic widget area.

Customizing the application layout

Web applications can be categorized as projects and products. A project is something we develop that targets the specific requirements of a client. On the other hand, a product is an application created based on the common set of requirements for a wide range of users. Therefore, customizations will be required on layouts of your product based on different clients.

WordPress themes make it super simple to customize the layout and features using child themes. We can make the necessary modifications in the child theme while keeping the core layout in the parent theme. This will prevent any code duplications in customizing layouts. Also the ability to switch themes is a powerful feature that eases the layout customization process.

In situations where we need to provide dynamic layouts based on user types, devices, or browsers, we can dynamically switch between different themes by writing custom functions.

The role of the admin dashboard

The administration interface of an application plays one of the most important roles behind the scenes. WordPress offers one of the most powerful and easy-to-access admin areas compared to other competitive frameworks. Most of you should be familiar with using the admin area for CMS functionalities, but we will have to understand how each component in the admin area suits the development of web applications.

Admin dashboard

The dashboard is the location where all the users get redirected, once they are logged in to the admin area. Usually it contains dynamic widget areas with the most important data of your application. The dashboard could play a major role in web applications, compared to blogging or CMS functionality. We can remove the existing widgets related to CMS and add application-specific widgets to create a powerful dashboard.

Posts and pages

Posts in WordPress are built for creating content such as articles and tutorials. In web applications, posts will be the most important section to create different types of data. Often, we will choose custom post types instead of normal posts for building advanced data creation sections. On the other hand, pages are typically used to provide static content of the site. Usually we have static pages such as About Us, Contact Us, and Services.

Users

User management is a must-use section for any kind of web application. User roles, capabilities, and profiles will be managed in this section by authorized users.

Appearance

Themes and application configurations will be managed in this section. Widgets and theme options will be the important sections related to web applications.

Settings

This section involves general application settings. Most of the prebuilt items in this section are suited to blogs and websites. We can customize this section to add new configuration areas related to our plugins that are used in web application development.

There are some other sections such as links, pages, and comments, which will not be used frequently in complex web application development. The ability for adding new sections is one of the key reasons for its flexibility.

The role of plugins

In normal circumstances, WordPress developers use functions, which involve application logic scattered across theme files and plugins. Some developers even change the core files of WordPress, which is considered to be a very bad practice. In web applications, we need to be much more organized. In the section The role of the WordPress theme, we discussed the purpose of having a theme for web applications. Plugins will be and should be used to provide the main logic and content of your application. In short, anything you develop for web applications should go inside plugins, instead of theme files.

The plugin architecture is a powerful way to add or remove features without affecting the core. Also, we have the ability to separate independent modules into their own plugins, making it easier to maintain. On top of that, plugins have the ability to extend other plugins.

The role of widgets

The official documentation of WordPress refers to widgets as a component that adds content and features to your Sidebar. In typical blogging or from a CMS user's perspective, it's a completely valid statement. In fact, widgets offer more in web applications by going beyond content that populates Sidebars. The following screenshot shows a typical widgetized Sidebar of a website:

We can use dynamic widgetized areas to include complex components as widgets, making it easy to add or remove features without changing the source code. The following screenshot shows a sample dynamic widgetized area. We can use the same technique to develop applications with WordPress:

Throughout these sections, we covered the main components of WordPress and how they fit into the actual web application development. Now we have a good understanding of the components in order to plan the application that we will be developing throughout this book.