Select Page
Web Design II
Class 06: WordPress Review

Topics

    • Local Development Environment
    • WordPress Overview
    • Class 06 Custom Theme Site (wordpress setup) Lab

This week, class 6… 66.

Local Development Environment

Local Development Environment:

The default way of developing a WordPress site is live. This means that your site is constantly online and any development or changes you make are being processed across the internet on the server. This is one way of working and once a final site is deployed this is generally how it is done.

However, there are advantages to producing a local environment:

  • No hosting/server or domain necessary upfront. You don’t have to pay for a hosting service or domain name registry while your site is not even ready. This also saves you students money (I know you are poor like me!).
  • It is more secure since only you have access on your own computer. This can be important when developing so that you can close any security risks before you upload it.
  • It does not require an internet connection. You can work anywhere you want without being connected. The response of changes should be quicker since you don’t have to transfer them to a server.
  • It is more professional obviously to have a competed site live than something being developed.

Options:

There are a variety of options to create your local development environment. For this course we will use Local by Flywheel for its ease of use but you may want to try these on your own in the future:

  • MAMP
    • MAMP is a free, local server environment that can be installed under macOS and Windows with just a few clicks. MAMP provides them with all the tools they need to run WordPress on their desktop PC for testing or development purposes, for example. It doesn’t matter if you prefer Apache or Nginx or if you want to work with PHP, Python, Perl or Ruby. -mamp.info
  • XAMP
    • XAMPP is a completely free, easy to install Apache distribution containing MariaDB, PHP, and Perl. The XAMPP open source package has been set up to be incredibly easy to install and to use. -apachefriends.org
  • Desktop Server
    • Whether you’re a WordPress developer, designer, or website owner, chances are you have accumulated your own stash of tools, plugins, and processes that make your life easier. DesktopServer is a single integrated tool that is proven to save you time testing, developing, managing, and creating fully functional website servers on your own computer. DesktopServer allows you to quickly and easily generate optimized WordPress projects that run locally. -serverpress.com
  • Local by Flywheel
    • Local by Flywheel is a free local development environment designed to simplify the workflow of WordPress developers and designers. -localbyflywheel.com

Local by Flywheel:

In this course we will utilize Local by Flywheel. This is a one-click solution that will automatically install all the necessary technologies for you. If you decide to make your site live they offer hosting services that will automatically upload it for you. Their hosting service is not free but the local development environment software is!

If you would like to install it on your home computer you may download it here.

WordPress Overview

WordPress:

You should have been introduced to WordPress in the previous course but as a reminder…

WordPress is a free CMS (content management system) developed with idea of democratizing the internet. It is simple enough for a someone with no coding experience to use but when used by professional’s, can create powerful dynamic sites. Most major sites now utilize WordPress.

Working with WordPress:

There are two primary ways of interacting with a wordpress site.

  • The Dashboard:
    • This is more back-end behind the scenes. It is used to apply general settings for your site. You can set the time, user access, naming, menus, homepage, display defaults, CSS, install themes and plug-ins, etc. You may also create pages and upload content.
  • Visual Editor:
    • If you are logged in as admin you may interact with the site on the front-end. Customize will allow you to change various visual elements depending on the theme and plug-ins you have installed. Some themes and/or plug-ins will allow you to completely create your webpages in the front-end. Page Builder, Elementor, and Divi are examples of plug-ins and themes that allow you to do this. We will be using DIVI later in this course.
Dashboard
This section contains mostly news and update information
Posts
Use this section to create blog posts
Media
The library of files you have uploaded onto your site
Pages
Where pages are created and archived
Comments
Any comments on your blogs or pages are displayed here
Appearance
Deals with the application and adjustment of your themes and menus. You may also edit CSS and PHP here
Plug-ins
Utilized to apply plug-ins that add additional functionality to your site
Users
Manage who is allowed to make changes and what
Tools
A variety of functions that allow you to import and export data as well as other things
Settings
Does what the name suggest, like changing default, time display, etc.
Visual Editor
Gutenberg default editor visual editor
Page Builder by Site Origin visual editor
Elementor visual editor
Divi Builder by Elegant Themes visual editor

Class 06 Custom Theme Site (wordpress setup) Lab

Custom Theme Site (wordpress) Lab

The second lab series will be dedicated to creating your very own theme from scratch. In this lab you will simply setup the wordpress environment and mockup a simple site to test your theme on.

You will be graded on the following:
  • Lab Requirements
    • Techniques and processes covered in the instructional material is followed and implemented.
  • Creativity & Craftsmanship
    • Excellent design choices, novel & appealing, and solid clean caliber work.
Resources:
Assignment Video Tutorials
You may watch these tutorial videos below to help you complete your assignment.

Lab Tutorial Slideshow

This tutorial will review WordPress as well as setup a site to apply our future custom theme to.

Lab Introduction
Custom Theme Site (wordpress setup) Lab
PlayPlay
Introduction

This week we will refamiliarize ourselves with Wordpress. The goal is to review the basic interface and to build a simple site to test the labs yet to come.
Click on the > to start

