SuperHi FM

Search:

Catalog Cart About Sign in

ADVANCEDCOURSE

WordPress

Become a WordPress whizz by building custom websites with CMSs, reviews and payment features.

Lawrence Gosset

Taught by

Lawrence Gosset

Cool Mat – Part 1

Cool Mat – Part 1

Lesson 01

Welcome + week overview

Lesson 02

The course guides

Lesson 03

Introducing the brief

Cool Mat – Part 2

Cool Mat – Part 2

Lesson 01

Welcome back + week overview

Lesson 02

Getting our website running again

Lesson 03

Adding our remaining food menu items

Cool Mat – Part 3

Cool Mat – Part 3

Lesson 01

Intro + week overview

Lesson 02

The final code on GitHub

Lesson 03

Getting back up + running

Nomad Sun – Part 1

Nomad Sun – Part 1

Lesson 01

Intro + week overview

Lesson 02

Using Figma as our design tool

Lesson 03

A recap on guides + the final code

Nomad Sun – Part 2

Nomad Sun – Part 2

Lesson 01

Week intro + overview

Lesson 02

Reintroducing design systems

Lesson 03

Responsive design using tachyons

Alter Ego – Part 1

Alter Ego – Part 1

Lesson 01

Week intro

Lesson 02

Leading with our client proposal

Lesson 03

Introducing Flywheel

Alter Ego – Part 2

Alter Ego – Part 2

Lesson 01

Week intro

Lesson 02

Feature list + client questions

Lesson 03

Creating variable products

Alter Ego – Part 3

Alter Ego – Part 3

Lesson 01

Week intro

Lesson 02

Overview of final features

Lesson 03

Responsive header styles

Get access to WordPress

Practical, go-at-your-own pace learning, with help from our industry experts and experienced teachers
Projects and code that you can alter and include in your own sites and portfolio
Resources to get you started and going post-course

Your instructor

Lawrence Gosset

Lawrence Gosset

Teacher

With support from...

Rik Lomas

Rik Lomas

Founder + CEO

Course structure

Chapter 01

Cool Mat – Part 1

Lesson 01
Welcome + week overview
Lesson 02
The course guides
Lesson 03
Introducing the brief
Lesson 04
Translating our brief into features
Lesson 05
Our project design
Lesson 06
Exploring our design + features
Lesson 07
A background on the web
Lesson 08
What is a backend?
Lesson 09
What is WordPress good for?
Lesson 10
How WordPress works
Lesson 11
Choosing a code editor
Lesson 12
Installing MAMP to run our sites locally
Lesson 13
Downloading WordPress into our website folder
Lesson 14
Creating our database + installing WordPress
Lesson 15
Exploring the WordPress dashboard
Lesson 16
Looking at pages + posts
Lesson 17
Exploring the WordPress codebase
Lesson 18
Installing our blank underscores theme
Lesson 19
Digging into themes + their templates
Lesson 20
Creating a new WordPress install for cool mat
Lesson 21
Adding our first food items as posts
Lesson 22
Editing our theme files
Lesson 23
Exploring our post content file

Chapter 02

Cool Mat – Part 2

Lesson 01
Welcome back + week overview
Lesson 02
Getting our website running again
Lesson 03
Adding our remaining food menu items
Lesson 04
Looking at loops
Lesson 05
Post content + template tags
Lesson 06
Shaping our content to our design
Lesson 07
Editing our main stylesheet
Lesson 08
Loading custom stylesheets
Lesson 09
Structuring our header
Lesson 10
Adding a custom navigation
Lesson 11
Using custom fonts + styling our header
Lesson 12
Coding up our hero section
Lesson 13
Updating our website tagline
Lesson 14
Coding up our intro + story section
Lesson 15
Styling up our food menu items
Lesson 16
Fine tuning our food menu items
Lesson 17
Using CSS grid for our food menu layout
Lesson 18
Making our navigation links work

Chapter 03

