WordPress (SuperHi)

WordPress (SuperHi)

English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 241 Lectures (28h 00m) | 10.9 GB

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

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
Table of Contents

1 Welcome + week overview
2 The course guides
3 Introducing the brief
4 Translating our brief into features
5 Our project design
6 Exploring our design + features
7 A background on the web
8 What is a backend?
9 What is WordPress good for?
10 How WordPress works
11 Choosing a code editor
12 Installing MAMP to run our sites locally
13 Downloading WordPress into our website folder
14 Creating our database + installing WordPress
15 Exploring the WordPress dashboard
16 Looking at pages + posts
17 Exploring the WordPress codebase
18 Installing our blank underscores theme
19 Digging into themes + their templates
20 Creating a new WordPress install for cool mat
21 Adding our first food items as posts
22 Editing our theme files
23 Exploring our post content file
24 Week summary + homework
25 Welcome back + week overview
26 Getting our website running again
27 Adding our remaining food menu items
28 Looking at loops
29 Post content + template tags
30 Shaping our content to our design
31 Editing our main stylesheet
32 Loading custom stylesheets
33 Structuring our header
34 Adding a custom navigation
35 Using custom fonts + styling our header
36 Coding up our hero section
37 Updating our website tagline
38 Coding up our intro + story section
39 Styling up our food menu items
40 Fine tuning our food menu items
41 Using CSS grid for our food menu layout
42 Making our navigation links work
43 Week summary + homework
44 Intro + week overview
45 The final code on GitHub
46 Getting back up + running
47 Add numbers to our food menu items
48 Styling our food menu item numbers
49 Embedding our map + directions
50 Creating ratio boxes using CSS
51 Customizing our footer
52 Making our copyright year dynamic
53 Trimming down our theme
54 Adding responsive header styles
55 Adding multiple loops to our page
56 Querying for specific posts
57 Exploring the WordPress docs
58 Adding responsive hero section styles
59 Making our intro section dynamic
60 Styling up our intro section
61 Introducing custom post types
62 Adding a custom post type
63 Moving our intro content over
64 Adding a locations custom post type
65 Introducing advanced custom fields
66 Installing + configuring our custom fields
67 Using category descriptions for section headings
68 Setting up our site to support multiple languages
69 Adding translated posts via the dashboard
70 Converting our menu into different languages
71 Translating our restaurant intro + locations
72 Adding a language switcher
73 Setting up web hosting
74 Configuring our website to put live
75 Uploading our website using FTP
76 Exporting and importing our data
77 Connecting a custom domain name
78 Making some final CSS grid tweaks
79 Homework challenges
80 Week + project summary
81 Intro + week overview
82 Using Figma as our design tool
83 A recap on guides + the final code
84 Design shout-outs
85 Building our homepage feature list
86 Our location page features
87 Breaking our design into components
88 Running a fresh WordPress install
89 Adding our first post + trimming content
90 Custom fields for the hero component
91 Structuring our hero component
92 Adding a custom background image
93 Introducing design systems + tachyons
94 How does tachyons work?
95 Styling our header using tachyons
96 Installing custom Google fonts
97 Debugging code when things go wrong
98 Adding the other location posts
99 Putting our hero into a separate file
100 Introducing flexible components
101 Adding the header + text components
102 Displaying flexible content in our theme
103 Styling the header image
104 Typographic header styles
105 Styling the text block component
106 Linking to posts + theme clean-up
107 Adding remaining location headers
108 Week summary + homework
109 Week intro + overview
110 Reintroducing design systems
111 Responsive design using tachyons
112 Adding responsive widths
113 Styling our header using responsive tools
114 What is tachyons suited for?
115 What are functions?
116 Writing our first function
117 Formatting our date nicely with a function
118 Cutting down repeated code
119 Displaying an image attachment
120 Responsive styles for image attachments
121 Storing + getting data using objects
122 Displaying + styling image captions
123 What are arrays?
124 Creating our gallery custom fields
125 Adding the gallery component
126 Organising components into files
127 Displaying gallery images in our theme
128 Styling the gallery images
129 Creating custom widths for images
130 Styling the text component
131 Organising our gallery into a component file
132 Using WP_Query for improved queries
133 Excluding the current post from a loop
134 Typographic styling for the explore section
135 Aspect ratio boxes using tachyons
136 Dropping in our social sharing links
137 Adding the homepage components
138 Adding the footer component + styles
139 Introducing page transitions
140 Using barba.js for page transitions
141 A design once-over with tweaks
142 Adding the remaining Hong Kong content
143 Preparing + putting our website online
144 Connecting a custom domain
145 Thinking about performance
146 Optimising images
147 Week summary + homeworks
148 Week intro
149 Leading with our client proposal
150 Introducing Flywheel
151 Exploring e-commerce options
152 Creating our theme
153 Installing + configuring WooCommerce
154 Exploring WooCommerce itself
155 Checking off completed features
156 Introducing the design
157 Showing WooCommerce’s flexibility
158 Creating product categories
159 Adding some initial products
160 Product search + additional features
161 Advanced theme options for WooCommerce
162 Customising WooCommerce templates
163 Creating our site on Flywheel
164 Pushing our site live
165 Week overview + homeworks
166 Week intro
167 Feature list + client questions
168 Creating variable products
169 Adding a custom navigation
170 Showing featured products
171 Setting up our styles
172 Embedding custom fonts
173 Styling our header
174 Disabling the admin bar
175 Selectable colors using custom fields
176 Displaying custom category colors
177 Custom shop template files
178 Product grid + layout styling
179 Custom product background colors
180 Styling our product details
181 Introducing hooks + actions
182 Full size product images using filters
183 Cleaning up our category page
184 Creating an animated marquee
185 Navigation spotlight hover effect
186 Displaying featured category images
187 Trimming down our product page
188 Introducing conditional tags
189 Splitting our headers into components
190 Creating a header for our product page
191 Styling the product page header
192 Showing related products
193 Moving our notification messages
194 Initial styling for checkout pages
195 Taking card payments using Stripe
196 Week summary + homework
197 Week intro
198 Overview of final features
199 Responsive header styles
200 Responsive product styles
201 Creating custom footer navigations
202 Styling our footer navigations
203 Adding sale prices to products
204 Using product short descriptions
205 Batch importing product data
206 Adding images to products
207 Customising featured products order
208 Trimming the theme down
209 Setting our site name + tagline
210 Configuring stock + account options
211 Adding video to the homepage
212 Custom page templates
213 Creating our product search
214 Adding the search + cart links
215 Copying over cart theme files
216 Styling the shopping cart table
217 Custom backgrounds on cart images
218 Changing the product remove icon
219 Styling the coupon code + buttons
220 Styling the cart totals table
221 Product page typography styles
222 Custom button colour + font smoothing
223 Product page layout tweaks
224 Styling the search + basket component
225 Customising product variation style
226 Varying product page flexbox layout
227 Theming the flash notice
228 Updating the standard page header
229 Our checkout page styles
230 Styling the footer
231 Setting up shipping costs
232 Creating discount coupons
233 Order confirmations + notifications
234 Creating contact forms
235 Student discount form
236 Preparing + putting our site live
237 Updating the search page template
238 Making our website secure
239 Improving SEO in WordPress
240 Preventing getting locked out
241 Course summary + homeworks

Homepage