You may downloadthe images used in the lab here:
Knock Off Site images (

Create Local Site
Create Local Site
Custom Theme Site (wordpress setup) Lab
PlayPlay
Instructions
  1. Since Web Design I is a requirement for this course you probably already have Local by Flywheel installed. Hopefully you also remember how to create a new local Wordpress site using it. If so you can skip to the next slide. Otherwise...
  2. Install Local by Flywheel (link here). This will create the developer environment we need to have a localized Wordpress site.
  3. In Local press the (Add Site) button.
  4. Choose a name for the site, YourLastNameThemeSite.
  5. Accept the defaults.
  6. Use vcp for the wordpress username and wordpress password. This way I am able to access it for review later.
  7. Click Add Site. Your PC will have a popup asking for permissions. Just allow.
Site Created in Local
Local by Flywheel
Theme and Plugins
Theme and Plugins
Custom Theme Site (wordpress setup) Lab
PlayPlay

Simply Gallery Block & Lightbox

Atomic Blocks - Gutenberg Blocks Collection

Instructions
  1. First thing we will need to do is install the theme, plugins, and adjust some general settings.
  2. To begin work on the site press the Admin button. It will pop open your default browser. Enter the username and password (vcp).
  3. The default theme installed is developed by the Wordpress team. You may view it by navigating to Appearance>Themes. It usually is named the current year or previous, such as, twenty twenty. This theme is fine for now since we will be replacing it eventually.
  4. The next order of business are plugins. Navigate to Plugins>Add New. We will be using the default Gutenberg Wordpress editor to make our pages (simplest to use with our custom theme). Therefore, we will only add a few plugins that work with this block editor.
  5. Type Simply Gallery Block & Lightbox in the textbox at the top right that says Search plugins.... The plugin should appear in the search results (you can see it's icon below).
  6. Press the Install Now button. It will be downloaded. Once completed the Activate button will appear. Press it to activate the plugin.
  7. Complete the same steps to install & activate Atomic Blocks - Gutenberg Blocks Collection.
Homepage
Homepage
Custom Theme Site (wordpress setup) Lab
PlayPlay
Homepage Example

Your homepage may differ. Feel free to change it up.

Instructions
  1. Besides reviewing Wordpress before diving into making a theme for it we are designing a site to apply a custom made theme to. This is going to require pages to view our design on.
  2. Navigate to Pages>Add new. This will open up a new page.
  3. Enter Home for the title (under Enter title).
  4. We will be using the built-in Gutenberg editor. This is a block system. One way to add a block is to press the + button. A small list of options pop up. Select Browse all. Scroll down the list and choose Call To Action from the Atomic Blocks section. A CTA (call to action) will be placed.
  5. You may use the block settings menu (with the block selected) to make major block adjustments. Make it full width.
  6. You may make other changes by pressing the options button and selecting Show More Settings. A panel will appear on the right with more options.
  7. Click on each of the components of the CTA block, make changes, and apply an image to the background. Feel free to explore
  8. Press the + button to add another block. You may choose Browse all or simply type the block desired in the search bar, in this case we want Columns. Choose the three column option. Use the block settings to make the column row Wide width.
  9. Press the + in each column to insert a block. Add an image block. Use the setting to insert an image.
  10. Press the + to add a paragraph block under each image in each column. Use lorem ipsum (here) for dummy text.
  11. That should be good enough for now for a homepage. Press Publish in the top right of the window.
  12. Press the to return to the Dashboard.
Subpages
Subpages
Custom Theme Site (wordpress setup) Lab
PlayPlay
Subpage Example
Instructions
  1. Next we will create some subpages. These will be produced the same way as the homepage.
  2. Navigate to Pages>Add new. Enter Products for the title (under Enter title). This will be our products page.
  3. Press the + button, select Browse all. Choose Simply Slider. Make it Wide width.
  4. There are a lot of options for the slider if you open the the settings options. Insert the images and adjust the settings. Explore the options.
  5. Press the + button to add more blocks. Explore the options and make it your own.
  6. That should be good enough for the product page. Press Publish in the top right of the window.
  7. Press the to return to the Dashboard.
  8. Create another page. It may be whatever you like. I would suggest contact, about, more products, etc. Try different blocks and be sure to have enough content to apply your theme to.

subpages

You subpages may differ.

Settings and Tidy Up
Settings and Tidy Up
Custom Theme Site (wordpress setup) Lab
PlayPlay
Instructions
  1. The final steps will just be some basic cleanup and applying defaults.
  2. Delete the extra pages. Navigate to Pages. Hover over the pages you wish to delete (Privacy Policy and Sample Page). Select Trash.
  3. Navigate to Settings>General. Change the Site Title to Knock Off Toys and the Tagline to Awful toys. Truly awful toys.. Press Save Changes.
  4. Navigate to Reading under the Settings. Under Your homepage display choose A static page. Select your Home page. Press Save Changes.
Final Review and Submission
Final Review and Submission
Custom Theme Site (wordpress setup) Lab
PlayPlay
Instructions
  1. You should explore and add anything you would like in the site. The best way to learn is just to play around with it.
  2. You may view your while working on it but also from the Local interface by pressing the View Site button at the top right of the program. When you are happy with it, it is time to export it out.
  3. In Local right-click on the site name in the list on the left. In the popup choose Export. Don't enter anything in the window. Press Export. In the popup choose where you want to export and export.
  4. Now, log into Blackboard (Here) and click on this course. Inside the course, select Week 06, then the Class 06: Custom Theme Site (wordpress setup) Lab folder, then the assignment with the same name. Finally, Attach the zipped file.
Lab Synopsis
Lab Synopsis
PlayPlay
Reflection

We now have a really basic Wordpress site that we can build on. This hopefully was a decent review of the Wordpress interface. Hang on to this site so that we can use it to test our custom theme on in the next lesson.

If you run into any issues please do not hesitate to contact me:

  1. jcone@cecil.edu
  2. (240) 466-1996
 

Wait! Before you go!

Did you remember to?

  • Read through this webpage
  • Watch the videos
  • Submit Class 06 Custom Theme Site (wordpress setup) Lab on Blackboard