Contact Us Book a visit Download Brochure

Understanding WordPress: Content and Design

March 21, 2022

Introduction

WordPress is by far the most popular tool used to define websites (W3Techs, 2021).  One of the main reasons is its flexibility: it is an open-source platform that counts on thousands of extensions to both extend/modify the functionality of the website and to apply different designs.

However, at first, WordPress might not seem the easiest-to-use platform. In fact, there are other platforms, such as Wix, that are easier to use, although of course, they do not offer all the options that WordPress does (Weston, 2020).

WordPress can be classified as a web content management system, and one of the main goals and strongest advantages of this type of platforms is to be able to define the content of the website independently of its design [1]. With WordPress, you can define the content of your website (posts, products, content of the main pages such as About and Contact, etc.) and then choose a design for them. And what it is even better: you can change the design at any time.

Separating the definition of the content from the definition of the design has many benefits. A very obvious one is that we can change the design of our website in, let’s say two years, without the need of redoing the whole website (as you have to do with other platforms, such as with the mentioned Wix (Weston, 2020)). This benefit is particularly important when we are planning to define a website with a lot of content, such as dozens (or even hundreds) of products and posts.

However, in order to benefit from this advantage, and in general, to benefit from all the flexibility that WordPress offers, we really need to understand properly the main concepts the platform is based on and make an appropriate use of them. Otherwise, it will not be very difficult to define a website that does not keep these concerns (content and design) separately and that could be difficult to manage and modify in the future.

Thus, I will summarize in this post the main concepts of WordPress with the aim of making the platform more accessible for everyone and getting the most of it. Note that, for the sake of simplicity, I might lose a bit of precision in the naming and definition of the concepts, but this is for a reason: in fact, one of the difficulties of WordPress is the official terminology which might result confusing.

When describing the main concepts of WordPress, I will also include some concepts related to WooCommerce, the WordPress extension (plugin) that enables the definition of online stores in your WordPress website, since nowadays, many WordPress websites (more than 5 million) have WooCommerce active (WordPress.org, n.d.).

Defining the content in WordPress

WordPress allows you to easily define some content for your website, but at the same time it also automatically generates a lot of it, so it is also important to be aware of this distinction.

User-defined Content

WordPress was originally designed to define blogs. Therefore, the main piece of content that the user could define was a Post. However, nowadays there are many types of content, such as Pages, Products, Testimonials, Portfolio, etc. The Posts and Pages content types are included by default in WordPress, but you need some WordPress extensions to be able to define Products, Testimonials and Portfolio.

Let me focus on the following content types:

  • (WordPress) Pages are timeless content that you want to be easily accessible, such as the main content of the Contact page or the main content of the About page. Nowadays, WordPress offers a Block editor with a lot of block types (headings, pictures, galleries, video, columns, etc.) to define them, so can easily define this content as we like. We normally have a few (WordPress) Pages, so we can be very creative when defining those pages, and if in the future we want to change the design of our whole website, we can just review these few (WordPress) Pages and modify them if needed.
  • Posts are the content elements that are included in a blog, which are periodically produced (timely content). Therefore, the content of a post may describe a new, an event, a trend, a tip, and idea, a comparison of two products, etc. WordPress also offers the Block editor for the posts. Although this is an advantage to be able to create the posts as we like, this flexibility also has some disadvantages: we can create very specific designs for each post that cannot be easily changed at once in the future. Note that, contrary to what happens with (WordPress) pages, we may have hundreds of posts in, let’s say, two years, and it is not feasible to be changing the design of them one by one. Therefore, what I recommend to my students, it is not to make use of blocks that drastically changes their design, so we do not need to be changing them one by one if we want to change the design of our website in the future.
  • Products are the content elements that are included in a shop, and therefore they can be sold. The Product content type is not included by default, you need to install the WooCommerce extension (plugin) to be able to define them. Examples of products could be a specific shoe, a specific trouser and a specific mp3 song. WordPress (WooCommerce in this case) does not offer a Block editor to define the products, just a simple editor with a form that allow us to fill in all the information related to the product. Although this option does not give us a huge flexibility, it will prevent us from defining inconsistent designs for the products (or at least, it will drastically reduce the probability of doing so).

The Posts and Products content type are normally understood properly. However, one of the main misconceptions in WordPress is related to the content type (WordPress) Page. In fact, a (WordPress) Page is not what we normally understand as a website page. A (WordPress) Page is a specific type of content, a timeless content, such as the contact information. However, what we normally call a website page will always include some type of content (that could be a Post, a Product, or a (WordPress) Page content type) together with many other elements, such as navigation menus, website title and logo, footer information, and so on.

I recommend you keep on reading for further clarification on this topic.

Classifying User-defined Content

Once you have defined the content of your website, you will soon realize that you need a way to classify it. Imagine that you have defined a hundred of posts and a hundred of products: you need to provide a way so that the visitors can easily find the post or product they are looking for.

In this sense, WordPress allows you to classify/group posts using Categories and Tags, and products (with the WooCommerce plugin) using Categories, Tags and Attributes. (WordPress) Pages do not normally need to be classified, since we normally do not include a huge amount of them.

Regarding the grouping of the posts, use categories to group your posts by topic, and tags to describe your post in more details. For instance, if your website is about fashion, you could define two categories for posts, Trends and Events (of course if you are planning to include posts that talk about that), and then add five to fifteen tags per posts. The tags associated to the posts completely depend on the content of post: For instance, if your post is about the trendy colours of this spring, the tags could be something like Trendy, Colours, Spring, Fashion, Magenta, etc. (assuming that Magenta is one of the trendy colours).