Cool Mat – Part 3

Lesson 01
Intro + week overview
Lesson 02
The final code on GitHub
Lesson 03
Getting back up + running
Lesson 04
Add numbers to our food menu items
Lesson 05
Styling our food menu item numbers
Lesson 06
Embedding our map + directions
Lesson 07
Creating ratio boxes using CSS
Lesson 08
Customizing our footer
Lesson 09
Making our copyright year dynamic
Lesson 10
Trimming down our theme
Lesson 11
Adding responsive header styles
Lesson 12
Adding multiple loops to our page
Lesson 13
Querying for specific posts
Lesson 14
Exploring the WordPress docs
Lesson 15
Adding responsive hero section styles
Lesson 16
Making our intro section dynamic
Lesson 17
Styling up our intro section
Lesson 18
Introducing custom post types
Lesson 19
Adding a custom post type
Lesson 20
Moving our intro content over
Lesson 21
Adding a locations custom post type
Lesson 22
Introducing advanced custom fields
Lesson 23
Installing + configuring our custom fields
Lesson 24
Using category descriptions for section headings
Lesson 25
Setting up our site to support multiple languages
Lesson 26
Adding translated posts via the dashboard
Lesson 27
Converting our menu into different languages
Lesson 28
Translating our restaurant intro + locations
Lesson 29
Adding a language switcher
Lesson 30
Setting up web hosting
Lesson 31
Configuring our website to put live
Lesson 32
Uploading our website using FTP
Lesson 33
Exporting and importing our data
Lesson 34
Connecting a custom domain name
Lesson 35
Making some final CSS grid tweaks
Lesson 36
Week + project summary

Chapter 04

Nomad Sun – Part 1

Lesson 01
Intro + week overview
Lesson 02
Using Figma as our design tool
Lesson 03
A recap on guides + the final code
Lesson 04
Design shout-outs
Lesson 05
Building our homepage feature list
Lesson 06
Our location page features
Lesson 07
Breaking our design into components
Lesson 08
Running a fresh WordPress install
Lesson 09
Adding our first post + trimming content
Lesson 10
Custom fields for the hero component
Lesson 11
Structuring our hero component
Lesson 12
Adding a custom background image
Lesson 13
Introducing design systems + tachyons
Lesson 14
How does tachyons work?
Lesson 15
Styling our header using tachyons
Lesson 16
Installing custom Google fonts
Lesson 17
Debugging code when things go wrong
Lesson 18
Adding the other location posts
Lesson 19
Putting our hero into a separate file
Lesson 20
Introducing flexible components
Lesson 21
Adding the header + text components
Lesson 22
Displaying flexible content in our theme
Lesson 23
Styling the header image
Lesson 24
Typographic header styles
Lesson 25
Styling the text block component
Lesson 26
Linking to posts + theme clean-up
Lesson 27
Adding remaining location headers

Chapter 05

Nomad Sun – Part 2

Lesson 01
Week intro + overview
Lesson 02
Reintroducing design systems
Lesson 03
Responsive design using tachyons
Lesson 04
Adding responsive widths
Lesson 05
Styling our header using responsive tools
Lesson 06
What is tachyons suited for?
Lesson 07
What are functions?
Lesson 08
Writing our first function
Lesson 09
Formatting our date nicely with a function
Lesson 10
Cutting down repeated code
Lesson 11
Displaying an image attachment
Lesson 12
Responsive styles for image attachments
Lesson 13
Storing + getting data using objects
Lesson 14
Displaying + styling image captions
Lesson 15
What are arrays?
Lesson 16
Creating our gallery custom fields
Lesson 17
Adding the gallery component
Lesson 18
Organising components into files
Lesson 19
Displaying gallery images in our theme
Lesson 20
Styling the gallery images
Lesson 21
Creating custom widths for images
Lesson 22
Styling the text component
Lesson 23
Organising our gallery into a component file
Lesson 24
Using WP_Query for improved queries
Lesson 25
Excluding the current post from a loop
Lesson 26
Typographic styling for the explore section
Lesson 27
Aspect ratio boxes using tachyons
Lesson 28
Dropping in our social sharing links
Lesson 29
Adding the homepage components
Lesson 30
Adding the footer component + styles
Lesson 31
Introducing page transitions
Lesson 32
Using barba.js for page transitions
Lesson 33
A design once-over with tweaks
Lesson 34
Adding the remaining Hong Kong content
Lesson 35
Preparing + putting our website online
Lesson 36
Connecting a custom domain
Lesson 37
Thinking about performance
Lesson 38
Optimising images

