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 features 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 from the perspective of web applications. So, we will 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 WordPress themes
• The role of admin dashboard
• The role of plugins
• The role of widgets

The role of WordPress themes

Most 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. However, we can easily visualize themes 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 to create 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 views.

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 web application-specific structure. Let's visualize the common layout of WordPress using the following image:

Having looked at the structure, it's obvious that the Header, Footer, and the Main Content areas are mandatory even for web applications. However, 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 to target 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 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.

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 among other competitive frameworks. Most of you should be familiar with using the admin area for CMS functionalities. However, we will have to understand how each component in the admin area suits the development of web applications.

The admin dashboard

The dashboard is the location where all the users get redirected, once logged into the admin area. Usually, it contains dynamic widget areas with the most important data of your application. The dashboard can play a major role in web applications, compared to blogging or CMS functionality. The dashboard contains a set of default widgets that are mainly focused on the main WordPress features such as posts, pages, and comments. In web applications, we can remove the existing widgets related to CMS and add application-specific widgets to create a powerful dashboard. WordPress offers a well-defined API to create custom admin dashboard widgets and hence we can create a very powerful dashboard using custom widgets for custom requirements in web applications.

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 the static content of the site. Usually, we have static pages such as About Us, Contact Us, Services, and so on.

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 the 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. Generally, widgets are used in the sidebars of WordPress sites to display information such as recent members, comments, posts, and so on. However, in web applications, widgets can play a much bigger role as we can use widgets to split the main template into multiple sections. Also, these types of widgetized areas become handy in applications where the majority of features are implemented with AJAX.

The theme options panel can be used as the general settings panel of web applications where we define the settings related to templates and generic site-specific configurations.

Settings

This section involves general application settings. Most of the prebuilt items in this section are suited for blogs and websites. We can customize this section to add new configuration areas related to our plugins, 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 to add new sections is one of the key reasons for its flexibility.

The role of plugins

Under normal circumstances, WordPress developers use functions that involve application logic scattered across theme files and plugins. Some developers even change the core files of WordPress, which is considered a very bad practice. In web applications, we need to be much more organized.

In The role of WordPress themes section, 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. The plugins 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 this, plugins have the ability to extend other plugins. Since there are over 40,000 free plugins and a large number of premium plugins, sometimes you don't have to develop anything for WordPress applications. You can just use a number of plugins and integrate them properly to build advanced applications.

The role of widgets

The official documentation of WordPress refers to widgets as a component that adds content and features to your sidebar. From a typical blogging or CMS user's perspective, it's a completely valid statement. Actually, the widgets offer more in web applications by going beyond the content that populates sidebars. Modern WordPress themes provide a wide range of built-in widgets for advanced functionality, making it much more easier to build applications. 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 source code. The following screenshot shows a sample dynamic widgetized area. We can use the same technique for developing applications with WordPress:

Throughout these sections, we have 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, we can plan our application developed throughout this book.