Lab 6: Wordpress Themes and Site-building

From a design perspective, Content management systems necessarily trade-off some power and performance in favour of ease of use. This means that, as a designer, you will be able to largely match the general design envisioned, but will likely not be able to perfectly replicate it out-of-the box without either installing third-party plugins, some of which are paid, or coding them yourself using a combination of CSS, JavaScript and PHP. As a software engineering student, this should not deter you from using the software. The ultimate goal is that you will be able to design a website which largely matches your envisioned idea, and still be easily transferable to a client, who will be able to further edit it and add content without extensive technical knowledge.

To achieve this goal, we will work today with templates and page builders to quickly get a site up and running and iterate towards our desired design.

We will attempt to implement several pages from the TRAVEL Hyrule site, which we looked at in Prototyping in Figma, in wordpress using Wordpress Blocks. We will necessarily observe some of the limitations of the software.

Set-up

• Start from a fresh site with Local for this week’s lab
  • We will start our site from a template which will install dummy content
• Reminder: In settings: Set title, tagline, and time zone
• You will also want to set perma-links type to “post name”, which will make the URL subdirectory structure human-readable

Review: The general visual hierarchy of a page is displayed by:

• Themes
• Content Blocks

We can get some default starter content using the starter template plugin.

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 Wordpress Block editor.

Let’s use 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.

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

Page Builders are applications built on top of Wordpress which allow users to generate pages by composing them of a number of nested blocks. The Wordpress Blocks editor is an example of this, but there are also commercially available open source editors such as Elementor and Beaver Builder. Generally the more powerful, flexible and easy to use the editor, the more bloated the output reducing performance. For these reasons, we will use the best performing Wordpress editor, even if some things are slightly more tedious to us as users, and even impossible without custom code.

Let’s edit the homepage with Wordpress Blocks.

First we will implement the home page. Let’s break down a set of Wordpress blocks which could comprise this layout…

Steps

1. Change the Cover background to the Hyrule image

Note: Since 2023, the company which makes Starter Templates (Brainstorm Force) has updated their plugin to use all their own blocks, which are available in their plugin package, Spectra. For this reason, many of these interfaces may have changed. I will do my best to update them! This is troubling, as they are trying to lock you into their ecosystem.

Pop up tools appear…

These will vary depend on context of the block which is selected.

Click on the kebab menu and Remove Block.

You can change the image by using the side-bar.

The inspector on the right will change depending on the context of the selected block. Here you can set properties

Inspector -> Block -> General

Let’s squish down the image in

Minimum height -> 600 px

Note, you can also set properties for the Theme for this page as well, which is how you can constrain content and turn on or off headers or footers.

We may need to come back to this one in a bit, but for now the defaults should be good for our page.

Remember to frequently save with update, and preview your page in a new tab.

2. Lets add a text and image block…

Let’s add a column

This will allow two areas to drag and drop items.

On the left, we will drag in an icon, on the right some paragraphs. Copy the text from XD

To make the bow icon reasonably sized… Inspector -> Block -> Image Dimensions -> 50 x 50

Also, center it by selecting the image Pop-up tools -> Change Alignment -> Align center

And in the column

Pop-up tools -> Change Vertical Alignment -> Align Middle

You can also scale up the title of the text in

Text -> Inspector -> Typography -> Medium

Save and inspect

In your preview, see how this looks on mobile…

Let’s take a break from the block editor and hop into the Astra editor to set up our header and footer.

3. Changing our header logo and menu

4. Changing our footer using the Astra footer builder

Changing our footer is a little bit more complicated. We need to use the theme’s footer customizer. We likely won’t get quite to the point we want to, but that’s okay…

You can see the actual footer, as well as the blocks which make it below

We have three tasks: update the copyright, add the ‘social media’ icons, and update some colors…

First, we’ll clean up the second row. Remove all widgets and collapse to one column

Do the same for the bottom with color: #206A5D

Fix our copyright, editing the text and setting the color to white and center it

We’ll add an HTML element in the second row, and update the image

By editing the HTML, we could easily add some links to the images, but we won’t worry about this for now.

Reminder - add link to image.

** Hit publish to update! **

We will use the blog feature to implement the locations page, with a post for each location. Let’s set up the posts first…

For each post add a title, text and a featured image.

Be sure to publish!

You can repeat this for a few locations…

Now to create the blog page which links to the others…

Create a new page, and set up a cover like before.

Set some Page settings, including:

• Hide Title
• No Sidebar
• Full Width / Stretched
• Transparent header Enabled

Publish. Everything look good?

We should fix that menu, what is with that “Take action” button?

We can edit our menu here…

Be sure to save menu!

We can also get rid of the “Take Action” Button in the header

Theme -> Customize -> Header Builder -> Remove the Button

And

** Publish when done !!! **

Preview. Are the menus fixed?

To format our blog posts, we’ll use one of the blocks in the Spectra plugin. You will automatically have it since you started with the Starter Template. If you started from scrach, you may need to grab it from plugins:

Install and activate

This is a hefty plugin … we want to turn most of it off…

Let’s head back to the locations page, and add in our new “Post Grid” block

Let’s edit the block a bit…

Publish our changes.

Time to test - how does it look on both the mobile and desktop?

Hopefully this lab has helped you see how we can get a website that looks good, close to our vision (though usually not perfect without significant futzing), and still being able for other users to add to later on.

We didn’t fix the non-transparent header which shows up on the blog posts - I’ll leave that up to you.

