English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 7h 05m | 1.21 GB
If you know how to build complex custom WordPress themes using the starter theme known as _s (Underscores), you can create nearly anything you can dream up. In this course, Morten Rand-Hendriksen shows how to build a theme piece-by-piece by breaking it down into sections including the header, menus, images, index pages, and more. Along the way, he covers key development concepts like using Sass and Sass partials to style the theme, using Gulp to process your code, understanding the WordPress template hierarchy, customizing JavaScript to work for your theme, and more. To wrap up, Morten covers the Customizer and focuses on new features like responsive images.
Topics include:
- Setting up a WordPress development environment
- Getting and installing _s
- Automating theme development with Gulp
- The WordPress template hierarchy
- Setting up the basic theme
- Registering and displaying menus
- Applying styles to menus
- Creating conditional layouts
- Working with the comments template
- Working with featured images
- Working with widget areas, or sidebars
- Working with index templates
- Working with static pages
- Adding features to the Customizer
Table of Contents
1 Welcome
2 What to know before you start this course
3 How this course and the lesson files will work
4 Humescores – A preview of the final project
5 How to set up a WordPress development environment
6 Get and install _s
7 Install and explore WordPress Theme Unit Test data
8 Install the Developer plugin and other useful plugins
9 Install and set up NetBeans or another IDE
10 Automate theme development with Gulp and various tools
11 Modular, mobile-first design
12 How do WordPress themes work
13 How to make sense of the WordPress template hierarchy
14 Underscores – An overview
15 Explore the Sass partials setup in _s
16 Configure the theme info
17 Configure baseline settings and functions
18 Enqueue and apply custom web fonts
19 Allow translators to control web fonts
20 Preconnect custom web fonts for improved performance
21 Work with Sass and source maps
22 Create responsive typography
23 Lay the groundwork for responsive layouts
24 Style the default header
25 Add an optional header image function
26 Show the header image only on the front page
27 Add an optional custom logo to the header
28 Fix responsive problems in the header
29 How to register and display menus
30 Apply styles to the menu
31 Borrow JavaScript from Twenty Seventeen to enable dropdown menus
32 Customize JavaScript to work with the current theme
33 Challenge – Add a social media menu to the footer
34 Solution – Add a social media menu to the footer
35 Get to know the single post template
36 Display a category list at the top of the post
37 Modify the output of post metadata
38 Apply CSS to the post header
39 Apply CSS to typical post content
40 Configure and verify image alignments
41 Display ‘full-bleed’ images on smaller screens
42 Style image captions
43 Style image galleries
44 Configure post navigation
45 Planning an unusual layout
46 Detect when the sidebar has widgets
47 Build the structure for displaying the sidebar
48 Use Flexbox to create a responsive layout
49 Customize the single post template for a no-sidebar layout
50 Use Flexbox to create a no-sidebar responsive layout
51 Get to know the comments template
52 Configure comments output including Gravatars
53 Apply CSS to comments
54 Highlight post author comments
55 Change the display of the comment form using CSS
56 Configure the comment section title and navigation
57 How do featured images (post thumbnails) work
58 Display featured images in the single post template
59 Create custom featured image sizes
60 Generate new featured image sizes with a plugin
61 Get to know widget areas, aka ‘sidebars’
62 Use the Monster Widget plugin to test all widgets
63 Applying CSS to the widget area
64 Add custom styles to specific widgets
65 Challenge – Add an optional widget area to the footer
66 Solution – Add an optional widget area to the footer
67 Get to know the index template hierarchy
68 Identify when you are on an archive page
69 Customize index and archive templates
70 Add a custom Read More link to index posts
71 Display excerpts in indexes and archives
72 Customize the excerpt output
73 Add featured images to index and archive pages
74 Add more meaningful archive navigation
75 Highlight sticky posts
76 Customize archive pages
77 Customize the search results page
78 Customize the 404 error page and empty search results
79 Get to know the page template
80 Challenge – Create a page layout with a custom left-aligned sidebar
81 Solution – Create a page layout with a custom left-aligned sidebar
82 Customize responsive image output for all images
83 Add SVG icon functionality
84 Add your own SVG icons in your theme
85 Provide fallbacks for browsers without SVG support
86 Get to know the Customizer
87 Add controls for the header background color
88 Preview settings in the Customizer
89 Apply Customizer changes to the front end
90 Add sections and radio controls to the Customizer
91 Change theme output based on Customizer settings
92 Add editor styles to match front-end styles
93 Add a screenshot
94 Going further with WordPress
Resolve the captcha to access the links!