Regarding the grouping of the products, use categories to group products with similar features, attributes to specify the properties of the products that can be used to filter them (or create variations), and tags to describe the products in more details. For instance, if you are selling clothes, you could define three categories: Hoodies, Pants and Shirts (assuming that you are going to sell products of these types). If you want the visitors to be able to filter the clothes by size and colour, you should define these two attributes: size and colour. Finally, you could add five to fifteen tags per product. Again, tags really depend on the content of the product. So, for instance, if you are selling a lightweight relaxed fit shirt made of a linen blend with a button-down collar, you could add some tags such as Lightweight, Linen, Button-down collar, etc. (assuming that you do not want to add a filter in your website for any of these elements, otherwise you could consider defining them as attributes).

Autogenerated Content

Once you have defined your user-defined content (such as posts and products) and you have classified it as mentioned before, WordPress can automatically generate many different types of page contents:

  • A page content with the list of all posts (this content would represent the whole blog)
  • A page content with the list of all products (this content would represent the whole shop)
  • A page content with the list of all posts of a particular author (and it will do that for each author)
  • A page content with the list of all posts (or products) with a specific tag (and it will do that for each tag)
  • A page content with the list of all posts (or products) that belongs to a specific category (and it will do that for each category)
  • And so on.

All this content is automatically generated, and therefore the user does not need to explicitly define it anywhere (unless he/she does not like the way it is automatically generated, and he/she prefer to define its own with a user-defined (WordPress) page).

In order to access this content, the visitor simply needs to click on the corresponding category name wherever he/she finds it in the website (and the products/posts that belong to that category will be displayed), or to click on the name of the author wherever it appears (and the posts written by that author will be displayed), or to click on a tag wherever it appears (and the products/posts that have that tag will be displayed).

The special cases are the page content with the list of all posts (that represents the whole blog), and the page content with the list of all products (that represents the whole shop). In order to access this content, we do need to have two (WordPress) Pages, such as Blog and Shop (although other names are valid), and select those as the Posts and Shop pages, respectively, in the settings. In this way, WordPress will automatically fill the content of this (WordPress) Pages with the corresponding information (although again, if we do not like the way the content of this pages is automatically generated, we can also define our own Blog and Shop pages as independent (WordPress) pages).

Finally, note that WordPress also automatically generates other types of page content and (WordPress) Pages, such as the cart, the checkout, the user account, etc.

Choosing a design in WordPress

When using WordPress, I strongly recommend you define part of your content of your website first (some posts, pages, products, etc. and their classification) and then choose a design for it. In this way, you will be able to see the effect of the selected design on a meaningful content, and you will get a better understanding of the mentioned separation of concerns (content versus design).

In WordPress, we choose a design by selecting and customizing a Theme. By default, WordPress includes a few themes, but there are thousands of available (free and premium) themes that you can install.

Understanding themes if one of the keys to understand WordPress. In fact, a theme does not affect only the visual aspects of the website, but it also affects the additional content that can be added to (or suppressed from) every page of the website. Thus, the selection and configuration of a theme dictates:

  1. The look and feel of the website:
    1. Including general aspects such as the font families that are used, the backgrounds, the colours, the animations, etc. The available options to modify these really depend on the theme definition. That is, some themes allow you to customize all these aspects, while others just a limited set of them (although you can always search for a WordPress extension (plugin) to provide you with more options).
    2. And including specific templates for the different types of page content, both for user-defined and automatically generated content. That is, a theme dictates how a single post, a single product, a list of posts, a list of products, the cart, the checkout, etc. is displayed [2]. And again, some themes may offer you a lot of options to configure which information is included for each of them and how, while others just a limited set of them.
  2. The additional areas that will be added to every single website page, and that can differ depending on the type of content the website page includes. Thus, some themes add footers, headers and sidebars to all the pages, while some of them may include headers and footers in all the pages, while sidebars just in the ones that contains posts (for instance). The type of content that these additional areas normally include are:
    1. The website title and logo (normally in the header).
    2. Footer info (in the footer).
    3. Navigation menus (some themes give you the option to choose the place where they will be positioned). These navigation menus can be automatically generated as well, or be defined by the user. In the latter case, the user can add menu entries linked to both user-defined content (single posts, pages and product) and to autogenerated content (based on categories and tags, for instance).
    4. Widgets, which are additional features, such as search bars, filters, list of lates posts, etc., that the user can choose whether to include them or not in some available areas that the theme offers (which of course again depends on the selected theme).
  3. The homepage. This is not always the case, but since the homepage is a very important page of every website, many themes allow you to configure it differently from the remaining pages.

 

Figure 1. The content of a website page in WordPress

Conclusion

WordPress is a very flexible platform, and as such, it gives you a lot of options to define and manage your website. However, this flexibility also has its counterpart. Therefore, it is very important to understand properly the main concepts the platform is based on and make an appropriate use of them. Otherwise, we may define a website that does not keep the content and design concerns separately and that could be difficult to manage and modify in the future. As a personal recommendation, I would try to keep as separated as possible the definition of the content of the website from the application of its design (following the mentioned guidelines) and I would spend a reasonable amount of time searching for the best theme for my website, since a theme has an impact not only the visual aspects of the website, but also on the additional content that can be added to (or suppressed from) every page of the website.

Notes

  • [1] The same idea is actually followed by the standard languages used to define websites: HTML and CSS. HTML is used to define the content and the structure of the website, while CSS is used to define the style (formatting/presentation) of that content.
  • [2] Nowadays, the whole design of your posts and (WordPress) pages is not only dictated by the theme, but it is also influenced by the way you define their content with the Block editor, since this editor gives you a lot of flexibility. As mentioned before, try to make a consistent and reasonable use of the editor.

By

Eduardo Rivera

References

Shadow