Search and Filter

It can also be nice to be able to search and filter through our Posts. I believe Tim will be providing you with the Pro version of this plugin, which is quite powerful, but we will look at the free version, as it is a bit easier to get working in Local. Let’s grab it from the plugins menu.

In order for this plugin to work, you need to do two things:

1. Tag your posts in a correct way, e.g. using Tags, or Categories, or both.

Recall - this falls under our heading of Information Architecture!

1. Display the type of search using a “Shortcode” block

You can see a list of available search formats and shortcodes on this page:

Search and Filter Free Edition

Note: Customization and Live Search (e.g. AJAX) is not available in the free edition. However, we can still see the basic operation of the plugins. The styling of the plugin will be dictated instead by your theme.

Let’s grab the associated shortcode…

[searchandfilter fields="search,category,post_tag,post_format,taxonomyone,taxonomytwo" types=",radio,checkbox,select,radio,select" hierarchical=",1" headings=",Categories,Tags,Post Format,Taxonomy One,Taxonomy Two" submit_label="Filter"]

And add it to our home page:

Paste it in:

Update the page, and let’s test it out!

And let’s check out the results:

Your assignment is to build a wordpress site with 2 static pages and 3 blog pages, similar in scope to our pre-lab, for an volunteer organization or a web store. This organization should offer at least 3 products or services about which you can make blog pages.

Your site should include:

• A consistent header across pages
• A consistent footer across pages
• Appropriate menu linking the pages, with both mobile and desktop variants
• A landing page with at least 3 sections
  • Each section should highlight something about store, e.g. an aspect of their location, staff or culture
  • Each section should experiment with a different type of Wordpress block
• A blog page with at least 3 entries
  • Each entry should represent a product or service offered by the company
  • Be sure to aggregate all of the blog posts in some type of a container
• I’d recommend quickly prototyping in Figma first, but don’t get too frustrated when you can’t exactly replicate your Figma Design
• You may include elements and styling from templates, but obviously cannot simply submit a template! Use it is a starting point to add, modify or adapt, like we did in the lab.
• You can experiment with a different Page Builder if you would like, like Elementor or Beaver Builder, but expect a performance hit!
• You can grab some cc0 stock photos from: https://www.pexels.com/creative-commons-images/

Please submit a backup of your site from local.

See this link for information:

In next weeks lab we will meet either in person or in zoom and do a ~10 minute tour through your GitHub to see how you have showcased your work for the year, and what you might do to improve!

Our hope is you keep building your GitHub skills so that by Capstone you can both properly document your design projects, as well as showcase your work to prospective employers!

In previous years we looked at some other plugins. For your referece, these are included here. Keep in mind, publishers may update their interfaces over time, so these may change over time:

Appointment Booking

In previous years we did a contact form, which matches our design, (this info will be left after this section, for your info). This year, instead, we will use a booking system to book tours, to explore installing and using plugins.

• Install a new plugin:

• Install and activate Easy Appointments

This is a plugin created for taking bookings. It can be found here, with documentation here.

• Plugins typically have their own interfaces for editing. You can get to its settings through the admin dashboard:

Often, with plugins, you need to read the docs to figure out they work. This plugin allows places, like Salons, to book appointments. The data model for an appointment includes:

• Location (Where is the service offered?)
• Employee (Who is doing the service?)
• Service (What is being offered?)
  • An appointment slot combines a Connection between each of these three, as well as the times they occur.
• So, first we must set this up, for our appointment to work.

• Finally, we may want to adjust some settings:

• In particular, I want to auto-confirm appointments

• Newer plugins typically provide a Wordpress Block to add directly to your site, however, older once might only be accessible through a shortcode, which will customize the appearance of the plugin on the page.

• I found these settings which I like:

  [ea_bootstrap width="800px" scroll_off="true" layout_cols="2" worker="1" location="1" service="1"]
  

We can add it to the page with a shortcode block

Unfortunately changes are not “What you see is what you get” (WYSIWYG), so we need to preview our page to see the changes.

When we refresh we can see the slot is gone:

Finally, we can view our appointments from the Wordpress admin:

This is likely not the best booking plugin, but this gives you an idea of how to find and install a plugin, learn how to use it, and get going with it!

Contact form

Let’s finish the landing page off with a contact form:

Go back to editing the page, and remove the remaining gallery stuff from our template page.

Start with a group block which allows us to add a background color

Group -> Inspector -> Block -> Background Color -> #F1F1E8

Inside the group add a WPForms,

We’ll use a WPForms plugin, which was downloaded with the starter template. Set it to the contact form. We’ll add some text above, and then edit the form from another area.

There’s lots of cool things we can do here, but for now we’ll simply set the form as we like.

Finally, ensure the email is set up properly.

)

We have a complete functional page.

In the next section we’ll add a blog page.

M. Rand-Hendriksen, WordPress 5 Essential Training, Lynda from LinkedIn Learning, 2020

M. Rand-Hendriksen, WordPress 5 Essential Training: Site Administration, Lynda from LinkedIn Learning, 2019

WordPress - Adam’s Rant

• Freemium + Software As a Service on top of GPL software is a bizarre business model.

• Minor gripe: the overhead of wordpress can make it very slow compared to an equivalent static site.
  • Optimizing a wordpress site is a worthwhile undertaking.
  • In other courses you will learn how to create a site without Wordpress, using HTML, CSS and JavaScript