Lab 5: Wordpress Environment Setup with Local WP

Wordpress is a free open source (FOSS) content management system (CMS) for the web, used historically to create blogs, but has since found wider use, including static and e-commerce sites. It can be extended with plugins and themes, either created by others or customized yourself.

Typically Wordpress is installed on a remote server running a LAMP stack: Linux, Apache, MySQL and PHP, though some components may be interchanged, such as Windows for Linux or NGINX for Apache. If you have already taken ENSE 353 you have created such a stack, where a completed wordpress installation could be deployed.

For this course we will use an application called “Local WP” to install a local wordpress development site, which can be used for single-user prototyping and testing on your local machine without a server. Historically, one would use a streamlined LAMP installation, such as XAMPP, which has some advantages and disadvantages over our approach. Local was developed by Flywheel, a web-hosting service, and has released this tool to help people learn, hoping you will later host your site with them, but there is no obligation to do so. Local encapsulates the server and database applications needed by Wordpress, allowing you to quickly start the needed services on demand.

Download Local WP

You do not need to provide a real email if you do not want to be contacted by the developers!

Follow the installer. If you are on mac, you may need to move the executable to your Applications folder. See the video in references for more information.

Configuration for the Lab Machines

By default, Local updates the hosts file to simulate local domains, however, this requires admin privileges, which you will not have in the lab. To get around this, we can instead run our sites on localhost, by changing the following setting:

Local invokes multiple services / daemons. You may wish to grant admin privileges.

You don’t need to change any advanced settings yet, but later may wish to make use of the “blueprints” feature. This allows you to set up a site the way that you like it once, including adjusting settings and installing and configuring plugins and themes, and then make a copy of this which can later be reused, called blueprints.

If you know the specific configuration of software needed for your server, you may configure the environment, but for our purposes the preferred configuration is fine for development.

Wordpress has two web interfaces, one for the public which is available to all to see, and one for the admin used to perform administration, such as adding new content. The admin account can be accessed from any computer around the world, so naturally must be secured behind a username and password. Set these on the next screen. Make sure you remember these: if you forget them you will need to manually edit your database to reset this. The email you enter will occasionally get messages from Wordpress, letting you know if themes or plugins have been updated.

The advanced option allows mutli-site instances, which allow wordpress to host multiple sites on a single server. This can be useful to host several personal websites, like personal CVs and portfolios, for managing costs. However, it does reuse the same database for all sites, making migration later on a hassle.

Finally, click on Add Site. You may need to give Administrator privileges to start up web hosting daemons. It may take a while for your site to initialize, and then show the dashboard:

1. Here you can see if the site is running. You can stop or reload your server here. If you stop development and want to resume later, make sure you start up your local server.

2. You can open links to your site here, either the pubic facing site or the admin portal. By default, the admin portal is found at the subdirectory:

    <your site>/wp-admin/
   

Or, if you are using localhost:

```
localhost/wp-admin/
```

1. Here you can click through to see different aspects of the site system, including database and utilities.

First, click on the Open Site button to see the site as it exists.

This minimalist, placeholder site appears when you start up a new site, updated each year to demonstrate the current wordpress theme. Your theme will likely be newer than the following:

A Wordpress theme is a basic site design. It groups together elements like page templates, colors and other CSS styles, and modules coded in PHP. The guiding principle of a theme is to make your wordpress page look good out of the box, so that the developer can focus on generating content rather than fine tuning visual design, though a certain amount of broad customization is possible, and strongly required to give your site a unique visual identity.

Each year wordpress updates the default theme to echo some contemporary web-design paradigms and popular techniques. A prominant paradigm today is the “site-builder” appraoch, modular sites which the user builds by selecting components and dropping them in place. This is the paradigm they are embracing with the “twenty-twenty-one” theme - you can modify your site layout by adding “blocks”. Other plugins have existed to this historically, which are Elementor, WPBakery and BeaverBuilder. Generally speaking, these tools are very powerful, but take practice to use. Most of these tools have a free demo version with reduced capabilities, and a subscription based professional version, with more features.

Wordpress themes are typically responsive by design, that is, the content reflows automatically for mobile devices. To see what the site looks like on a mobile, you can use mobile view in firefox: Ctrl+Shift+M

Let’s check out the Admin portal next…

Log in with the password you set earlier.

Our first step should be heading through settings, and configuring things as we like…

After this, if you reload the page, you should see some simple changes.

From here we have two main approaches to begin to make our wordpress site our own. The cleanest way to start over is to choose a new theme. However, let’s see what we can do to customize this theme first…

Click through the different pages to see what you can edit.

You can also see what it will look like on a mobile device using the controls in the bottom right…

Let’s try adding some content…

Static Pages

You can add static pages from this menu

Add a few pages here. You can also delete some of the automatic pages if you don’t need them anymore.

Dynamic Blogs

Blogs posts - You can add dynamic blog posts from this menu:

These by default will appear on the blog page, but could be moved to be on the main page.

Menus