Chapter 06

Alter Ego – Part 1

Lesson 01
Week intro
Lesson 02
Leading with our client proposal
Lesson 03
Introducing Flywheel
Lesson 04
Exploring e-commerce options
Lesson 05
Creating our theme
Lesson 06
Installing + configuring WooCommerce
Lesson 07
Exploring WooCommerce itself
Lesson 08
Checking off completed features
Lesson 09
Introducing the design
Lesson 10
Showing WooCommerce’s flexibility
Lesson 11
Creating product categories
Lesson 12
Adding some initial products
Lesson 13
Product search + additional features
Lesson 14
Advanced theme options for WooCommerce
Lesson 15
Customising WooCommerce templates
Lesson 16
Creating our site on Flywheel
Lesson 17
Pushing our site live

Chapter 07

Alter Ego – Part 2

Lesson 01
Week intro
Lesson 02
Feature list + client questions
Lesson 03
Creating variable products
Lesson 04
Adding a custom navigation
Lesson 05
Showing featured products
Lesson 06
Setting up our styles
Lesson 07
Embedding custom fonts
Lesson 08
Styling our header
Lesson 09
Disabling the admin bar
Lesson 10
Selectable colors using custom fields
Lesson 11
Displaying custom category colors
Lesson 12
Custom shop template files
Lesson 13
Product grid + layout styling
Lesson 14
Custom product background colors
Lesson 15
Styling our product details
Lesson 16
Introducing hooks + actions
Lesson 17
Full size product images using filters
Lesson 18
Cleaning up our category page
Lesson 19
Creating an animated marquee
Lesson 20
Navigation spotlight hover effect
Lesson 21
Displaying featured category images
Lesson 22
Trimming down our product page
Lesson 23
Introducing conditional tags
Lesson 24
Splitting our headers into components
Lesson 25
Creating a header for our product page
Lesson 26
Styling the product page header
Lesson 27
Showing related products
Lesson 28
Moving our notification messages
Lesson 29
Initial styling for checkout pages
Lesson 30
Taking card payments using Stripe

Chapter 08

Alter Ego – Part 3

Lesson 01
Week intro
Lesson 02
Overview of final features
Lesson 03
Responsive header styles
Lesson 04
Responsive product styles
Lesson 05
Creating custom footer navigations
Lesson 06
Styling our footer navigations
Lesson 07
Adding sale prices to products
Lesson 08
Using product short descriptions
Lesson 09
Batch importing product data
Lesson 10
Adding images to products
Lesson 11
Customising featured products order
Lesson 12
Trimming the theme down
Lesson 13
Setting our site name + tagline
Lesson 14
Configuring stock + account options
Lesson 15
Adding video to the homepage
Lesson 16
Custom page templates
Lesson 17
Creating our product search
Lesson 18
Adding the search + cart links
Lesson 19
Copying over cart theme files
Lesson 20
Styling the shopping cart table
Lesson 21
Custom backgrounds on cart images
Lesson 22
Changing the product remove icon
Lesson 23
Styling the coupon code + buttons
Lesson 24
Styling the cart totals table
Lesson 25
Product page typography styles
Lesson 26
Custom button colour + font smoothing
Lesson 27
Product page layout tweaks
Lesson 28
Styling the search + basket component
Lesson 29
Customising product variation style
Lesson 30
Varying product page flexbox layout
Lesson 31
Theming the flash notice
Lesson 32
Updating the standard page header
Lesson 33
Our checkout page styles
Lesson 34
Styling the footer
Lesson 35
Setting up shipping costs
Lesson 36
Creating discount coupons
Lesson 37
Order confirmations + notifications
Lesson 38
Creating contact forms
Lesson 39
Student discount form
Lesson 40
Preparing + putting our site live
Lesson 41
Updating the search page template
Lesson 42
Making our website secure
Lesson 43
Improving SEO in WordPress
Lesson 44
Preventing getting locked out

