[Tutorial #6] A WordPress Website Overview

[Tutorial #6] A WordPress Website Overview

Introduction

In previous tutorial we have made the wordpress live. Congratulation! Now it is time to start customizing our wordpress site into a multi-topic blog page!

Before we talk about customization let’s learn a bit more detail about how a wordpress website is like. As mentioned before wordpress, a content management system, has two main aspects:

  1. The website for visitors (analog to a magazine).
  2. The admin panel (analog to the publisher workshop).

We will look at these two separately below. Notice that for “the website for visitors”, many features are generic, and you can apply the concepts here to websites built by other web applications.

Website for Visitors

2016-09-18-17-17-19

WordPress’ website is mostly similar to other websites —- it’s all about pages! Like many other modern website design, wordpress separates a webpage into three main sections:

  1. The header that holds the logo and links to the site’s most important pages.
  2. The main body or “page” of the website.
  3. The footer that holds less important links (eg: legal, privacy statement), call-to-action messages or hides pop-up messages.

What’s unique about a wordpress website is wordpress makes it very easy to display, categorize, and search blog posts. In general, a wordpress site has the following pages (header and footer will show up on every webpage):

  • Home: the landing page of your website.
  • Blog: showing all the posts.
  • Category: showing posts of a specific category.
  • Post: display a single blog post.
  • Search: display posts search results.
  • 404: indicate when the requested url is not found.
  • Others: any other pages generated by the wordpress users like “About Us” or “Products”.

Below are screenshots of corresponding pages in Modern Black Hand:

Home Page

modernblackhand.com (my personal site) home page

Blog Page

There is no blog page in my site.

Category Page

Category page

Post Page

Single Post Page

Search Page

Search result page

404 Page

404 page

Other Pages

Currently there is no other pages on my site.

Admin Panel

The Admin Panel is where wordpress users can configure their website. The main tasks in an admin panel are:

  • Change website appearance.
  • Add/edit/remove content (posts, pages, comments).
  • Manage site users.
  • Manage multimedia.
  • Install/remove plugins.
  • Other settings.

The wordpress admin panel has three sections:

  1. The top admin header: here it shows some basic, commonly used functionalities like your login information and link to home.
  2. The functionality tabs: It is located on the screen’s left. This is where you select the tasks you want to do. When you install new plugins corresponding tabs will appear here as well.
  3. The configuration content: when you select a tab, the right side will show corresponding configuration content.

Below are summaries and screenshots of the commonly used configuration content in the admin panel. We will explain some of them in more details when we talk about customization:

Dashboard:

This tab is an overview of your site status and various shortcuts.

WP dashboard page

Posts:

The Posts tab is where the admin creates new posts. Here you can also create/edit categories and tags to classify posts.

WP post edit page

Media:

The media tab is where you manage your non-text asset like photos and videos. Any media (except exterbal links) you insert into your posts has to first appear here.

 

Since wordpress can display images/videos by url, nowadays I store most of my media at external sites (Flickr, Youtube) and lower the storage requirement for my server.

WP media page

Pages:

The page tab enables you to create pages. Any pages in wordpress must have a corresponding entity that appears here.

 

WordPress page uses “templates” to determine how the pages will look. The default template does not look good (especially for home page), so later we will learn how to customize our pages by creating new page templates.

WP page list

Comments:

WordPress’ comments are not very good. We will use Disqus to overwrite it.

Appearance:

Appearance is the place where you can customize how your wordpress site looks via the admin panel. Since we will directly code wordpress’ files, we will only use the following features:

  • Site Identity for title and site icon (favicon).
  • Menu for header/footer menus.

Another commonly used wordpress feature here is widget (a part of the page with specific functionality, like “recent posts”). Since it doesn’t look good I don’t use them often.

Plugins:

The tab that manages add-on features to enhance your wordpress site. This is where you can greatly enhance your wordpress site beyond a simple CMS system (eg: change it to an online store).

We will use a few plugins to give our site additional capabilities. Having too many plugins is bad for site management, as new wordpress version might not work on dated plugins.

A general rule of thumbs is to use plugins only for “major” features like a better post editor, 3rd party service interfaces (Facebook, Mailchimp) and online store. For enhancing site appearance (like popups) it’s better to code them manually in page templates.

WP plugiun page

Next Step:

We have learned how a wordpress site looks like, both from the visitor’s perspective and from the admin’s perspective.

Not everyone wants to be a programmer. We will briefly mention how to proceed if you don’t want to customize wordpress by writing codes.