You may wish to have different menus in different places, for example in the top header menu and the footer menu. The menu section lets you tailor these to your liking:

To create a new menu…

• Add a new menu
• Name it
• Save it
• Select pages to add
• Add the pages
• Save the menu

Images

Images in wordpress are uploaded and stored in the local site files.

We’ll look at dedicated plugins for this in next weeks lab, but for now let’s take a peek and see how blocks work in the twenty-twenty-one theme…

You can change the title and the paragraph. You can add new blocks using the top bar…

You can add blocks, which are like individual components, and patterns, which put smaller components together to make something useful. Always publish your pages when done to save changes.

This should be enough of a tour to get you started. Next week we will continue to look at further customizing your wordpress sites.

In this section we are going to use a plugin called Starter Templates to give us a working site to iterate on. However, first it is useful to understand how a wordpress page is composed.

Pages are visually composed of themes and content (blocks)

The website’s theme defines the colors, fonts and layouts.

• Themes have some styling out-of-the-box and can then be further customized using the customize option.
• The theme implements a consistent visual framework across pages, i.e., header and footer that appear on all or most pages,
  • Today, it is popular to find a lightweight theme which implements this and little more
• Suggestions:
  • Astra
  • GeneratePress
  • WPOcean
• A major benefit of a theme is when new pages are added by the client, they will automatically have these styles added
• You can also turn off elements for certain pages, such as the Landing page

We will automatically get the Astra theme when we use Starter Templates.

Let’s install the Starter Templates plugin. This plugin attempts to create several sample pages in your block editor of choice, between Elementor, Beaver Builder and WP Blocks (formerly Gutenberg). We’re going to use WP Blocks, as this is the default block editor for wordpress, and so far seems to be the best performing.

Starter Templates

Let’s install and activate the starter templates plugin…

Browser the library…

The templates have been created using a number of page builders. We will work with the Gutenberg editor.

An example template is the mountain template. It will give us a rough starting point for our site, and is much easier than starting from a blank canvas.

Let’s import the complete site, to give us several starting pages, as well as sample content. The plugin will automatically download some plugins to ensure the site looks and acts as intended.

To actually fill our page, we need some content

There are three types of content in wordpress: Post, Pages and Media

• Posts are dynamic - update with more blog entries, typically newest at the top
• Pages are static - set it and forget it
• Media - saved separately in a database, but typically also embedded on to pages. Can be uploaded once and reused multiple times.

Our selected theme does not include a blog page by default, but we can create one.

For this lab, we are going to create a personal website for a fictional Persona.

A persona is a UX exercise in which we create a fictional, yet realistic, description of a target user. This is an archetype of a user, but we describe them as if they were a real person.

The description should focus on needs, concerns, goals, as well as demographic information such as gender, age, occupation. We wish to foster empathy for the users for which we are designing. The persona should focus on the attributes of life which influence our design.

The psychology behind personas is that humans design better for other other humans, (e.g. you neighbor) rather than broad profiles or statistical information (e.g. women aged 35-65).

Personas can be presented in a number of ways, but are typically represented in a single page dashboard or infographic style. Common sections include a (stock) photo, name, age, location, occupation, tag line, about, goals, tasks, and pain points. Avoid extraneous details which will have no impact on design.

sus

Personas should be based on User Research, ideally reflecting real-world data which you have captured, through field studies and interviews.

Building a website for a Persona created for a Job Hunting Application:

• Complete the Figma persona template provided (or make your own!)
  • Assue you are creating this Persona to aid in developing a Job Hunting website
    • Consider their goals, tasks, needs and frustrations of a user of a job hunting site
• Create a new wordpress site in Local
• (Optional) Install a different starter template than the one we looked at
  • This is optional as you may need to configure a lot of the template to work with your persona, and we won’t look at this in too much depth until next lab!
• Create a home page which captures some elements of your persona’s personality, e.g. hobbies or interests
• Create three new static pages, and link these to the home page
  • Use two or three site builder blocks on each page to convey a goal or task of the about the persona
    • e.g. If the persona wants a high paying job to give to charity, include some of their favourite charities
• Make a blog page with three entries
  • In each one, comment on a specific need or pain point of the user.
  • e.g. if the user has had difficulty finding jobs that are available in the time they are free, have them write about it
  • It does not need to be lengthy.
  • You may use a text-generation site, e.g. ChatGPT to help with this
  • Make sure the blogs are all accessible from the main page, through either links in the menu, or using a blog post block
• Document your site with screen-shots, one for the home page, one for each static page and one for eac blog page

• For this lab, please submit screenshots of your work, rather than your complete installation.
• Please submit both the completed Persona template, as well as the screenshots of the website,
  • At the minimum, include screenshots of the home page, the three static pages, and the three blog pages
• You may include all images in a single .zip file

Aurora Harley. Personas Make Users Memorable for Product Team Members. Nielsen Norman Group. February 16, 2015.

WPLearningLab. How To Install WordPress Locally - Make A WordPress Local Development Environment. Updated 2021.