SuperHi students work at the best

Our students are based all over the world and work at creative companies large and small. Why not check out some of their work?

View student work

Feeling stuck?

Don’t worry, we are here to help you with:

Speedy help from one of our team members
Detailed, relevant solutions
Direct access to peer support through Discord!

Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!

© 2024 SuperHi, Inc.

Learn

All courses Code Design Project management SuperHi Editor

Company

About Student work SuperHi for Business NEW Careers Newsletter

Support

Return policy Terms of use Discrimination policy Code of conduct Contact us

A flexible, go-at-your-own-pace 8-week online course that teaches you how to use WordPress to build custom websites with CMSs, reviews and payment features. It's designed to have you building completely custom CMS driven sites within the first few weeks.

WordPress is great for blogs, e-commerce and building sites to hand off to clients. Learn how to build your own themes from scratch, customize them around your features, and implement e-commerce with payments.

What you’ll learn

Learn how to install WordPress and how to configure it for your own needs
Building themes from scratch + customizing them with advanced data and features
Converting designs into dynamic HTML, CSS + Javascript themes
How to find and use the best plug-ins + how to integrate them smoothly
Integrating e-commerce and payments with WooCommerce and Stripe
Getting our WordPress sites hosted online securely and handed over to clients

Requirements

A computer with Mac OS X 10.9 or above, Windows 7 or above installed and a broadband internet connection. That’s everything!

Target Audience

This course is accessible to beginners. All you need is a tiny bit of front-end HTML + CSS experience – if you don’t have this already, we recommend you take our Foundation HTML, CSS + Javascript course first.

Most of our students work in the creative industries – designers, strategists and copywriters are the most common jobs – but anyone is welcome to join the course.

For our first week we’ll start by looking at cool mat’s brief, translating it into a list of features that we can turn into code. We’ll then learn a bit about the web and how WordPress works before getting ourselves up and running with it.

In our second week we’ll introduce loops and how we can shape our post content to fit our design. Using our design and shopping list as a reference we’ll then work through our page’s front-end and get to grips with how to customise our theme.

We’ll make our site dynamic so that it can be updated from the dashboard, looking at custom post types to better organize our content. We'll also convert our site into Korean before putting it live with a custom domain.

We’ll start with a new project, Nomad Sun: a travel blog featuring the most beautiful places in the world. We'll dive into creating WordPress sites with multiple pages, rearrangeable content using components and styling using design systems.

Our second and final week building Nomad Sun, we’ll explore responsive design systems, working with galleries, using functions, animating page transitions and optimising our websites for maximum performance.

Starting on our third and final project, Alter Ego, we’ll lead with our client proposal and learn how to build an online shop using WooCommerce. We’ll also use Flywheel to develop and host our websites in a much quicker and easier fashion.

This week we’ll make strong progress on the design of our store and understanding how to really customize WooCommerce using hooks, actions and filters. As a rewarding finish we’ll get our site accepting card payments using Stripe.

For our final week we’ll style our site using a UI sticker sheet, batch import products to save time, add contact forms and customise WooCommerce templates even further. To finish off we’ll get our site online, working fast and fully secure.

Lawrence is a full-stack web developer and teacher who has also taught over a thousand people how to code. He was previously an instructor at London code school Steer.